/* ================= BASE ================= */
body{
    margin:0;
    font-family:'Segoe UI', sans-serif;
    background:#f5f7fb;
    color:#1f2937;
}

/* ================= MAIN ================= */
.main{
    padding:25px;
    margin-top:40px;
}

h2{
    margin:0;
    font-size:24px;
    font-weight:600;
}

.sub{
    color:#6b7280;
    margin-bottom:20px;
}

/* ================= TABS ================= */
.tabs{
    display:flex;
    gap:6px;
    background:#e5e7eb;
    border-radius:30px;
    padding:6px;
    margin-bottom:25px;
}

.tab{
    flex:1;
    border:none;
    background:transparent;
    padding:10px;
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    color:#374151;
    transition:0.2s;
}

.tab.active{
    background:#ffffff;
    box-shadow:0 3px 8px rgba(0,0,0,0.08);
    font-weight:500;
    color:#151516;
}

/* ================= GRID ================= */
.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

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

@media(max-width:600px){
    .grid{
        grid-template-columns:1fr;
    }
}

/* ================= CARD ================= */
.ticketCard{
    background:#ffffff;
    border-radius:16px;
    padding:18px;
    border:1px solid #e5e7eb;
    transition:0.25s;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
}

.ticketCard:hover{
    box-shadow:0 8px 22px rgba(0,0,0,0.08);
    transform:translateY(-3px);
}

/* ================= CARD TOP ================= */
.cardTop{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:5px;
}

.cardTop h3{
    margin:0;
    font-size:16px;
    font-weight:600;
}

.club{
    font-size:13px;
    color:#6b7280;
}
/* ================= BADGE ================= */

.badgeWrap{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}

.badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:32px;
padding:0 14px;
font-size:11px;
font-weight:700;
letter-spacing:.4px;
text-transform:uppercase;
border-radius:999px;
border:1px solid transparent;
line-height:1;
white-space:nowrap;
box-shadow:0 2px 6px rgba(0,0,0,.05);
transition:.2s ease;
}

