/* =========================================
   RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    --black: #050505;
    --dark: #0d0d0d;
    --dark-2: #151515;

    --white: #f5f5f2;
    --grey: #888888;

    --line: #2a2a2a;

    --accent: #c7ff00;

}

html {
    scroll-behavior: smooth;
}

body {

    background:
        var(--black);

    color:
        var(--white);

    font-family:
        "Inter",
        sans-serif;

}

button,
input,
select {

    font:
        inherit;

}


/* =========================================
   NAVBAR
========================================= */

.navbar {

    min-height:
        92px;

    padding:
        0 6%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border-bottom:
        1px solid var(--line);

    background:
        rgba(5,5,5,.96);

    position:
        relative;

    z-index:
        10;

}

.logo {

    color:
        var(--white);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        34px;

    font-weight:
        900;

    font-style:
        italic;

    letter-spacing:
        -1px;

    text-decoration:
        none;

}

.logo span,
.footer-logo span {

    color:
        var(--accent);

}

.navbar nav {

    display:
        flex;

    gap:
        40px;

}

.navbar nav a {

    color:
        #777;

    text-decoration:
        none;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight:
        700;

    letter-spacing:
        2px;

}

.navbar nav a:hover,
.navbar nav a.active {

    color:
        var(--white);

}

.nav-button {

    padding:
        20px 30px;

    background:
        var(--accent);

    color:
        #000;

    text-decoration:
        none;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight:
        900;

    letter-spacing:
        1px;

}


/* =========================================
   GENERAL
========================================= */

.eyebrow {

    color:
        var(--accent);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        4px;

}

.main-button {

    border:
        none;

    padding:
        21px 30px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    background:
        var(--accent);

    color:
        #000;

    text-decoration:
        none;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight:
        900;

    font-size:
        17px;

    letter-spacing:
        1px;

    cursor:
        pointer;

}

.main-button:hover {

    transform:
        translateY(-3px);

}

.outline-button {

    padding:
        20px 30px;

    border:
        1px solid #444;

    color:
        var(--white);

    text-decoration:
        none;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight:
        700;

    letter-spacing:
        1px;

}


/* =========================================
   HERO
========================================= */

.hero {

    min-height:
        calc(100vh - 92px);

    padding:
        100px 6%;

    display:
        grid;

    grid-template-columns:
        1fr 230px;

    align-items:
        center;

    position:
        relative;

    overflow:
        hidden;

}

.hero-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .15;

    background-image:
        linear-gradient(
            #333 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            #333 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

    transform:
        skewY(-5deg);

}

.hero-content {

    position:
        relative;

    z-index:
        2;

}

.hero h1 {

    margin:
        20px 0 30px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(
            85px,
            12vw,
            185px
        );

    font-weight:
        900;

    line-height:
        .73;

    letter-spacing:
        -6px;

}

.hero h1 span,
.section-heading h2 span,
.process-section h2 span,
.page-hero h1 span,
.admin-title span {

    color:
        transparent;

    -webkit-text-stroke:
        2px var(--white);

}

.hero-text {

    max-width:
        530px;

    color:
        #969696;

    line-height:
        1.8;

}

.hero-actions {

    margin-top:
        40px;

    display:
        flex;

    gap:
        12px;

}

.hero-side {

    position:
        relative;

    z-index:
        2;

    padding-left:
        35px;

    border-left:
        1px solid var(--line);

}

.match-number {

    color:
        var(--accent);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        100px;

    font-weight:
        900;

}

.hero-side p {

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight:
        700;

    letter-spacing:
        3px;

}


/* =========================================
   SECTION
========================================= */

.section {

    padding:
        110px 6%;

}

.section-heading {

    margin-bottom:
        60px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

}

.section-heading h2,
.process-section h2 {

    margin-top:
        15px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(
            65px,
            8vw,
            115px
        );

    font-weight:
        900;

    line-height:
        .8;

}

.text-link {

    color:
        var(--white);

    text-decoration:
        none;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight:
        700;

}


/* =========================================
   MATCH CARDS
========================================= */

.match-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        15px;

}

.match-card {

    padding:
        28px;

    border:
        1px solid var(--line);

    background:
        var(--dark);

}

.match-top {

    display:
        flex;

    justify-content:
        space-between;

    color:
        #777;

    font-family:
        "Barlow Condensed",
        sans-serif;

    letter-spacing:
        1px;

}

