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

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

.content{
    margin-top:60px;
    padding:25px;
}

h2{
    margin-bottom:5px;
}

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

/* ======================
   SEARCH BAR
====================== */
.searchBox{
    margin-bottom:25px;
    position:relative;
}

.searchBox input{
    width:100%;
    padding:12px 16px;
    padding-left:40px;
    border-radius:12px;
    border:1px solid #e5e7eb;
    font-size:14px;
    background:#ffffff;
    transition:all 0.2s ease;
}

/* focus effect */
.searchBox input:focus{
    outline:none;
    border-color:#5b2d90;
    box-shadow:0 0 0 3px rgba(91,45,144,0.1);
}

/* icon inside input */
.searchBox::before{
    content:"🔍";
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    font-size:14px;
    opacity:0.6;
}

/* ======================
   GRID (TILES)
====================== */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
}

/* ======================
   CARD (EVENT TILE)
====================== */
.card{
    background:#ffffff;
    padding:18px;
    border-radius:16px;
    border:1px solid #eef0f4;
    box-shadow:0 8px 20px rgba(0,0,0,0.04);
    transition:all 0.25s ease;
    position:relative;
}

/* hover animation */
.card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(0,0,0,0.08);
}

/* title */
.card h3{
    margin:20px 0;
    font-size:16px;
}


/* event info */
.eventInfo p{
    margin:4px 0;
    font-size:13px;
    color:#6b7280;
}

/* price */
.eventPrice{
    margin-top:10px;
    font-weight:600;
    font-size:14px;
}

/* ======================
   TAG
====================== */
.tag{
    position:absolute;
    top:20px;
    right:10px;
    font-size:11px;
    padding:5px 10px;
    border-radius:999px;
    font-weight:600;
    z-index:5;
}


.tag.physical{ background:#d1fae5; color:#065f46; } 
.tag.online{ background:#dbeafe; color:#1e40af; }



/* ======================
   BUTTON
====================== */
.btn{
    background:#5b2d90;
    color:white;
    padding:10px;
    border:none;
    border-radius:10px;
    width:100%;
    margin-top:12px;
    font-size:14px;
    cursor:pointer;
    transition:all 0.2s ease;
}

.btn:hover{
    background:#4a2475;
}

.btn.disabled{
    background:#c4b5fd;
    cursor:not-allowed;
}

/* ======================
   EMPTY STATE
====================== */
.noResult{
    display:none;
    margin-top:25px;
    text-align:center;
    color:#9ca3af;
}

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

.modalBox{
    background:white;
    width:420px;
    border-radius:16px;
    padding:20px;
    max-height:90vh;
    overflow:auto;
    animation:fadeIn 0.2s ease;
}



/* ================= POSTER WRAPPER ================= */
.eventPosterWrap {
width: 100%;
height: 120px;          /* medium size */
overflow: hidden;
border-radius: 12px;
margin-bottom: 12px;
background: #f3f4f6;
position: relative;
margin-top:15px;
}

/* ================= POSTER IMAGE ================= */
.eventPosterImg {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease, filter 0.35s ease;
cursor: pointer;
}

/* ================= HOVER EFFECT (ZOOM + LIFT) ================= */
.eventPosterWrap:hover .eventPosterImg {
transform: scale(1.08);
filter: brightness(1.05);
}

/* optional soft shadow effect */
.eventPosterWrap:hover {
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
transition: 0.3s;
}


/* ================= THUMBNAIL ================= */
.eventThumbWrap {
    width: 100%;
    height: 140px;              /* fixed height = uniform cards */
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    cursor: pointer;
    background: #f3f4f6;
    position: relative;

}

/* image */
.eventThumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

/* hover zoom */
.eventThumbWrap:hover .eventThumb {
    transform: scale(1.08);
}

/* no image fallback */
.eventThumbWrap.noImage {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
}

/* ================= IMAGE MODAL BACKDROP ================= */
.imageModal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
z-index: 10000;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
}

.imageModal.show {
display: flex;
animation: fadeIn 0.2s ease;
}

/* ================= IMAGE BOX ================= */
.imageModalBox {
position: relative;
max-width: 90%;
max-height: 90%;
animation: zoomIn 0.2s ease;
}

/* ================= IMAGE ================= */
.imageModalBox img {
width: 100%;
max-height: 85vh;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
object-fit: contain;
}

/* ================= CLOSE BUTTON ================= */
.imageClose {
position: absolute;
top: -10px;
right: -10px;
background: #fff;
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
transition: 0.2s;
}

.imageClose:hover {
transform: scale(1.1);
background: #7c3aed;
color: #fff;
}


@keyframes fadeIn{
    from{opacity:0; transform:scale(0.95);}
    to{opacity:1; transform:scale(1);}
}

/* ======================
   INPUT
====================== */
.input{
    width:100%;
    padding:10px;
    border:none;
    border-radius:10px;
    background:#f1f3f7;
    margin:6px 0;
}

/* ======================
   LIGHT BUTTON
====================== */
.btn-light{
    background:#eee;
    color:#333;
}