/* =========================================================
   DRENA EVENTS
   DISCOVER EVENTS REDESIGN
========================================================= */


/* =========================================================
   1. MAIN PANEL
========================================================= */

#mec_skin_mec1 {
    max-width: 1280px !important;

    margin: 36px auto !important;
    padding: 26px !important;

    background: rgba(11,11,11,.94) !important;

    border: 1px solid rgba(255,255,255,.08) !important;

    border-radius: 16px !important;

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.28) !important;

    overflow: hidden;
}


/* =========================================================
   2. SEARCH AREA
========================================================= */

#mec_skin_mec1 .mec-search-form {
    padding: 0 !important;

    margin-bottom: 34px !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* Inputs */

#mec_skin_mec1 input,
#mec_skin_mec1 select {
    min-height: 48px !important;

    background: #111111 !important;

    border: 1px solid rgba(255,255,255,.18) !important;

    border-radius: 8px !important;

    color: #eeeeee !important;

    font-size: 14px !important;

    transition:
        border-color var(--drena-transition),
        background var(--drena-transition),
        box-shadow var(--drena-transition);
}


#mec_skin_mec1 input::placeholder {
    color: #8f959a !important;
}


/* Focus */

#mec_skin_mec1 input:focus,
#mec_skin_mec1 select:focus {
    background: #151515 !important;

    border-color: var(--drena-orange) !important;

    box-shadow:
        0 0 0 2px
        rgba(255,83,21,.12) !important;

    outline: none !important;
}


/* =========================================================
   3. SEARCH ICONS
========================================================= */

#mec_skin_mec1 .mec-dropdown-search,
#mec_skin_mec1 .mec-text-input-search {
    display: flex !important;

    align-items: center !important;
}


#mec_skin_mec1 .mec-dropdown-search i,
#mec_skin_mec1 .mec-text-input-search i {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    height: 48px !important;

    margin: 0 !important;

    background: #111111 !important;

    border-right:
        1px solid
        rgba(255,255,255,.12) !important;

    color: var(--drena-orange) !important;
}


/* =========================================================
   4. RESET BUTTON
========================================================= */

#mec_skin_mec1 .mec-search-reset-button {
    min-height: 46px !important;

    padding: 0 18px !important;

    background: transparent !important;

    border: 1px solid rgba(255,255,255,.18) !important;

    border-radius: 8px !important;

    color: #b8bdc2 !important;

    transition:
        border-color var(--drena-transition),
        color var(--drena-transition);
}


#mec_skin_mec1 .mec-search-reset-button:hover {
    border-color: var(--drena-orange) !important;

    color: var(--drena-orange) !important;
}


/* =========================================================
   5. MONTH DIVIDER
========================================================= */

#mec_skin_mec1 .mec-month-divider {
    display: flex !important;

    align-items: center !important;

    gap: 18px !important;

    margin: 36px 0 28px !important;

    text-align: center !important;
}


#mec_skin_mec1 .mec-month-divider::before,
#mec_skin_mec1 .mec-month-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background:
        rgba(255,255,255,.10);
}


#mec_skin_mec1 .mec-month-divider span {
    padding: 0 !important;

    background: transparent !important;

    color: #ffffff !important;

    font-size: 18px !important;

    font-weight: 700 !important;

    line-height: 1.2;

    letter-spacing: .08em !important;

    text-transform: uppercase;
}


/* =========================================================
   6. EVENT CARD
========================================================= */

#mec_skin_mec1 article.mec-event-article {
    overflow: hidden !important;

    min-height: auto !important;

    background: #ffffff !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    border-radius: 14px !important;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.18) !important;

    transition:
        transform var(--drena-transition),
        box-shadow var(--drena-transition),
        border-color var(--drena-transition) !important;
}


#mec_skin_mec1 article.mec-event-article:hover {
    transform: translateY(-4px) !important;

    border-color:
        rgba(255,255,255,.20) !important;

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.26) !important;
}


/* =========================================================
   7. EVENT IMAGE
========================================================= */

#mec_skin_mec1 .mec-event-image {
    overflow: hidden;
}


#mec_skin_mec1 .mec-event-image img {
    display: block;

    width: 100% !important;
    height: auto !important;

    transform: scale(1);

    transition:
        transform
        380ms
        cubic-bezier(.2,.65,.25,1);
}


#mec_skin_mec1
article.mec-event-article:hover
.mec-event-image img {
    transform: scale(1.025);
}


/* =========================================================
   8. TITLE + DESCRIPTION
========================================================= */

#mec_skin_mec1 .mec-event-title,
#mec_skin_mec1 .mec-event-title a {
    color: #171717 !important;

    font-size: 22px !important;

    font-weight: 800 !important;

    line-height: 1.25 !important;
}


#mec_skin_mec1 .mec-event-content p {
    color: #5e6368 !important;

    line-height: 1.65 !important;
}


/* =========================================================
   9. EVENT DETAILS
========================================================= */

#mec_skin_mec1 .mec-date-detail,
#mec_skin_mec1 .mec-date-detail * {
    color: #4e5459 !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    line-height: 1.65 !important;
}


#mec_skin_mec1 .mec-date-detail i {
    color: var(--drena-orange) !important;

    font-size: 17px !important;
}


#mec_skin_mec1 .mec-start-date-label {
    color: var(--drena-orange) !important;

    font-size: 16px !important;

    font-weight: 800 !important;
}


/* =========================================================
   10. BUTTONS
========================================================= */

#mec_skin_mec1 a.mec-booking-button,
#mec_skin_mec1 a.mec-modal-booking-button {
    padding: 10px 18px !important;

    background: var(--drena-orange) !important;

    border: 1px solid var(--drena-orange) !important;

    border-radius: 8px !important;

    color: #ffffff !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    letter-spacing: .04em !important;

    transition:
        background var(--drena-transition),
        border-color var(--drena-transition),
        transform var(--drena-transition);
}


#mec_skin_mec1 a.mec-booking-button:hover,
#mec_skin_mec1 a.mec-modal-booking-button:hover {
    background: var(--drena-orange-hover) !important;

    border-color: var(--drena-orange-hover) !important;

    transform: translateY(-1px);
}


/* Secondary detail button */

#mec_skin_mec1 .mec-booking-button + a {
    background: #ffffff !important;

    border:
        1px solid #dddddd !important;

    color: #333333 !important;
}


/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 768px) {

    #mec_skin_mec1 {
        margin: 16px auto !important;

        padding: 16px !important;

        border-radius: 14px !important;
    }


    #mec_skin_mec1 .mec-month-divider {
        margin: 28px 0 22px !important;
    }


    #mec_skin_mec1 .mec-month-divider span {
        font-size: 16px !important;
    }


    #mec_skin_mec1 .mec-event-title,
    #mec_skin_mec1 .mec-event-title a {
        font-size: 19px !important;
    }

}