.remuiupevents-shell{
box-sizing:border-box;
padding:0 40px
}

.event-header{text-align:center;margin-bottom:20px}
.event-header h2{margin-bottom:8px}
.event-header > div{max-width:620px;margin:0 auto;color:#5f6475}
.event-search-form{
display:flex;
gap:10px;
margin-bottom:20px;
flex-wrap:wrap
}

.event-search-form input[type="text"]{
flex:1 1 260px;
min-width:0
}

.reset-btn{
background:#777;
color:#fff;
padding:6px 10px;
border-radius:4px;
text-decoration:none
}
.event-container{display:flex;gap:30px}
.left-content-container{flex:1.2}
.right-content-container{flex:1}

.hero-img{width:100%;height:250px;object-fit:cover;border-radius:8px;margin-bottom:15px}

.events-empty-state{
display:grid;
grid-template-columns:minmax(220px,300px) 1fr;
gap:24px;
align-items:stretch;
padding:22px;
border-radius:18px;
background:linear-gradient(135deg,#f7f3ff 0%,#fff 55%,#eef6ff 100%);
border:1px solid rgba(124,77,255,.12);
box-shadow:0 10px 30px rgba(37,24,79,.08)
}

.empty-state-visual{
position:relative;
min-height:220px;
border-radius:14px;
overflow:hidden;
background:#efe8ff
}

.empty-state-visual .hero-img{
height:100%;
margin-bottom:0
}

.empty-state-visual::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(32,18,72,0) 0%,rgba(32,18,72,.35) 100%)
}

.empty-state-card{
display:flex;
flex-direction:column;
justify-content:center;
padding:10px 6px
}

.empty-state-pill{
display:inline-flex;
align-self:flex-start;
margin-bottom:14px;
padding:6px 10px;
border-radius:999px;
background:rgba(124,77,255,.1);
color:#5a34cf;
font-size:12px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase
}

.empty-state-card h3{
margin:0 0 10px;
font-size:28px;
line-height:1.15;
color:#24184a
}

.empty-state-card p{
margin:0;
max-width:48ch;
font-size:15px;
line-height:1.7;
color:#4a5063
}

.content-card{
display:flex;
gap:15px;
padding:14px;
background:#fff;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
margin-bottom:14px
}

.card-left{
width:65px;
text-align:center;
border:2px solid #7c4dff;
border-radius:8px;
display:flex;
flex-direction:column;
justify-content:center
}

.view-all-btn{
background:#7c4dff;
color:#fff;
padding:6px 12px;
border-radius:6px;
text-decoration:none
}

.event-card{
display:grid;
grid-template-columns:90px 1fr 1.2fr;
gap:20px;
padding:16px;
background:#fff;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
margin-bottom:16px;
align-items:center;
}

.event-date{
border:2px solid #7c4dff;
text-align:center;
padding:10px;
border-radius:8px;
}

.event-date .day{
display:block;
font-size:26px;
font-weight:700;
color:#7c4dff;
}

.event-date .month{font-size:14px}

.event-description{font-size:14px;color:#444}

@media(max-width:991px){
.remuiupevents-shell{padding:0 24px}
.event-container{flex-direction:column}
}

@media(max-width:768px){
.remuiupevents-shell{padding:0 16px}
.event-container{flex-direction:column}
.events-empty-state{grid-template-columns:1fr;padding:18px}
.empty-state-visual{min-height:180px}
.empty-state-card h3{font-size:24px}
.event-card{grid-template-columns:70px 1fr}
.event-description{grid-column:1 / span 2;margin-top:10px}
}

@media(max-width:576px){
.remuiupevents-shell{padding:0 12px}
.card-left{width:55px}
}