/* UPCOMING */
.badge.upcoming{
background:linear-gradient(135deg,#fff7ed,#ffedd5);
color:#ea580c;
border-color:#fdba74;
}

.badge.upcoming:hover{
transform:translateY(-1px);
box-shadow:0 6px 12px rgba(234,88,12,.12);
}

/* COMPLETED */
.badge.completed{
background:linear-gradient(135deg,#ecfdf5,#d1fae5);
color:#059669;
border-color:#86efac;
}

.badge.completed:hover{
transform:translateY(-1px);
box-shadow:0 6px 12px rgba(5,150,105,.12);
}

/* CANCELLED */
.badge.cancelled{
background:linear-gradient(135deg,#fef2f2,#fee2e2);
color:#dc2626;
border-color:#fca5a5;
}

.badge.cancelled:hover{
transform:translateY(-1px);
box-shadow:0 6px 12px rgba(220,38,38,.12);
}

/* OPTIONAL MESSAGE ICON BESIDE BADGE */
.msgIcon{
width:32px;
height:32px;
border:none;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#f8fafc;
color:#64748b;
cursor:pointer;
box-shadow:0 2px 6px rgba(0,0,0,.05);
transition:.2s ease;
}

.msgIcon:hover{
background:#ede9fe;
color:#7c3aed;
transform:translateY(-1px);
box-shadow:0 6px 12px rgba(124,58,237,.14);
}

.msgIcon i{
pointer-events:none;
font-size:13px;
}

/* ================= INFO ================= */
.cardInfo{
    margin-top:12px;
}

.cardInfo p{
    margin:8px 0;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:10px;
}

/* ================= MODERN ICON STYLE ================= */
.cardInfo i{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f3f4f6;
    border-radius:8px;
    font-size:13px;
    color:#090909;
}

/* ================= REGISTERED ================= */
.registered{
    font-size:12px;
    color:#2f3235;
}

/* ================= BUTTON ================= */
.btn{
    width:100%;
    margin-top:14px;
    padding:11px;
    border:none;
    border-radius:10px;
    background:linear-gradient(90deg,#4c1d95,#6d28d9);
    color:#fff;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:0.25s;
}

.btn:hover{
    opacity:0.9;
    transform:translateY(-1px);
}

/* ================= MODAL ================= */
.modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45);
    display:none;
   
    justify-content:center;
    align-items:center;
    z-index:999;
}

/* ================= MODAL BOX ================= */
.modalBox{
    background:#ffffff;
    width:360px;
    max-height:90vh;
    overflow-y:auto;
    border-radius:16px;
    padding:22px;
    box-shadow:0 15px 40px rgba(0,0,0,0.25);
    position:relative;
    text-align:center;
     margin-top:40px;
}

/* ================= CLOSE ================= */
.close{
    position:absolute;
    right:15px;
    top:12px;
    cursor:pointer;
    font-size:18px;
    color:#f70000;
}

/* ================= QR ================= */
.modalBox img{
    border:3px solid #4c1d95;
    border-radius:12px;
    padding:12px;
    margin:15px auto;
    display:block;
    background:#fff;
}

/* ================= TICKET ID ================= */
.ticketID{
    display:inline-block;
    background:#4c1d95;
    color:#fff;
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    margin-top:6px;
}

/* ================= SECTION ================= */
.section{
    margin-top:18px;
    font-size:13px;
    text-align:left;
}

.section b{
    display:block;
    color:#010101;
    margin-bottom:5px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* ================= PARTICIPANT BOX ================= */
.participantBox{
    background:#f9fafb;
    border:1px solid #eee;
    border-radius:10px;
    padding:12px;
    margin-top:10px;
}

/* row layout */
.row{
    display:flex;
    justify-content:space-between;
    margin:4px 0;
}

/* ================= DOWNLOAD BUTTON ================= */
.downloadBtn{
    width:100%;
    margin-top:18px;
    padding:11px;
    border:none;
    border-radius:10px;
    background:#4c1d95;
    color:#fff;
    font-weight:500;
    cursor:pointer;
}

/* ================= NOTE ================= */
.note{
    font-size:11px;
    color:#272729;
    text-align:center;
    margin-top:12px;
}

/* ================= LINK BOX (Online Ticket) ================= */
.linkBox{
    background:#f3f4f6;
    border-radius:8px;
    padding:10px;
    margin:12px 0;
    word-break:break-all;
}




/* =========================
   IMAGE MODAL
========================= */

.imgModal{
    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    display:none;

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

    z-index:99999;
}

.imgModal.show{
    display:flex;
}


/* =========================
   IMAGE CONTAINER
========================= */

.imgBox{
    position:relative;
    z-index:2;

    width:auto;

    max-width:68vw;
    max-height:78vh;

    background:#ffffff;

    border-radius:20px;

    padding:16px;

    border:1px solid #e5e7eb;

    box-shadow:
    0 20px 60px rgba(0,0,0,.12);

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

    animation:zoomIn .22s ease;
}

/* =========================
   IMAGE
========================= */

#imgPreview{
    max-width:100%;
    max-height:70vh;

    border-radius:14px;

    object-fit:contain;

    display:block;

    background:#fff;
}

/* =========================
   CLOSE BUTTON
========================= */

.imgClose{
    position:absolute;

    top:12px;
    right:12px;

    width:36px;
    height:36px;

    border:none;
    border-radius:50%;

    background:#f3f4f6;
    color:#374151;

    font-size:18px;
    cursor:pointer;

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

    box-shadow:
    0 4px 12px rgba(0,0,0,.08);

    transition:.2s ease;
}

.imgClose:hover{
    background:#ef4444;
    color:#ffffff;

    transform:scale(1.05);
}

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

@keyframes zoomIn{

    from{
        opacity:0;
        transform:scale(.94);
    }

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

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .imgBox{
        max-width:92vw;
        max-height:82vh;

        padding:12px;
    }

    #imgPreview{
        max-height:72vh;
    }

    .imgClose{
        width:34px;
        height:34px;

        font-size:16px;
    }
}