:root{
--bg:#0f1724;
--accent:#ffffff;
--muted:#9aa4b2;
--card-radius:12px;
--glass: rgba(255,255,255,0.04);
}

.card-date{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 25px;
}

.event-card{
width: 240px;
max-width:100%;
border-radius:var(--card-radius);
background: linear-gradient(180deg,var(--bg),#0b1220);
color: #fff;
padding:12px;
box-shadow: 0 4px 20px rgba(2,8,23,0.6);
display:flex;
gap:12px;
align-items:center;
box-sizing: border-box;
}


.date-box{
min-width:64px;
height:64px;
border-radius:10px;
background: var(--glass);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:6px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.03);
}


.date-day{
font-size:22px;
font-weight:700;
line-height:1;
letter-spacing:0.5px;
}


.date-month{
font-size:10px;
text-transform:uppercase;
color:var(--muted);
margin-top:2px;
font-weight:600;
}


.event-info{
flex:1;
display:flex;
flex-direction:column;
gap:4px;
}


.event-title{
font-size:14px;
font-weight:700;
margin:0;
}


.event-meta{
display:flex;
gap:6px;
align-items:center;
color:var(--muted);
font-size:14px;
}


.dot{width:4px;height:4px;border-radius:50%;background:var(--accent);display:inline-block}


.cta{
margin-top:6px;
}


.btn{
display:inline-block;
padding:6px 10px;
border-radius:8px;
background:transparent;
color:var(--accent);
border:1px solid rgba(255, 255, 255, 0.18);
font-weight:600;}

.btn:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(255,107,107,0.08)}