/* =====================================
EVENTS PAGE LAYOUT
===================================== */

.events-controls,
.events-calendar,
.calendar-subscribe{

max-width:1200px;
margin-left:auto;
margin-right:auto;

padding-left:20px;
padding-right:20px;

}


/* =====================================
EVENT CONTROLS
===================================== */

.events-controls{

display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;

gap:20px;

margin-top:80px;
margin-bottom:40px;

}


/* =====================================
SEARCH
===================================== */

.search-wrapper{
display:flex;
gap:10px;
}

.event-search{

padding:10px 14px;
border:1px solid #ccc;
border-radius:4px;

width:220px;
font-size:14px;

}

.btn-find-event{

background:#c1121f;
color:#fff;

border:none;
padding:10px 16px;

border-radius:4px;

font-weight:600;
cursor:pointer;

transition:0.25s;

}

.btn-find-event:hover{
background:#1a42f0;
}


/* =====================================
VIEW BUTTONS
===================================== */

.view-buttons{
display:flex;
gap:10px;
}

.btn-view{

background:#c1121f;
color:#fff;

padding:10px 16px;

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

border:none;
border-radius:4px;

cursor:pointer;

text-decoration:none;
display:inline-block;

transition:0.25s;

}

.btn-view:hover{
background:#1a42f0;
}

.btn-view.active{
background:#8b0e18;
}


/* =====================================
CALENDAR
===================================== */

.events-calendar{
margin-bottom:40px;
}

.calendar-header{

display:flex;
justify-content:center;
align-items:center;
gap:20px;

margin-bottom:20px;

}

.calendar-header h2{
font-size:24px;
font-weight:700;
}

.calendar-prev,
.calendar-next{

font-size:26px;
text-decoration:none;
color:#333;

padding:4px 10px;
border-radius:4px;

}

.calendar-prev:hover,
.calendar-next:hover{
background:#f2f2f2;
}


/* =====================================
CALENDAR GRID
===================================== */

.calendar-grid{

display:grid;
grid-template-columns:repeat(7,1fr);

}

.calendar-days div{

padding:10px;
text-align:center;

font-weight:600;

background:#f5f5f5;
border:1px solid #eee;

}


/* =====================================
CALENDAR DAYS
===================================== */

.calendar-dates .day{

border:1px solid #eee;

min-height:110px;
padding:8px;

position:relative;

}

.calendar-dates .date{

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

display:block;
margin-bottom:6px;

}

.day.empty{
background:#fafafa;
}


/* =====================================
EVENT ITEM
===================================== */

.event{

display:block;

background:#c1121f;
color:#fff;

padding:4px 6px;
margin-top:4px;

border-radius:3px;

font-size:12px;
text-decoration:none;

}

.event:hover{
background:#1a42f0;
}


/* =====================================
SUBSCRIBE SECTION
===================================== */

.calendar-subscribe{

margin-top:40px;
display:flex;
justify-content:flex-end;

}

.subscribe-wrapper{
position:relative;
}

.btn-subscribe{

background:#c1121f;
color:#fff;

border:none;
padding:10px 18px;

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

cursor:pointer;
border-radius:4px;

}

.btn-subscribe:hover{
background:#1a42f0;
}


/* =====================================
SUBSCRIBE DROPDOWN
===================================== */

.subscribe-dropdown{

position:absolute;
top:110%;
right:0;

background:#fff;

border:1px solid #ddd;
box-shadow:0 6px 18px rgba(0,0,0,0.08);

list-style:none;
padding:0;
margin:0;

display:none;

min-width:180px;
z-index:100;

}

.subscribe-dropdown li{
border-bottom:1px solid #eee;
}

.subscribe-dropdown li:last-child{
border-bottom:none;
}

.subscribe-dropdown a{

display:block;
padding:10px 14px;

text-decoration:none;
color:#333;
font-size:14px;

}

.subscribe-dropdown a:hover{
background:#f5f5f5;
}

.subscribe-dropdown.show{
display:block;
}