.teams {

    min-height:
        290px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}

.teams h3 {

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        50px;

    font-weight:
        900;

}

.versus {

    color:
        var(--accent);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight:
        800;

}

.match-info {

    padding:
        20px 0;

    display:
        flex;

    justify-content:
        space-between;

    border-top:
        1px solid var(--line);

    color:
        #888;

    font-size:
        12px;

}

.card-button {

    padding:
        17px;

    display:
        block;

    background:
        #fff;

    color:
        #000;

    text-align:
        center;

    text-decoration:
        none;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight:
        900;

}


/* =========================================
   PROCESS
========================================= */

.process-section {

    padding:
        110px 6%;

    background:
        var(--accent);

    color:
        #000;

}

.process-section .eyebrow {

    color:
        #000;

}

.process-section h2 span {

    -webkit-text-stroke:
        2px #000;

}

.process-grid {

    margin-top:
        70px;

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    border-top:
        1px solid rgba(0,0,0,.3);

}

.process-card {

    padding:
        35px;

    border-right:
        1px solid rgba(0,0,0,.25);

}

.step {

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        60px;

    font-weight:
        900;

}

.process-card h3 {

    margin:
        40px 0 15px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        32px;

}


/* =========================================
   FOOTER
========================================= */

footer {

    padding:
        50px 6%;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    border-top:
        1px solid var(--line);

    color:
        #666;

    font-size:
        11px;

}

.footer-logo {

    color:
        #fff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        30px;

    font-weight:
        900;

}


/* =========================================
   PAGE HERO
========================================= */

.page-hero {

    padding:
        100px 6% 70px;

}

.page-hero.compact {

    padding-bottom:
        40px;

}

.page-hero h1 {

    margin-top:
        20px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(
            80px,
            11vw,
            155px
        );

    font-weight:
        900;

    line-height:
        .75;

}


/* =========================================
   TICKET MATCHES
========================================= */

.ticket-match-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        15px;

}

.ticket-match {

    min-height:
        470px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border:
        1px solid var(--line);

    background:
        var(--dark);

}

.ticket-match h2 {

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        55px;

    font-weight:
        900;

    line-height:
        .85;

}

.ticket-match h2 span {

    color:
        var(--accent);

}

.ticket-match p {

    color:
        #777;

}

.select-match {

    padding:
        18px;

    border:
        none;

    background:
        #fff;

    color:
        #000;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight:
        900;

    cursor:
        pointer;

}


/* =========================================
   CATEGORY
========================================= */

.ticket-category-section {

    border-top:
        1px solid var(--line);

}

.category-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        15px;

}

.category-card {

    min-height:
        330px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    border:
        1px solid var(--line);

    background:
        var(--dark);

    color:
        white;

    text-align:
        left;

    cursor:
        pointer;

}

.category-card:hover,
.category-card.selected {

    border-color:
        var(--accent);

    background:
        var(--accent);

    color:
        #000;

}

.category-number {

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        80px;

    font-weight:
        900;

}

.category-card h3 {

    margin-top:
        auto;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        35px;

}

.category-card p {

    margin:
        8px 0 25px;

    color:
        #777;

}

.category-card.selected p,
.category-card:hover p {

    color:
        #333;

}

.category-card strong {

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        35px;

}

.ticket-bottom {

    margin-top:
        25px;

    padding:
        25px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr auto;

    gap:
        20px;

    align-items:
        end;

    border:
        1px solid var(--line);

}

.quantity-box label,
.total-box span {

    display:
        block;

    margin-bottom:
        10px;

    color:
        #777;

    font-family:
        "Barlow Condensed",
        sans-serif;

    letter-spacing:
        2px;

}

.quantity-box select {

    width:
        100%;

    padding:
        17px;

    border:
        1px solid #333;

    background:
        #111;

    color:
        white;

}

.total-box strong {

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        48px;

}


/* =========================================
   CHECKOUT
========================================= */

.checkout-layout {

    padding:
        30px 6% 100px;

    display:
        grid;

    grid-template-columns:
        1.3fr .7fr;

    gap:
        20px;

}

.checkout-form,
.checkout-summary {

    padding:
        35px;

    border:
        1px solid var(--line);

    background:
        var(--dark);

}

.form-title {

    margin:
        15px 0 30px;

    color:
        var(--accent);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight:
        800;

    letter-spacing:
        2px;

}

