:root {
    --body-font: "Nunito", sans-serif;
    --normal-font-size: 1rem;
    --body-background-color: #010619;
    --bs-font-monospace: "DroidSansMono";
}

/* Ticketux Font */
@font-face {
    font-family: 'PoppinsSemiBold';
    src: url('self/poppins-semibold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Default UI Font */
@font-face {
    font-family: 'Nunito';
    src: url('self/nunito-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito';
    src: url('self/nunito-semibold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito';
    src: url('self/nunito-bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

/* Monospace */
@font-face {
    font-family: 'DroidSansMono';
    src: url('self/droid-sans-mono-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

body {
    /* overflow-x: hidden; */
    background-color: var(--body-background-color);
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
}

.footer-logo {
    opacity: 0.4;
    width: 100px;
    padding: 1em;
}

.container {
    max-width: 960px;
}

#banner {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

footer {
    user-select: none;
}

footer a:link, footer a:visited, footer a:active {
    color: #6c757d;
}

.legal a:link, .legal a:visited, .legal a:active {
    color: #6c757d;
}

.banner-blur {
    filter: blur(50px);

    /* safari rendering workaround */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.banner-blur img {
    color: transparent;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

h1 {
    font-family: 'PoppinsSemiBold';
}

h2 {
    font-family: 'PoppinsSemiBold';
    text-transform: uppercase;
}

.event-header-content {
    max-width: var(--bs-breakpoint-xxl);
    margin-left: auto;
    margin-right: auto;
}

.event-header h3 {
    font-size: 140%;
}

.event-header h4 {
    font-size: 100%;
}

.invalid-feedback {
    text-align: left;
}

/* override container */
@media (min-width: 1400px) {
    .container {
        max-width: 960px !important;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 960px !important;
    }
}

.form-signin {
    max-width: 330px;
    padding: 15px;
}

.form-signin .form-floating:focus-within {
    z-index: 2;
}

.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

h5.card-title {
    letter-spacing: -0.05em;
}

.card-img-top-holder {
    height: 170px;
    overflow: hidden;
}

.card-img-top-holder img {
    object-fit: cover;
    object-position: center center;
    height: 170px;
    width: 100%;
}

#event-info {
    text-shadow: 0px 2px 5px #000;
}

#event-info .event-date {
    opacity: 0.6;
}

.list-group-item-no-number::before {
    content: "" !important;
}

.input-quantity {
    width: 140px;
}

.input-quantity button, .input-quantity button:disabled {
    touch-action: manipulation;
    pointer-events: auto !important;
}

.force-disable {
    pointer-events: none !important;
}

.input-quantity input:disabled {
    background-color: #ffffff;
    border-top: solid 1px var(--bs-gray-500);
    border-bottom: solid 1px var(--bs-gray-500);
}

/* bootstrap 5.2.x retro-compatibility */
.text-muted {
    color: #6c757d !important;
}

.modal {
    --bs-modal-zindex: 2055;
}

.modal-backdrop {
    --bs-backdrop-opacity: 0.7;
    --bs-backdrop-zindex: 2050;
}

/* tickets list layout */
.tickets-list {
}

.tickets-list .row {
    background: var(--bs-gray-300);
}

.tickets-list .row:nth-child(even) {
    background: var(--bs-gray-400);
}

.tickets-list .row:first-child {
    border-top-left-radius: var(--bs-border-radius);
}

.ticket-bold {
    font-weight: 600 !important;
}

.checkout-sticky {
    position: sticky;
    z-index: 1500;
}

@media (max-width: 768px) {
    .tickets-list {
        border: none;
    }

    .tickets-list .row:first-child {
        border-top-right-radius: var(--bs-border-radius);
    }



    .checkout-sticky {
        border-top: dashed 1px var(--bs-gray-600);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        bottom: 0;
    }
    
    .checkout-sticky .checkout-reduced {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 576px) {
    .alert.order-details, .list-group.order-details {
        border-radius: 0;
    }
}

@media (min-width: 768px) {
    .tickets-list {
        border-right: dashed 1px var(--bs-gray-500);
        border-top-left-radius: var(--bs-border-radius);
        border-bottom-left-radius: var(--bs-border-radius);
        background: var(--bs-gray-300);
    }

    .tickets-list .row:last-child {
        border-bottom-left-radius: var(--bs-border-radius);
    }
    
    .checkout-sticky {
        top: 0;
        height: min-content;
        background-color: transparent !important;
    }
}

.event-container .alert {
    margin-bottom: 0;
    text-align: center;
}

.alert-stackable:first-child {
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.alert-stackable:not(:first-child) {
    border-radius: 0 !important;
}

.row-ticket-soldout {
    /* opacity: 0.2;
    transition: 1s; */
}

.row-ticket-soldout:hover {
    /* opacity: 0.7; */
}

.row-ticket-soon {
    /* opacity: 0.6;
    transition: 1s; */
}

.row-ticket-soon:hover {
    /* opacity: 0.9; */
}

.row-ticket-on-sale {
    opacity: 1;
}

@keyframes alert-blink {
    0%   { background-color: rgba(255, 185, 0, 1); !important }
    100% { background-color: rgba(255, 210, 84, 1); !important }
}

.alert-blink {
    animation: alert-blink 2s ease-in-out infinite alternate;
    opacity: 1;
}