/* =========================================
   DISPLAY TICKET CSS
========================================= */

/* ================= TICKET WRAP ================= */
.ticketBox{
    position:relative;
    margin-top:30px;

    background:#ffffff;

    border:1px solid #ede9fe;
    border-radius:24px;

    padding:28px 24px;

    text-align:center;

    box-shadow:
        0 18px 40px rgba(15,23,42,.08),
        0 4px 14px rgba(15,23,42,.04);

    animation:ticketIn .3s ease;

    z-index:1;

    /* IMPORTANT */
    overflow:visible;
}

/* ================= TITLE ================= */
.ticketTitle{
    font-size:26px;
    font-weight:900;
    color:#111827;

    margin-bottom:18px;
    padding-top:6px;

    line-height:1.2;
}

/* ================= QR ================= */
.ticketQR{
    width:220px;
    height:220px;

    display:block;
    margin:0 auto 18px;

    padding:10px;

    background:#fff;

    border:1px solid #e5e7eb;
    border-radius:18px;

    box-shadow:
        0 10px 24px rgba(0,0,0,.05);

    transition:.2s ease;
}

.ticketQR:hover{
    transform:scale(1.03);
}

/* ================= META ================= */
.ticketMeta{
    font-size:14px;
    font-weight:700;

    color:#475569;

    line-height:1.7;
    margin:2px 0;

    text-align:center;
}

.ticketMeta b{
    display:block;

    font-size:18px;
    font-weight:900;

    color:#111827;

    margin-bottom:4px;
}

/* ================= DIVIDER ================= */
.ticketLine{
    width:88%;

    margin:18px auto;

    border:none;
    border-top:1px dashed #cbd5e1;
}

/* ================= SUCCESS NOTICE ================= */
.ticketNotice{
    margin-top:18px;

    padding:14px;

    border-radius:16px;

    background:#dcfce7;
    color:#166534;

    font-size:14px;
    font-weight:900;

    animation:pulseSoft 1.8s infinite;
}

/* ================= ACTION BUTTON ================= */
.ticketBox .regBtn{
    margin-top:18px;
    min-width:220px;
}

/* ================= ONLINE EVENT ================= */
.ticketIcon{
    width:84px;
    height:84px;

    margin:0 auto 18px;

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

    border-radius:50%;

    font-size:34px;

    background:#f5f3ff;
    color:#6d28d9;

    border:1px solid #ddd6fe;
}

/* ================= ANIMATION ================= */
@keyframes ticketIn{

    from{
        opacity:0;
        transform:translateY(16px) scale(.97);
    }

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

@keyframes pulseSoft{

    0%,100%{
        box-shadow:0 0 0 rgba(34,197,94,0);
    }

    50%{
        box-shadow:0 0 0 6px rgba(34,197,94,.08);
    }
}

/* ================= TABLET ================= */
@media(max-width:768px){

    .ticketBox{
        padding:22px 18px;
        border-radius:20px;
    }

    .ticketTitle{
        font-size:22px;
    }

    .ticketQR{
        width:180px;
        height:180px;
    }

    .ticketMeta{
        font-size:13px;
    }

    .ticketMeta b{
        font-size:16px;
    }
}

/* ================= MOBILE ================= */
@media(max-width:480px){

    .ticketBox{
        padding:18px 14px;
    }

    .ticketTitle{
        font-size:20px;
    }

    .ticketQR{
        width:150px;
        height:150px;
    }

    .ticketBox .regBtn{
        width:100%;
        min-width:unset;
    }
}