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

.ticket-modal {
    position: fixed;
    inset: 0;

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

    background: rgba(0, 0, 0, 0.8);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

    z-index: 2000;
}

.ticket-modal.show {
    opacity: 1;
    visibility: visible;
}

.ticket-modal-content {
    position: relative;

    width: max-content;
    max-width: 90%;

    padding: 35px 25px;

    background: var(--bg-dark-red);
    border-radius: 20px;

    text-align: center;
}

.ticket-modal-content h2,
.ticket-modal-content p {
    width: 240px;
    max-width: 240px;

    margin-left: auto;
    margin-right: auto;

    color: var(--bright-red);

    font-family: var(--font-main);

    text-shadow:
        1px 1px 3px rgba(0, 0, 0, 0.8);
}

.ticket-modal-content h2 {
    font-size: clamp(14px, 5vw, 24px);
    white-space: nowrap;
}

.ticket-modal-content p {
    width: min(300px, 80vw);
    box-sizing: border-box;

    font-size: clamp(10px, 3vw, 16px);

    white-space: normal;
    overflow-wrap: break-word;
}

.ticket-close {
    position: absolute;

    top: 12px;
    right: 15px;

    border: none;
    background: none;

    color: var(--bright-red);

    font-size: 1em;
    cursor: pointer;
}

.paynow-qr {
    width: 240px;
    height: 240px;

    padding: 10px;

    border-radius: 10px;

    object-fit: contain;
}




/* ========================================
   LANDSCAPE BASE
======================================== */

@media (orientation: landscape) {

    .section-nav {
        gap: clamp(10px, 2vw, 20px);
    }

    .section-nav a {
        width: clamp(35px, 7vw, 48px);
        height: clamp(30px, 7vw, 35px);

        font-size: clamp(14px, 3vw, 19px);
    }
}



/* ========================================
   PHONE LANDSCAPE
======================================== */

@media (orientation: landscape) and (max-height: 500px) {

    .ticket-modal-content {
        max-width: 90%;
        max-height: 60svh;

        padding: 10px 20px;

        overflow: hidden;
    }

    .ticket-modal-content h2 {
        font-size: 16px;
    }

    .ticket-modal-content p {
        margin: 5px 0 10px;
        font-size: 11px;
    }

    .paynow-qr {
        width: min(240px, 30svh);
        height: min(240px, 30svh);
        padding: 0;
    }
}


/* ========================================
   TABLET PORTRAIT
======================================== */

@media (min-width: 768px) and (orientation: portrait) {

    .ticket-modal-content {
        width: 80vw;
        max-width: 380px;
        padding: 45px 30px;
    }

    .ticket-modal-content h2,
    .ticket-modal-content p {
        width: 100%;
        max-width: 320px;
    }

    .paynow-qr {
        width: 320px;
        height: 320px;
        max-width: 100%;
        max-height: 100%;
    }
}


/* ========================================
   TABLET LANDSCAPE
======================================== */

@media (min-width: 768px)
    and (orientation: landscape)
    and (min-height: 501px) {


    .ticket-modal-content {
        max-width: 80%;
    }

    .ticket-modal-content h2 {
        width: 100%;
        max-width: 300px;

        margin: 0 auto;

        font-size: 20px;
    }

    .ticket-modal-content p {
        width: 100%;
        max-width: 300px;

        margin: 15px auto;

        font-size: 14px;
        line-height: 1.4;
    }

    .paynow-qr {
        padding: 0;
    }
}