/* Country Filter Grid */

.country-filter {
    margin: 20px 0;
    padding: 10px;
    text-align: center;

}

.country-grid {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 38px;
}
#country-filter{
    max-width:1140px;
    margin:85px auto 40px;
    padding: 50px;
    background: linear-gradient(90deg, #F48723 0%, #f2295b 100%);
    border-radius: 20px;
}

/* Each country item */

#country-filter .country-item {
    border-radius: 6px;
    cursor: pointer;
    font-size: 21px;
    display: inline-block;
    color: #fff;
    /* text-transform: uppercase; */
    transition: all 0.3s ease;
    font-family: "Arial", sans-serif;
    font-weight: 500; 
}
#country-filter .country-item.active{
	color:#000;
}
#country-filter .country-item.special.active{
	color:#fff;
	background:#000;
}
#country-filter .country-item:hover{
    color:#000;
}
#country-filter .country-item.special {
    background: #fff;
    color: #000;
    font-size: 18px;
    line-height: 22px;
    padding: 10px 30px;
    border-radius: 50px;
    transition: all 300ms ease;
}
#country-filter .country-item.special:hover{
    background:#000;
    color:#fff;
}
#country-filter .country-grid.extra-row {
    gap: 18px;
    margin-top: 30px;
}
/** events list css **/ 
#events-container{
	scroll-margin-top:100px;
}
#events-container h2 {
    text-align: center;
    font-weight: 700;
    font-family: "Arial", sans-serif;
    text-transform: uppercase;
    margin-bottom: 55px;
    font-size: 40px;
}
#events-container #upcoming-events {
    border: 2px dashed #CC3366;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 55px;
    background: #fff;
}
#events-container #upcoming-events > p{
    text-align: center;
    font-weight: 600;
}
#upcoming-events .event-item {
    border: none;
    border-radius: 0;
    background: #fff;
    padding: 0;
   
}
#upcoming-events .event-main {
    align-items: center;
    margin-bottom: 0;
    border-bottom: 1px solid #000;
    padding-block: 15px 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
#upcoming-events .event-main :is(p, h4) {
    font-size: 20px;
    color: #333333;
    font-weight: 500;
    font-family: "Arial", sans-serif;
    margin: 0;
    line-height: 24px;
}
#upcoming-events .event-main p + p,
#upcoming-events .event-main h4{
    text-align: center;
}
#upcoming-events .find-ticket-btn {
    font-size: 18px;
    font-family: "Arial", sans-serif;
    font-weight: 500;
    line-height: 19px;
    padding: 12px 29px;
    text-transform: uppercase;
    background: #000;
    transition: all 500ms ease;
    max-width: 182px;
    margin-left: auto;
}
#upcoming-events .find-ticket-btn:hover{
    background: #ed1650;
}
#upcoming-events .events-message{
    color: #000;
    background: transparent;
}
#upcoming-events .event-details.open {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #EBF8FF;
    gap: 30px;
    padding-block: 24px;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid #000;
}
#upcoming-events .event-details > *{
    margin: 0;
    text-align: center;
}
#upcoming-events .event-details .buy-ticket-btn{
    background: #F48325;
    font-size: 19px;
    font-family: "Arial", sans-serif;
    text-transform: uppercase;
    flex-shrink: 0;
    border-radius: 50px;
    text-decoration: none;
    padding: 7px 38px;
    font-weight: 500;
    transition: all 500ms ease;
}
#upcoming-events p,
.events-message p {
    font-size: 20px;
    max-width: 515px;
    margin: 0 auto;
}
#upcoming-events .event-details .buy-ticket-btn:hover{
    background: #ed1650;
    color:#fff;
}
#upcoming-events p strong{
    color:#000;
}
.subscribe-form{
    margin-bottom: 60px;
}
#custom-subscribe-form {
    display: flex;
    max-width: 560px;
    margin: 28px auto 0;
    gap: 16px;
}
.subscribe-form h4{
    font-size: 33px;
    font-weight: 700;
    margin-block: 32px;
    text-align: center;
}
.subscribe-form h4 span + span{
    color:#f3004c;
}
#custom-subscribe-form input[type="email"]{
    border: none;
    border-radius: 10px;
    background: #F8E4EA;
}
#custom-subscribe-form button{
    border-radius: 10px;
    font-weight: 500; 
    box-shadow: 0px 10px 10px 0px rgba(85.00000000000003, 77.42391304347828, 77.42391304347828, 0.2);
}
.event-date {
    font-weight: 700;
    color: #0073e6;
}

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

.event-title {
    margin: 4px 0;
    font-size: 16px;
}

.find-ticket-btn {
    background: #0073e6;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    align-self: flex-start;
}

.find-ticket-btn:hover {
    background: #005bb5;
}


.event-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.25s ease;
    padding: 0 10px;
    border-radius: 6px;
    border-top: 0;
    margin-top: 8px;
    background: #f9f9f9;
}

.event-details.open {
    padding: 10px;
    max-height: 420px;
}


.buy-ticket-btn {
    display: inline-block;
    margin-top: 8px;
    background: #28a745;
    color: #fff;
    padding: 6px 12px;
    border-radius: 5px;
    text-decoration: none;
}


#missed-events {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.missed-event-item {
    background: #fafafa;
    border: 1px solid #e2e2e2;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

/* Missed events grid layout */

#missed-events {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 15px;
    border:2px dashed #CC3366;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 50px;
}

#missed-events .missed-event-item {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 3px;
    text-align: center;
    font-size: 14px;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    gap: 7px;
}
#missed-events .missed-event-item p {
    color: #333;
    font-size: 16px;
    font-weight: bolder;
    margin: 0;
}
#missed-events .missed-event-item p strong{
    font-weight: unset;
}

 .events-message {
    margin: 20px 0;
    padding: 15px;
    text-align: center;
    background: transparent;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.5;

}

.events-message strong {
    color: #c00;
}
@media(max-width:991.98px){
    main:has(#country-filter){
        max-width: calc(100% - 40px);
    }
    #missed-events .missed-event-item p{
        font-size: 12px;
    }
}
@media(max-width:767.98px){
    #upcoming-events .event-main{
        grid-template-columns:1fr;
        gap:13px;
    }
    #upcoming-events .event-main p + p, #upcoming-events .event-main h4{
        text-align: left;
    }
    #upcoming-events .find-ticket-btn{
        margin-right: auto;
        margin-left: 0;
    }
    #missed-events{
        grid-template-columns: 1fr;
    }
    #country-filter{
        padding: 15px;
        gap:30px;
    }
    #upcoming-events .event-details.open{
        align-items: flex-start;
        flex-direction: column;
        gap:16px;
    }
    #upcoming-events .event-details > *{
        text-align: left;
    }
    #upcoming-events p{
        font-size: 17px;
    }
    #missed-events .missed-event-item p{
        font-size: 13px;
    }
    #events-container #upcoming-events{
        padding: 15px;
    }
 #custom-subscribe-form{
        flex-direction: column;
    }
   #custom-subscribe-form input[type="email"]{
            padding-inline: 16px;
    }
    #upcoming-events .event-details .buy-ticket-btn{
        padding: 7px 38px;
        font-size:17px;
    }
}