.form-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        15px;

    margin-bottom:
        50px;

}

.form-group.full {

    grid-column:
        1 / -1;

}

.form-group label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        #777;

    font-size:
        11px;

    letter-spacing:
        1px;

}

.form-group input {

    width:
        100%;

    padding:
        17px;

    border:
        1px solid #333;

    background:
        #090909;

    color:
        white;

    outline:
        none;

}

.form-group input:focus {

    border-color:
        var(--accent);

}

.payment-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        15px;

}

.payment-choice {

    padding:
        25px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    border:
        1px solid #333;

    cursor:
        pointer;

}

.payment-choice strong {

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        25px;

}

.payment-choice span {

    color:
        #777;

    font-size:
        12px;

}

.checkout-submit {

    width:
        100%;

    margin-top:
        30px;

}

.checkout-summary h2 {

    margin:
        20px 0 40px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        45px;

    line-height:
        .9;

}

.summary-line {

    padding:
        18px 0;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid var(--line);

}

.summary-line span,
.summary-total span {

    color:
        #777;

    font-size:
        11px;

}

.summary-total {

    margin-top:
        30px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

}

.summary-total strong {

    color:
        var(--accent);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        55px;

}


/* =========================================
   CONFIRMATION
========================================= */

.confirmation-page {

    min-height:
        100vh;

    padding:
        80px 6%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}

.confirmation-card {

    width:
        100%;

    max-width:
        900px;

    padding:
        55px;

    border:
        1px solid var(--line);

}

.confirm-check {

    width:
        70px;

    height:
        70px;

    margin:
        35px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--accent);

    color:
        #000;

    font-size:
        30px;

    font-weight:
        900;

}

.confirmation-card h1 {

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(
            75px,
            10vw,
            130px
        );

    font-weight:
        900;

    line-height:
        .75;

}

.confirmation-card h1 span {

    color:
        transparent;

    -webkit-text-stroke:
        2px white;

}

.confirmation-text {

    margin:
        30px 0;

    color:
        #888;

}

.confirmation-details {

    margin:
        40px 0;

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    border-top:
        1px solid var(--line);

}

.confirmation-details > div {

    padding:
        20px 0;

    border-bottom:
        1px solid var(--line);

}

.confirmation-details span {

    display:
        block;

    color:
        #777;

    font-size:
        10px;

    letter-spacing:
        2px;

}

.confirmation-details strong {

    display:
        block;

    margin-top:
        5px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        24px;

}

.confirmation-total strong {

    color:
        var(--accent);

    font-size:
        40px;

}


/* =========================================
   ADMIN
========================================= */

.admin-label {

    color:
        #777;

    font-family:
        "Barlow Condensed",
        sans-serif;

    letter-spacing:
        2px;

}

.admin-page {

    padding:
        80px 6%;

}

.admin-title {

    margin:
        20px 0 60px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        110px;

    line-height:
        .75;

}

.admin-stats {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        15px;

}

.admin-stat {

    padding:
        30px;

    border:
        1px solid var(--line);

}

.admin-stat span {

    color:
        #777;

    font-size:
        11px;

}

.admin-stat strong {

    display:
        block;

    margin-top:
        20px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        60px;

}

.admin-table-wrapper {

    margin-top:
        25px;

    overflow-x:
        auto;

    border:
        1px solid var(--line);

}

.admin-table {

    width:
        100%;

    border-collapse:
        collapse;

}

.admin-table th,
.admin-table td {

    padding:
        20px;

    border-bottom:
        1px solid var(--line);

    text-align:
        left;

}

.admin-table th {

    color:
        #777;

    font-size:
        10px;

    letter-spacing:
        1px;

}

.status {

    padding:
        7px 10px;

    font-size:
        10px;

    font-weight:
        700;

}

.status.confirmed {

    background:
        var(--accent);

    color:
        #000;

}


/* =========================================
   RESPONSIVE
========================================= */

@media (
    max-width: 900px
) {

    .navbar nav {

        display:
            none;

    }

    .hero {

        grid-template-columns:
            1fr;

    }

    .hero-side {

        display:
            none;

    }

    .match-grid,
    .ticket-match-grid,
    .category-grid,
    .process-grid,
    .admin-stats {

        grid-template-columns:
            1fr;

    }

    .checkout-layout {

        grid-template-columns:
            1fr;

    }

    .ticket-bottom {

        grid-template-columns:
            1fr;

    }

}


