/* Monster Truck Roundup look for pretix ticket pages.
   Source of truth: monstertruckroundup.com (Divi). Black pages, red 2px section lines,
   lime Norwester navigation, blue Norwester headings, yellow page titles. */

@font-face { font-family: "Norwester"; src: url("fonts/norwester.7bf226306214.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("fonts/orbitron-var.5d281085f727.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("fonts/rajdhani-500.98d75ef6878a.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("fonts/rajdhani-600.ad9c55ecf039.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("fonts/rajdhani-700.d5448938a162.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("fonts/titillium-web-400.cfb5bec034d2.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("fonts/titillium-web-600.b65bd9e79f1d.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("fonts/titillium-web-700.6a025e378400.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
    --mtr-black: #000;
    --mtr-panel: #0e0e0e;
    --mtr-panel-2: #161616;
    --mtr-line: #2a2a2a;
    --mtr-field: #121212;
    --mtr-field-line: #3a3a3a;
    --mtr-lime: #D0EF02;
    --mtr-red: #EE4229;
    --mtr-blue: #2EA3F2;
    --mtr-yellow: #FFED3F;
    --mtr-text: #fff;
    --mtr-muted: #b0b0b0;
    --mtr-display: "Norwester", "Rajdhani", Helvetica, Arial, sans-serif;
    --mtr-tech: "Orbitron", Helvetica, Arial, sans-serif;
    --mtr-label: "Rajdhani", Helvetica, Arial, sans-serif;
    --mtr-body: "Titillium Web", Helvetica, Arial, sans-serif;
}

/* ---------- Page ---------- */
html, body { background: var(--mtr-black) !important; }
body {
    color: var(--mtr-text);
    font-family: var(--mtr-body);
    font-size: 17px;
    line-height: 1.55;
}
body a { color: var(--mtr-blue); }
body a:hover, body a:focus { color: var(--mtr-lime); }
body a:focus-visible, body .btn:focus-visible, body summary:focus-visible { outline: 2px solid var(--mtr-yellow); outline-offset: 2px; }
body hr { border-top-color: var(--mtr-line); }
body ::selection { background: var(--mtr-lime); color: #000; }

body .container.main-box {
    background: transparent !important;
    box-shadow: none !important;
    border: 0;
    max-width: 1080px;
    margin-top: 64px;
}
body .page-header-links { margin-top: 64px; }
body .page-header-links + .main-box, body .page-header-links ~ .main-box { margin-top: 0; }
body .page-header-links a { color: var(--mtr-muted); font-family: var(--mtr-tech); font-size: 12px; }
body .offline-banner { background: var(--mtr-yellow); color: #000; font-family: var(--mtr-label); font-weight: 600; }
body .offline-banner a { color: #000; text-decoration: underline; }

/* The website header already shows the logo, so the small shop logo is hidden. Large event banners stay. */
body .page-header.pager-header-with-logo:not(.logo-large) { display: none; }
body .page-header { border-bottom: 0; margin: 0 0 8px; padding: 0; }

/* ---------- Type ---------- */
body h1, body h2, body h3, body h4, body .h1, body .h2, body .h3, body .h4 { color: var(--mtr-text); }

body .content-header, body .page-header h1 {
    font-family: var(--mtr-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--mtr-yellow);
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.08;
    letter-spacing: .5px;
    margin: 8px 0 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--mtr-red);
    box-shadow: 0 2px 0 0 var(--mtr-black);
}

body main h3, body main .h3, body main h2.h3 {
    font-family: var(--mtr-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--mtr-blue);
    font-size: 27px;
    letter-spacing: .5px;
    margin: 30px 0 12px;
}

body main h4, body main .h4 {
    font-family: var(--mtr-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

body main p, body main li { font-size: 17px; }
body main strong { color: var(--mtr-text); }
body main ul li::marker { color: var(--mtr-lime); }
body .lead { color: var(--mtr-text); }
body .text-muted, body .help-block { color: var(--mtr-muted) !important; }

/* Location and date lines */
body .info-row-icon .fa { color: var(--mtr-lime); font-size: 22px; }
body .info-row p { font-family: var(--mtr-tech); font-size: 14px; letter-spacing: .3px; line-height: 1.7; }
body .info-row p a { font-family: var(--mtr-tech); }

/* ---------- Products ---------- */
body .item-category { margin-top: 34px; }
body .item-category > h3, body .item-category > .h3 {
    padding-bottom: 10px;
    border-bottom: 2px solid var(--mtr-red);
}
body .product-row {
    background: var(--mtr-panel);
    border: 1px solid var(--mtr-line);
    border-left: 4px solid var(--mtr-lime);
    border-radius: 3px;
    margin: 14px 0 0;
    padding: 16px 6px;
}
body .product-row + .product-row { border-top: 1px solid var(--mtr-line); }
body .product-row h4, body .product-row .h4 { font-size: 24px; margin: 0 0 4px; color: var(--mtr-text); }
body .product-row .product-description, body .product-row .product-description p { color: #cfcfcf; font-size: 16px; margin: 0; }
body .product-row .price, body .product-row .price p { font-family: var(--mtr-tech); font-weight: 700; color: var(--mtr-lime); font-size: 18px; }
body .row-variation { border-top-color: var(--mtr-line); }
body .availability-box .label, body .availability-box { color: var(--mtr-muted); }

body .input-item-count-group .btn.btn-default {
    background: var(--mtr-black);
    color: var(--mtr-lime);
    border: 1px solid var(--mtr-field-line);
    font-family: var(--mtr-tech);
    font-size: 18px;
}
body .input-item-count-group .btn.btn-default:hover { background: var(--mtr-lime); color: #000; }
body .input-item-count-group .form-control { background: var(--mtr-black); color: var(--mtr-text); border-color: var(--mtr-field-line); font-family: var(--mtr-tech); }

/* ---------- Buttons ---------- */
body .btn {
    font-family: var(--mtr-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .6px;
    border-radius: 3px;
    border-width: 2px;
}
body .btn-lg { font-size: 22px; padding: 12px 22px; }
body .btn-primary, body .btn-primary:visited {
    background: var(--mtr-lime);
    border-color: var(--mtr-lime);
    color: #000;
}
body .btn-primary:hover, body .btn-primary:focus, body .btn-primary:active, body .btn-primary.active,
body .btn-primary:active:hover, body .btn-primary:active:focus {
    background: var(--mtr-yellow);
    border-color: var(--mtr-yellow);
    color: #000;
}
body .btn-primary .fa { color: #000; }
body .btn-primary[disabled], body .btn-primary.disabled { background: #6d7a1a; border-color: #6d7a1a; color: #1a1a1a; }
body .btn-default, body .btn-default:visited {
    background: transparent;
    border-color: var(--mtr-blue);
    color: var(--mtr-blue);
}
body .btn-default:hover, body .btn-default:focus, body .btn-default:active {
    background: var(--mtr-blue);
    border-color: var(--mtr-blue);
    color: #000;
}
body .btn-link { color: var(--mtr-blue); font-family: var(--mtr-label); text-transform: none; letter-spacing: 0; }
body .btn-danger { background: var(--mtr-red); border-color: var(--mtr-red); color: #fff; }

/* ---------- Forms ---------- */
body label, body .control-label, body legend {
    color: var(--mtr-text);
    font-family: var(--mtr-label);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: .2px;
}
body legend { border-bottom-color: var(--mtr-line); }
body .form-control {
    background: var(--mtr-field);
    color: var(--mtr-text);
    border: 1px solid var(--mtr-field-line);
    border-radius: 3px;
    box-shadow: none;
    font-family: var(--mtr-body);
    font-size: 16px;
    min-height: 42px;
}
body .form-control::placeholder { color: #777; }
body .form-control:focus { border-color: var(--mtr-lime); box-shadow: 0 0 0 2px rgba(208, 239, 2, .3); }
body .form-control[disabled], body .form-control[readonly] { background: #1b1b1b; color: #9a9a9a; }
body select.form-control option { background: var(--mtr-field); color: var(--mtr-text); }
body .input-group-addon { background: #1b1b1b; color: #ddd; border-color: var(--mtr-field-line); }
body input[type=checkbox], body input[type=radio] { accent-color: var(--mtr-lime); }
body .checkbox label, body .radio label { font-family: var(--mtr-body); font-weight: 400; font-size: 16px; }
body .has-error .form-control { border-color: var(--mtr-red); }
body .has-error .help-block, body .has-error .control-label, body .has-error label { color: #ff7a66 !important; }
body .required-field-indicator, body .label-required { color: var(--mtr-red); }

/* ---------- Panels, cart, order pages ---------- */
body .panel {
    background: var(--mtr-panel);
    border: 1px solid var(--mtr-line);
    border-radius: 3px;
    box-shadow: none;
    color: var(--mtr-text);
}
body .panel > .panel-heading,
body .panel-default > .panel-heading,
body .panel-primary > .panel-heading,
body .panel-success > .panel-heading,
body .panel-danger > .panel-heading,
body .panel-warning > .panel-heading {
    background: var(--mtr-panel-2);
    color: var(--mtr-text);
    border-bottom: 2px solid var(--mtr-red);
}
body .panel-title, body .panel-title a {
    font-family: var(--mtr-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--mtr-blue);
    font-size: 21px;
}
body .panel-title .fa { color: var(--mtr-lime); }
body .panel-body { color: var(--mtr-text); }
body .panel-footer { background: #121212; border-top-color: var(--mtr-line); }
body .panel-subhead { background: #121212; color: var(--mtr-muted); border-color: var(--mtr-line); }
body .well { background: var(--mtr-panel); border-color: var(--mtr-line); box-shadow: none; color: var(--mtr-text); }

body .cart-row { border-color: var(--mtr-line) !important; }
body .cart-row .price, body .cart .total strong, body .cart-row.total .price { color: var(--mtr-lime); font-family: var(--mtr-tech); }
body .cart-row.total, body .cart-row.subtotal { font-family: var(--mtr-label); font-weight: 700; }
body .cart-icon-details { color: var(--mtr-muted); }

body .table > thead > tr > th, body .table > tbody > tr > td, body .table > tfoot > tr > td,
body .table > tbody > tr > th { border-color: var(--mtr-line); }
body .table-striped > tbody > tr:nth-of-type(odd), body .alternating-rows > :nth-child(odd) { background: #0b0b0b; }

body .label-success { background: #3f7d1e; }
body .label-warning { background: #b58a00; }
body .label-danger { background: var(--mtr-red); }
body .label-info, body .label-primary { background: #1f6ea3; }

/* ---------- Alerts and dialogs ---------- */
body .alert {
    background: #101010;
    border: 1px solid var(--mtr-line);
    border-left-width: 4px;
    border-radius: 3px;
    color: var(--mtr-text);
}
body .alert-info { border-left-color: var(--mtr-blue); }
body .alert-success { border-left-color: var(--mtr-lime); }
body .alert-warning { border-left-color: var(--mtr-yellow); }
body .alert-danger { border-left-color: var(--mtr-red); }
body .alert a:not(.btn) { color: var(--mtr-blue); }

body .modal-wrapper { background: rgba(0, 0, 0, .82); }
body .modal-card {
    background: var(--mtr-panel);
    color: var(--mtr-text);
    border: 1px solid var(--mtr-line);
    border-top: 3px solid var(--mtr-lime);
}
body .modal-card h3 { color: var(--mtr-yellow); font-family: var(--mtr-display); text-transform: uppercase; font-weight: 400; }
body .modal-card-icon .fa { color: var(--mtr-lime); }

body .event-list .row, body .event-list > * { border-color: var(--mtr-line); }

/* pretix's own footer (keeps the required "powered by pretix" credit) */
body .main-box > footer { border-top: 1px solid var(--mtr-line); margin-top: 40px; padding-top: 14px; }
body .main-box > footer, body .main-box > footer a { color: #8a8a8a; font-family: var(--mtr-tech); font-size: 11px; letter-spacing: .3px; }
body .main-box > footer a:hover { color: var(--mtr-lime); }

/* ---------- Website header ---------- */
.mtr-site-header {
    background: var(--mtr-black);
    border-bottom: 2px solid var(--mtr-red);
    position: relative;
    z-index: 20;
}
.mtr-site-header-inner {
    max-width: 1280px;
    height: 58px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
}
.mtr-nav { flex: 1; display: flex; gap: 30px; }
.mtr-nav-left { justify-content: flex-end; }
.mtr-nav-right { justify-content: flex-start; }
.mtr-site-header .mtr-nav a, .mtr-mobile-menu nav a {
    font-family: var(--mtr-display);
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: .4px;
    color: var(--mtr-lime);
    text-decoration: none;
    white-space: nowrap;
}
.mtr-site-header .mtr-nav a:hover, .mtr-mobile-menu nav a:hover { color: var(--mtr-blue); }
.mtr-logo { flex: 0 0 auto; align-self: flex-start; margin: 4px 34px 0; }
.mtr-logo img { display: block; width: 150px; height: auto; position: relative; z-index: 21; }

.mtr-mobile-menu { display: none; }

@media (max-width: 991px) {
    .mtr-nav { display: none; }
    .mtr-site-header-inner { justify-content: center; height: 54px; position: relative; }
    .mtr-logo { margin: 4px 0 0; }
    .mtr-logo img { width: 112px; }
    body .container.main-box, body .page-header-links { margin-top: 44px; }
    .mtr-mobile-menu { display: block; position: absolute; right: 16px; top: 0; height: 54px; }
    .mtr-mobile-menu summary {
        list-style: none;
        cursor: pointer;
        width: 34px;
        height: 54px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
    }
    .mtr-mobile-menu summary::-webkit-details-marker { display: none; }
    .mtr-mobile-menu summary span { display: block; height: 3px; background: #EDF000; border-radius: 2px; }
    .mtr-mobile-menu[open] nav {
        position: fixed;
        left: 0;
        right: 0;
        top: 56px;
        background: var(--mtr-black);
        border-bottom: 2px solid var(--mtr-red);
        padding: 8px 16px 14px;
        display: flex;
        flex-direction: column;
    }
    .mtr-mobile-menu nav a { padding: 10px 0; border-bottom: 1px solid #1c1c1c; }
}

/* ---------- Website footer ---------- */
.mtr-site-footer {
    background: var(--mtr-black);
    border-top: 2px solid var(--mtr-red);
    margin-top: 40px;
    padding: 34px 16px 40px;
    font-family: var(--mtr-tech);
    font-size: 13px;
    color: var(--mtr-text);
}
.mtr-site-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 24px;
}
.mtr-site-footer p { margin: 0 0 6px; font-size: 13px; }
.mtr-site-footer a { color: var(--mtr-text); text-decoration: none; }
.mtr-site-footer a:hover { color: var(--mtr-lime); }
.mtr-footer-col > a { display: block; margin: 0 0 8px; }
.mtr-footer-name { font-family: var(--mtr-display); font-size: 21px !important; text-transform: uppercase; color: var(--mtr-lime); }
.mtr-social { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.mtr-social a { font-size: 22px; line-height: 1; color: var(--mtr-lime); }
.mtr-social .mtr-social-text { font-family: var(--mtr-display); font-size: 16px; text-transform: uppercase; padding-top: 3px; }

@media (max-width: 767px) {
    .mtr-site-footer-inner { grid-template-columns: 1fr 1fr; }
    .mtr-site-footer-inner > :first-child { grid-column: 1 / -1; }
    body .product-row .price { margin-top: 8px; }
}