@media (
    max-width: 600px
) {

    .navbar {

        padding:
            0 5%;

    }

    .nav-button {

        padding:
            15px;

    }

    .hero,
    .section,
    .process-section,
    .admin-page {

        padding-left:
            5%;

        padding-right:
            5%;

    }

    .hero h1 {

        font-size:
            78px;

        letter-spacing:
            -3px;

    }

    .hero-actions {

        flex-direction:
            column;

    }

    .form-grid,
    .payment-grid,
    .confirmation-details {

        grid-template-columns:
            1fr;

    }

    .page-hero h1 {

        font-size:
            75px;

    }

}

/* =========================================
   MATCHTIX ANIMATIONS
========================================= */

/* Basic reveal */

.reveal-item {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}

.reveal-item.show {
    opacity: 1;
    transform: translateY(0);
}


/* Popup effect */

.popup-item {
    opacity: 0;
    transform: scale(0.88);
    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(.2,.8,.2,1);
}

.popup-item.show {
    opacity: 1;
    transform: scale(1);
}


/* Slide from left */

.slide-left {
    opacity: 0;
    transform: translateX(-60px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.slide-left.show {
    opacity: 1;
    transform: translateX(0);
}


/* Slide from right */

.slide-right {
    opacity: 0;
    transform: translateX(60px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.slide-right.show {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================
   HERO LOAD ANIMATION
========================================= */

.hero .eyebrow {
    animation:
        heroFadeUp 0.7s ease forwards;
}

.hero h1 {
    opacity: 0;

    animation:
        heroFadeUp 0.85s ease 0.15s forwards;
}

.hero-text {
    opacity: 0;

    animation:
        heroFadeUp 0.85s ease 0.3s forwards;
}

.hero-actions {
    opacity: 0;

    animation:
        heroFadeUp 0.85s ease 0.45s forwards;
}

.hero-side {
    opacity: 0;

    animation:
        heroSlideRight 0.9s ease 0.45s forwards;
}


@keyframes heroFadeUp {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes heroSlideRight {

    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================
   PAGE HERO
========================================= */

.page-hero .eyebrow {
    opacity: 0;

    animation:
        pageTitleIn 0.7s ease forwards;
}

.page-hero h1 {
    opacity: 0;

    animation:
        pageTitleIn 0.9s ease 0.15s forwards;
}


@keyframes pageTitleIn {

    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================
   BUTTON ANIMATION
========================================= */

.main-button,
.nav-button,
.card-button,
.select-match {

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}

.main-button:hover,
.nav-button:hover,
.card-button:hover,
.select-match:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 10px 30px rgba(199, 255, 0, 0.18);

}


/* =========================================
   CARD HOVER
========================================= */

.match-card,
.ticket-match,
.category-card,
.process-card,
.admin-stat {

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;

}

.match-card:hover,
.ticket-match:hover,
.admin-stat:hover {

    transform:
        translateY(-8px);

    border-color:
        var(--accent);

}


/* =========================================
   CONFIRMATION CHECK
========================================= */

.confirm-check {

    animation:
        confirmPop 0.7s
        cubic-bezier(.2,1.6,.4,1)
        both;

}


@keyframes confirmPop {

    0% {
        opacity: 0;
        transform:
            scale(0.3)
            rotate(-15deg);
    }

    70% {
        transform:
            scale(1.15)
            rotate(5deg);
    }

    100% {
        opacity: 1;
        transform:
            scale(1)
            rotate(0);
    }

}


/* =========================================
   CONFIRMATION TITLE
========================================= */

.confirmation-card h1 {

    animation:
        confirmationTitle 0.8s ease
        0.2s both;

}


@keyframes confirmationTitle {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================
   LOGO
========================================= */

.logo {

    transition:
        transform 0.25s ease;

}

.logo:hover {

    transform:
        skewX(-7deg)
        scale(1.05);

}


/* =========================================
   NAV LINKS
========================================= */

.navbar nav a {

    position: relative;

}

.navbar nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background:
        var(--accent);

    transition:
        width 0.3s ease;

}

.navbar nav a:hover::after,
.navbar nav a.active::after {

    width: 100%;

}


/* =========================================
   RESPECT REDUCED MOTION
========================================= */

@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}

/* HIDE CARD DETAILS */
.card-details[hidden] {
    display: none !important;
}

.card-details {
    margin-top: 30px;
    padding: 30px;
    border: 1px solid var(--line);
    background: #080808;
}

.card-details.card-open {
    display: block;
    animation: cardOpen 0.4s ease;
}

@keyframes cardOpen {

    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   MATCHTIX CARD PAYMENT
========================================= */

.card-details {

    display: none;

    margin-top: 30px;

    padding: 30px;

    border: 1px solid var(--line);

    background: #080808;

}


/* WHEN CARD IS SELECTED */

.card-details.active {

    display: block;

    animation:
        cardDetailsOpen
        0.4s ease;

}


@keyframes cardDetailsOpen {

    from {

        opacity: 0;

        transform:
            translateY(-20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.card-title {

    margin-top: 0;

}


.card-field {

    margin-top: 18px;

}


.card-small-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;

    margin-top: 18px;

}


.card-note {

    margin-top: 18px;

    color: #777;

    font-size: 11px;

    line-height: 1.6;

}


/* PAYMENT CARD HOVER */

.payment-choice {

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;

}


.payment-choice:hover {

    border-color:
        var(--accent);

    transform:
        translateY(-3px);

}


/* SELECTED PAYMENT */

.payment-choice:has(
    input:checked
) {

    border-color:
        var(--accent);

    background:
        #141414;

}


/* RADIO BUTTON */

.payment-choice input[type="radio"] {

    accent-color:
        var(--accent);

}


/* MOBILE */

@media (
    max-width: 600px
) {

    .card-small-grid {

        grid-template-columns:
            1fr;

    }

}

/* =========================================
   MATCHTIX ADMIN DATABASE DASHBOARD
========================================= */

.admin-header {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;

}


.admin-live {

    margin-top: 15px;

    display: flex;
    align-items: center;
    gap: 10px;

    color: #888;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight: 700;

    letter-spacing: 2px;

    font-size: 12px;

}


.admin-live span {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 15px
        rgba(199,255,0,.7);

}


.admin-stats {

    grid-template-columns:
        repeat(4, 1fr);

}


.admin-stat p {

    margin-top: 10px;

    color: #666;

    font-size: 11px;

}


.admin-orders {

    margin-top: 70px;

}


.admin-orders-heading {

    margin-bottom: 25px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

}


.admin-orders-heading h2 {

    margin-top: 10px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 55px;

    font-weight: 900;

}


.order-count {

    color: #777;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight: 700;

    letter-spacing: 2px;

}


.admin-table td {

    vertical-align: top;

    color: #d7d7d7;

    font-size: 12px;

}


.ticket-code {

    color: var(--accent);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 17px;

    letter-spacing: 1px;

}


.customer-info,
.admin-match-info {

    display: flex;
    flex-direction: column;
    gap: 5px;

}


.customer-info strong,
.admin-match-info strong {

    color: #fff;

}


.customer-info span,
.admin-match-info span {

    color: #777;

    font-size: 10px;

}


.admin-time {

    color: #666;

    font-size: 10px;

}


.empty-orders {

    padding: 80px 30px;

    border: 1px solid var(--line);

    text-align: center;

}


.empty-orders > span {

    color: var(--accent);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 90px;

    font-weight: 900;

}


.empty-orders h3 {

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 35px;

}


.empty-orders p {

    margin-top: 10px;

    color: #777;

}


@media (max-width: 1100px) {

    .admin-stats {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 600px) {

    .admin-header {

        flex-direction: column;

    }


    .admin-stats {

        grid-template-columns: 1fr;

    }

}

/* =========================================
   MATCHTIX ADMIN LOGIN
========================================= */

.matchtix-login-page {

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 30px;

    background: #050505;

}


.matchtix-login-card {

    width: 100%;
    max-width: 520px;

    padding: 50px;

    border: 1px solid var(--line);

    background: #0d0d0d;

}


.matchtix-login-card .logo {

    display: inline-block;

    margin-bottom: 50px;

}


.matchtix-login-card h1 {

    margin:
        15px 0 40px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 85px;

    font-weight: 900;

    line-height: .75;

}


.matchtix-login-card h1 span {

    color: transparent;

    -webkit-text-stroke:
        1.5px white;

}


.matchtix-login-card input {

    width: 100%;

    padding: 18px;

    border: 1px solid #333;

    background: #050505;

    color: white;

    outline: none;

}


.matchtix-login-card input:focus {

    border-color:
        var(--accent);

}


.login-button {

    width: 100%;

    margin-top: 30px;

}


.login-error {

    margin-bottom: 25px;

    padding: 15px;

    border: 1px solid #ff4545;

    color: #ff6464;

    font-size: 12px;

}


.back-site {

    display: inline-block;

    margin-top: 30px;

    color: #777;

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 1px;

}


.back-site:hover {

    color: var(--accent);

}

/* =========================================
   CLEAN ADMIN NAVBAR
========================================= */

.admin-navbar {

    min-height: 88px;

    padding: 0 6%;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 30px;

    border-bottom:
        1px solid var(--line);

    background: #050505;

}


.admin-nav-links {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 45px;

}


.admin-nav-links a {

    position: relative;

    color: #777;

    text-decoration: none;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 2px;

    transition:
        color 0.25s ease;

}


.admin-nav-links a:hover,
.admin-nav-links a.active {

    color: #fff;

}


.admin-nav-links a.active::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -31px;

    height: 2px;

    background:
        var(--accent);

}


.admin-nav-right {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 20px;

}


.admin-welcome {

    color: #777;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 14px;

    letter-spacing: 1px;

}


.admin-logout {

    padding:
        13px 20px;

    background:
        var(--accent);

    color: #000;

    text-decoration: none;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight: 900;

    letter-spacing: 1px;

    transition:
        transform 0.25s ease;

}


.admin-logout:hover {

    transform:
        translateY(-2px);

}


@media (max-width: 800px) {

    .admin-navbar {

        grid-template-columns:
            1fr auto;

    }


    .admin-nav-links {

        display: none;

    }


    .admin-welcome {

        display: none;

    }

}

/* =========================================
   UNAVAILABLE MATCH
========================================= */

.match-unavailable {

    background: #1a1a1a !important;

    color: #666 !important;

    cursor: not-allowed !important;

    border: 1px solid #333 !important;

}

.match-unavailable:hover {

    transform: none !important;

    box-shadow: none !important;

}

/* =========================================
   MATCHTIX - MATCH MANAGEMENT FIX
========================================= */

.match-manager-form {
    margin-top: 40px;
    padding: 40px;
    border: 1px solid #2a2a2a;
    background: #0b0b0b;
}

.match-manager-heading,
.match-list-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
}

.match-manager-heading h2,
.match-list-heading h2 {
    margin-top: 10px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 55px;
    font-weight: 900;
}


/* FORM */

.match-form-grid {
    margin-top: 35px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.match-form-grid .form-group label {
    display: block;
    margin-bottom: 10px;
    color: #777;
    font-size: 11px;
    letter-spacing: 2px;
}

.match-form-grid input,
.match-form-grid select {
    width: 100%;
    height: 58px;
    padding: 0 18px;
    border: 1px solid #333;
    background: #050505;
    color: #fff;
    outline: none;
    font-family: "Inter", sans-serif;
}

.match-form-grid input:focus,
.match-form-grid select:focus {
    border-color: #c7ff00;
}

.match-form-grid select {
    appearance: auto;
}

.match-full {
    grid-column: 1 / -1;
}

.match-save-button {
    margin-top: 30px;
    min-width: 210px;
}

.match-cancel-edit {
    color: #888;
    text-decoration: none;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    letter-spacing: 2px;
}

.match-cancel-edit:hover {
    color: #c7ff00;
}


/* SUCCESS / ERROR */

.match-admin-message {
    margin: 25px 0;
    padding: 16px 20px;
    border: 1px solid #c7ff00;
    background: rgba(199, 255, 0, 0.05);
    color: #c7ff00;
    font-size: 12px;
    letter-spacing: 1px;
}

.match-admin-error {
    margin: 25px 0;
    padding: 16px 20px;
    border: 1px solid #ff5151;
    color: #ff6969;
}


/* =========================================
   MATCH LIST
========================================= */

.match-admin-list {
    margin-top: 90px;
}

.match-list-heading {
    margin-bottom: 30px;
}

.match-list-heading > strong {
    color: #777;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 15px;
    letter-spacing: 2px;
}

.match-management-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}


/* MATCH CARD */

.admin-match-card {
    min-height: 430px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    border: 1px solid #2a2a2a;
    background: #0b0b0b;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.admin-match-card:hover {
    transform: translateY(-6px);
    border-color: #c7ff00;
}

.admin-match-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: #777;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.admin-match-card h3 {
    margin: 55px 0 35px;
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 44px;
    font-weight: 900;
    line-height: 0.95;
    text-transform: uppercase;
}

.admin-match-card h3 span {
    display: block;
    margin: 9px 0;
    color: #c7ff00;
    font-size: 17px;
}


/* DETAILS */

.admin-match-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.admin-match-details > div {
    padding-top: 15px;
    border-top: 1px solid #2a2a2a;
}

.admin-match-details span {
    display: block;
    margin-bottom: 7px;
    color: #666;
    font-size: 9px;
    letter-spacing: 2px;
}

.admin-match-details strong {
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
}

.match-detail-full {
    grid-column: 1 / -1;
}


/* ACTION BUTTONS */

.admin-match-actions {
    margin-top: auto;
    padding-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.admin-match-actions form {
    width: 100%;
    margin: 0;
}

.match-edit-button,
.match-delete-button {
    width: 100%;
    min-height: 48px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    text-decoration: none;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
}

.match-edit-button {
    background: #c7ff00;
    color: #000;
}

.match-delete-button {
    background: #1a1a1a;
    color: #ff5a5a;
}

.match-delete-button:hover {
    background: #ff5a5a;
    color: #000;
}


/* =========================================
   STATUS
========================================= */

.match-status {
    padding: 7px 10px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}

.match-status.available {
    background: #c7ff00;
    color: #000;
}

.match-status.sold-out {
    background: #ffb800;
    color: #000;
}

.match-status.closed {
    background: #ff4949;
    color: #000;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {
    .match-management-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .match-form-grid,
    .match-management-grid {
        grid-template-columns: 1fr;
    }

    .match-full,
    .match-detail-full {
        grid-column: auto;
    }

    .match-manager-form {
        padding: 25px;
    }

    .match-manager-heading,
    .match-list-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================
   TICKET STATUS
========================================= */

.ticket-status-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticket-status-select {
    min-width: 125px;

    padding: 10px 12px;

    border: 1px solid #333;

    background: #0b0b0b;

    color: #fff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight: 800;

    letter-spacing: 1px;

    outline: none;
}

.ticket-status-select:focus {
    border-color: var(--accent);
}

.ticket-status-save {
    padding: 10px 13px;

    border: none;

    background: var(--accent);

    color: #000;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-weight: 900;

    cursor: pointer;
}

.ticket-status-save:hover {
    transform: translateY(-2px);
}

@media (max-width: 700px) {

    .admin-status-summary {
        grid-template-columns:
            1fr !important;
    }

}

/* =========================================
   MATCHTIX STADIUM E-TICKET
========================================= */

.stadium-ticket-page {

    min-height: 100vh;

    padding:
        80px 6% 120px;

}


.ticket-success-header {

    max-width: 900px;

    margin-bottom: 60px;

}


.ticket-success-header h1 {

    margin:
        20px 0 25px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(
            85px,
            11vw,
            150px
        );

    font-weight: 900;

    line-height: .72;

    letter-spacing: -3px;

}


.ticket-success-header h1 span {

    color: transparent;

    -webkit-text-stroke:
        2px #fff;

}


.ticket-success-header > p:last-child {

    color: #777;

}



/* =========================================
   TICKET
========================================= */

.stadium-ticket {

    display: grid;

    grid-template-columns:
        1fr 330px;

    max-width: 1200px;

    margin: 0 auto;

    border:
        1px solid #2a2a2a;

    background:
        #0b0b0b;

}


.stadium-ticket-main {

    padding: 45px;

}


.ticket-brand-row {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    padding-bottom: 30px;

    border-bottom:
        1px solid #2a2a2a;

}


.ticket-status-label {

    padding: 8px 12px;

    background:
        var(--accent);

    color: #000;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

}



/* =========================================
   TICKET CODE
========================================= */

.ticket-code-area {

    margin-top: 40px;

}


.ticket-code-area span,
.stadium-ticket-match > span,
.stadium-ticket-details span,
.stadium-ticket-total span,
.gate-code span {

    display: block;

    margin-bottom: 8px;

    color: #666;

    font-size: 10px;

    letter-spacing: 2px;

}


.ticket-code-area strong {

    color: var(--accent);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(
            45px,
            6vw,
            75px
        );

    font-weight: 900;

    letter-spacing: 2px;

}



/* =========================================
   MATCH NAME
========================================= */

.stadium-ticket-match {

    margin-top: 50px;

}


.stadium-ticket-match h2 {

    max-width: 650px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(
            50px,
            6vw,
            80px
        );

    font-weight: 900;

    line-height: .88;

    text-transform: uppercase;

}



/* =========================================
   DETAILS
========================================= */

.stadium-ticket-details {

    margin-top: 50px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    border-top:
        1px solid #2a2a2a;

}


.stadium-ticket-details > div {

    min-height: 100px;

    padding:
        22px 20px 20px 0;

    border-bottom:
        1px solid #2a2a2a;

}


.stadium-ticket-details strong {

    color: #fff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 21px;

}



/* =========================================
   TOTAL
========================================= */

.stadium-ticket-total {

    margin-top: 40px;

    display: flex;

    align-items: flex-end;

    justify-content:
        space-between;

    gap: 20px;

}


.stadium-ticket-total strong {

    color:
        var(--accent);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 55px;

    font-weight: 900;

}



/* =========================================
   PASS SIDE
========================================= */

.stadium-ticket-pass {

    padding: 45px 35px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-left:
        1px dashed #444;

    background:
        var(--accent);

    color: #000;

}


.stadium-ticket-pass .eyebrow {

    color: #000;

}



/* =========================================
   FAKE QR
========================================= */

.fake-qr {

    width: 210px;
    height: 210px;

    margin: 35px 0;

    padding: 15px;

    background: #fff;

}


.qr-inner {

    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        repeat(8, 1fr);

    grid-template-rows:
        repeat(8, 1fr);

    gap: 2px;

}


.qr-inner span {

    background: #fff;

}


/* QR PATTERN */

.qr-inner span:nth-child(2n),
.qr-inner span:nth-child(3n),
.qr-inner span:nth-child(7n),
.qr-inner span:nth-child(11n),
.qr-inner span:nth-child(13n) {

    background: #000;

}


.qr-inner span:nth-child(1),
.qr-inner span:nth-child(8),
.qr-inner span:nth-child(9),
.qr-inner span:nth-child(15),
.qr-inner span:nth-child(17),
.qr-inner span:nth-child(22),
.qr-inner span:nth-child(25),
.qr-inner span:nth-child(31),
.qr-inner span:nth-child(34),
.qr-inner span:nth-child(40),
.qr-inner span:nth-child(45),
.qr-inner span:nth-child(48),
.qr-inner span:nth-child(56),
.qr-inner span:nth-child(57),
.qr-inner span:nth-child(64) {

    background: #000;

}



.scan-title {

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 30px;

    font-weight: 900;

}


.scan-text {

    max-width: 210px;

    margin-top: 8px;

    color:
        rgba(0,0,0,.65);

    text-align: center;

    font-size: 11px;

    line-height: 1.6;

}


.gate-code {

    width: 100%;

    margin-top: 35px;

    padding-top: 25px;

    border-top:
        1px solid rgba(0,0,0,.25);

    text-align: center;

}


.gate-code span {

    color:
        rgba(0,0,0,.55);

}


.gate-code strong {

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 50px;

    font-weight: 900;

}



/* =========================================
   BUTTONS
========================================= */

.ticket-confirm-actions {

    max-width: 1200px;

    margin:
        30px auto 0;

    display: flex;

    justify-content:
        flex-end;

    gap: 12px;

}



/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .stadium-ticket {

        grid-template-columns:
            1fr;

    }


    .stadium-ticket-pass {

        border-left: none;

        border-top:
            1px dashed #444;

    }

}


@media (max-width: 600px) {

    .stadium-ticket-page {

        padding:
            50px 5% 80px;

    }


    .stadium-ticket-main {

        padding: 25px;

    }


    .stadium-ticket-details {

        grid-template-columns:
            1fr;

    }


    .stadium-ticket-total {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .ticket-confirm-actions {

        flex-direction:
            column;

    }


    .ticket-confirm-actions a {

        width: 100%;

    }

}

.real-qr {
    width: 220px;
    height: 220px;

    margin: 35px 0;

    padding: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
}

.real-qr img,
.real-qr canvas {
    display: block;

    width: 190px !important;
    height: 190px !important;
}