/* =======================================
   FONTS
======================================= */
@font-face {
    font-family  : 'Neulis Sans';
    src          : url('../fonts/Neulis_Sans_Regular.otf') format('opentype');
    font-weight  : normal;
    font-style   : normal;
    font-display : swap;
}

@font-face {
    font-family  : 'Neulis Sans';
    src          : url('../fonts/Neulis_Sans_Medium.otf') format('opentype');
    font-weight  : 500;
    font-style   : normal;
    font-display : swap;
}

@font-face {
    font-family  : 'Neulis Cursive';
    src          : url('../fonts/Neulis_Cursive_Medium.otf') format('opentype');
    font-weight  : 500;
    font-style   : normal;
    font-display : swap;
}

/* =======================================
   VARIABLES GLOBALES
======================================= */
:root {
    --color-main       : #1922BF;
    --color-hover      : #C80082;
    --color-white      : #FFFFFF;
    --color-background : #D4DADC;
    --font-title       : 'Neulis Sans', Arial, sans-serif;
    --font-cursive     : 'Neulis Cursive', Arial, sans-serif;
}


.event-header {
    display        : flex;
    flex-direction : column;
    background     : var(--color-main);
}

.event-header .image-container {
    width  : 100%;
    height : 380px;
    
    @media (min-width : 992px) {
        height : 550px;
    }
}

.event-header .image-container img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}

.event-header .info-container {
    display        : flex;
    flex-direction : column;
    padding        : 3rem 1rem;
    
    @media (min-width : 992px) {
        width     : 100%;
        max-width : 1290px;
        margin    : 0 auto;
        padding   : 2rem 0;
    }
}

.event-header .header-info {
    display         : flex;
    flex-direction  : column;
    justify-content : space-between;
    margin-bottom   : 2rem;
    padding-bottom  : 2rem;
    border-bottom   : 1px solid #FFFFFF;
    gap             : 2rem;
    
    @media (min-width : 992px) {
        flex-direction : row;
    }
}

.event-header .header-info .left {
    display         : flex;
    flex-direction  : column-reverse;
    justify-content : space-between;
    gap             : 2rem;
    
    @media (min-width : 992px) {
        flex-direction : column;
    }
}

.event-header .header-info .left .categories-list {
    display     : flex;
    align-items : center;
    flex-wrap   : wrap;
    gap         : 1rem;
    
    @media (min-width : 992px) {
        gap : 2rem;
    }
}

.event-header .header-info .left .categories-list .icon-container {
    position    : relative;
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
}

.event-header .header-info .left .categories-list .icon-container:not(:last-child):after {
    content    : '';
    position   : absolute;
    right      : -0.5rem;
    width      : 1px;
    height     : 12px;
    background : #FFFFFF;
    
    @media (min-width : 992px) {
        right : -1rem;
    }
}

.event-header .header-info .left .categories-list .icon-container svg {
    display : flex;
    height  : 24px;
}

.event-header .header-info .left .categories-list .icon-container svg path, .event-header .header-info .left .categories-list .icon-container svg rect {
    filter : grayscale(100%) brightness(0) invert(100%);
}

.event-header .header-info .left .categories-list .icon-container span {
    display     : flex;
    align-items : center;
    color       : #FFFFFF;
    font-family : var(--font-title);
    font-size   : 16px;
    font-weight : 500;
    line-height : 1;
    gap         : 0.5rem;
}

.event-header .header-info .left .title h1 {
    color       : #FFFFFF;
    font-family : var(--font-cursive);
    font-size   : 32px;
    font-weight : 500;
    line-height : 1;
    
    @media (min-width : 992px) {
        font-size : 54px;
    }
}

.event-header .header-info .right {
    display        : flex;
    flex-direction : column;
    gap            : 2rem;
    
    @media (min-width : 992px) {
        width        : 100%;
        max-width    : 350px;
        margin-right : 8rem;
    }
}

.event-header .header-info .right > div {
    display        : flex;
    flex-direction : column;
    gap            : 0.5rem;
}

.event-header .header-info .right > div > * {
    color       : #FFFFFF;
    font-family : var(--font-title);
    font-size   : 18px;
    font-weight : 500;
    line-height : 1;
}

.event-header .header-info .right > div .label {
    display     : flex;
    align-items : center;
    font-size   : 16px;
    font-weight : 400;
    gap         : 0.5rem;
}

.event-header .header-footer {
    display         : flex;
    flex-direction  : column-reverse;
    justify-content : space-between;
    gap             : 2rem;
    
    @media (min-width : 992px) {
        flex-direction : row;
        font-size      : 54px;
    }
}

.event-header .header-footer .sharing-links {
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
}

.event-header .header-footer .sharing-links .label {
    color       : #FFFFFF;
    font-family : var(--font-title);
    font-size   : 18px;
    font-weight : 500;
    line-height : 1;
}

.event-header .header-footer .sharing-links .actions {
    display : flex;
    gap     : 1rem;
}

.event-header .header-footer .sharing-links .actions a, .event-header .header-footer .sharing-links .actions button {
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 7px;
    border          : 1px solid #FFFFFF;
    border-radius   : 8px;
    background      : transparent;
    transition      : 0.3s;
    aspect-ratio    : 1/1;
}

.event-header .header-footer .sharing-links .actions a:hover, .event-header .header-footer .sharing-links .actions button:hover {
    background : var(--color-hover);
    cursor     : pointer;
}

.event-header .header-footer .sharing-links .actions a svg, .event-header .header-footer .sharing-links .actions button svg {
    display    : flex;
    width      : 100%;
    max-width  : 20px;
    max-height : 20px;
}

.event-header .header-footer .buttons-link {
    display     : flex;
    align-items : flex-end;
    flex-wrap   : wrap;
    gap         : 1rem;
    
    @media (min-width : 992px) {
        gap : 2rem;
    }
}

.event-content {
    padding    : 4rem 1rem;
    background : #FFFCF9;
    
    @media (min-width : 992px) {
        max-width : 1290px;
        margin    : 0 auto;
        padding   : 8rem 4rem;
    }
}

.event-content .description-longue {
    color       : #131415;
    font-family : var(--font-title);
    font-size   : 18px;
}

/* =======================================
   Archive Page Styles
======================================= */
.event-container {
    display           : flex;
    align-items       : flex-start;
    margin            : 4rem auto;
    scroll-margin-top : 100px !important;
}

.event-container .sidebar {
    position       : fixed;
    top            : 0;
    left           : -100%;
    z-index        : 99999;
    display        : flex;
    flex-direction : column;
    width          : 100%;
    max-width      : 350px;
    height         : 100vh;
    padding        : 1rem;
    overflow-y     : scroll;
    background     : #FFFCF9;
    transition     : 0.5s;
    gap            : 3rem;
    
    @media (min-width : 400px) {
        max-width : 400px;
        padding   : 2rem;
    }
    
    @media (min-width : 992px) {
        position     : relative;
        left         : 0;
        z-index      : 9;
        max-width    : 350px;
        height       : auto;
        margin-right : 8rem;
        padding      : 0;
        overflow     : initial;
        background   : transparent;
        gap          : 4rem;
    }
}

.event-container .sidebar.show {
    left : 0;
}

.event-container .overlay {
    opacity    : 0;
    transition : 0.3s;
}

.event-container .overlay.show {
    position   : fixed;
    top        : 0;
    left       : 0;
    z-index    : 99998;
    width      : 100vw;
    height     : 100vh;
    opacity    : 0.5;
    background : #000000;
}

.event-container .sidebar .sidebar-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 2rem;
}

.event-container .sidebar .sidebar-header .btn-close-sidebar {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 40px;
    height          : 40px;
    border-radius   : 50%;
    background      : var(--color-main);
    transition      : 0.3s;
    
    @media (min-width : 992px) {
        display : none;
    }
}

.event-container .sidebar .sidebar-header .btn-close-sidebar:hover {
    background : var(--color-hover);
    cursor     : pointer;
}

.event-container .sidebar .btn {
    display     : flex;
    padding     : 10px 15px;
    box-shadow  : 0px 6px 16px 0px #1A1A2014;
    font-family : var(--font-title);
    font-size   : 16px;
    font-weight : 500;
    line-height : 1;
    gap         : 1rem;
}

.event-container .sidebar .btn svg path {
    transition : 0.3s;
}

.event-container .sidebar .btn:hover svg path {
    stroke : #FFFFFF;
}

.event-container .sidebar .calendar-container {
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
    
    @media (min-width : 992px) {
        gap : 2rem;
    }
}

.event-container .sidebar .title {
    color       : #000000;
    font-family : var(--font-cursive);
    font-size   : 28px;
    font-weight : 500;
    line-height : 1;
}

.event-container .sidebar .calendar-container .calendar-widget #calendar {
    border-radius : 16px;
    box-shadow    : 0px 6px 16px 0px #1A1A2014;
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-header {
    margin-bottom : 2rem;
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-header .vc-arrow::before {
    content    : url("data:image/svg+xml,%3Csvg width='10' height='16' viewBox='0 0 10 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2L2 8L8 14' stroke='%23707070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background : transparent;
    transform  : rotate(0deg);
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-header .vc-arrow.vc-arrow_next::before {
    transform : rotate(180deg);
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-header .vc-header__content button {
    font-family : var(--font-title);
    font-size   : 14px;
    font-weight : 400;
    line-height : 1;
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-wrapper .vc-content .vc-week {
    margin-bottom : 1rem;
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-wrapper .vc-content .vc-week .vc-week__day {
    color          : #A8ACAF;
    font-family    : var(--font-title);
    font-size      : 10px;
    font-weight    : 400;
    line-height    : 1;
    text-transform : uppercase;
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-wrapper .vc-content .vc-dates .vc-date {
    aspect-ratio : 1/1;
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-wrapper .vc-content .vc-dates .vc-date .vc-date__btn {
    border-radius  : 50%;
    font-family    : var(--font-title);
    font-size      : 16px;
    font-weight    : 400;
    line-height    : 1;
    text-transform : uppercase;
    aspect-ratio   : 1/1;
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-wrapper .vc-content .vc-dates .vc-date[data-vc-date-month="prev"] .vc-date__btn, .event-container .sidebar .calendar-container .calendar-widget #calendar .vc-wrapper .vc-content .vc-dates .vc-date[data-vc-date-month="next"] .vc-date__btn {
    color : rgba(112, 112, 112, 0.3);
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-wrapper .vc-content .vc-dates .vc-date[data-vc-date-month="current"] .vc-date__btn {
    color : #707070;
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-wrapper .vc-content .vc-dates .vc-date[data-vc-date-weekend] .vc-date__btn:hover {
    background : rgb(241 245 249/var(--tw-bg-opacity));
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-wrapper .vc-content .vc-dates .vc-date[data-vc-date-selected] .vc-date__btn, .event-container .sidebar .calendar-container .calendar-widget #calendar .vc-wrapper .vc-content .vc-dates .vc-date[data-vc-date-selected] .vc-date__btn:hover {
    color      : var(--color-white);
    background : var(--color-main);
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-wrapper .vc-content .vc-dates .vc-date .vc-date__btn.active {
    color      : var(--color-white) !important;
    background : var(--color-main) !important;
}

.event-container .sidebar .calendar-container .calendar-widget #calendar .vc-wrapper .vc-content .vc-dates .vc-date .vc-date__btn .event-categories {
    position        : absolute;
    bottom          : 8px;
    display         : flex;
    justify-content : center;
    gap             : 2px;
}

.event-container .sidebar .categories-container {
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
    
    @media (min-width : 992px) {
        gap : 2rem;
    }
}

.event-container .sidebar .categories-container .categories-list {
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
}

.event-container .sidebar .categories-container .categories-list .btn {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    width           : 100%;
}

.event-container .sidebar .categories-container .categories-list .btn.active {
    color        : #FFFFFF;
    border-color : var(--color-main);
    background   : var(--color-main);
}

.event-container .sidebar .categories-container .categories-list .btn.active:hover {
    border-color : var(--color-hover);
    background   : var(--color-hover);
    cursor       : pointer;
}

.event-container .sidebar .categories-container .categories-list .btn .count {
    font-size   : 14px;
    font-weight : 400;
}

.event-container .events-list {
    display        : flex;
    flex           : 1;
    flex-direction : column;
    gap            : 2rem;
}

.event-container .events-list .btn-filter {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    width           : 100%;
    background      : var(--color-main);
    transition      : 0.3s;
    gap             : 2rem;
    
    @media (min-width : 992px) {
        display : none;
    }
}

.event-container .events-list .btn-filter svg {
    transform : rotate(90deg);
}

.event-container .events-list .btn-filter:hover {
    background : var(--color-hover);
    cursor     : pointer;
}

.event-container .events-list .list {
    display               : grid;
    margin                : 0;
    padding               : 0;
    list-style            : none;
    grid-template-columns : repeat(auto-fill, minmax(300px, 1fr));
    gap                   : 1rem;
    
    @media (min-width : 450px) {
        grid-template-columns : repeat(auto-fill, minmax(380px, 1fr));
    }
}

.event-container .events-list .list .event-item .event-link {
    display        : flex;
    flex-direction : column;
    height         : 100%;
    overflow       : hidden;
    border-radius  : 24px;
    background     : #FFFFFF;
    box-shadow     : 0px 6px 16px 0px #1A1A2014;
}

.event-container .events-list .list .event-item .header {
    position       : relative;
    display        : flex;
    flex-direction : column;
}

.event-container .events-list .list .event-item .header .image-container {
    display : flex;
    height  : 240px;
}

.event-container .events-list .list .event-item .header .image-container img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}

.event-container .events-list .list .event-item .header .event-category {
    position : absolute;
    top      : 1rem;
    left     : 1rem;
}

.event-container .events-list .list .event-item .header .event-category .btn {
    display     : flex;
    align-items : center;
    padding     : 5px 15px;
    border      : 0;
    font-size   : 16px;
}

.event-container .events-list .list .event-item .header .event-category .btn svg {
    display : flex;
    width   : 26px;
}

.event-container .events-list .list .event-item .header .event-category .btn .text {
    margin-top : 2px;
}

.event-container .events-list .list .event-item .header .mandatory-registration-badge {
    position : absolute;
    bottom   : 1rem;
    left     : 1rem;
}

.event-container .events-list .list .event-item .header .mandatory-registration-badge .btn {
    display     : flex;
    align-items : center;
    padding     : 10px 15px;
    border      : 0;
    font-size   : 14px;
}

.event-container .events-list .list .event-item .header .mandatory-registration-badge .btn:hover {
    color      : #000000;
    background : #FFFFFF;
    cursor     : initial;
}

.event-container .events-list .list .event-item .content {
    display        : flex;
    flex-direction : column;
    padding        : 2rem;
    gap            : 1rem;
}

.event-container .events-list .list .event-item .content .event-date {
    display     : flex;
    align-items : center;
    width       : fit-content;
    color       : var(--color-main);
    font-family : var(--font-title);
    font-size   : 16px;
    font-weight : 500;
    line-height : 1;
    gap         : 0.5rem;
    
    @media (min-width : 380px) {
        font-size : 18px;
    }
}

.event-container .events-list .list .event-item .content .event-title {
    display     : flex;
    width       : fit-content;
    margin      : 0;
    font-family : var(--font-title);
    font-size   : 18px;
    font-weight : 500;
    line-height : 1;
    
    @media (min-width : 380px) {
        font-size : 20px;
    }
}

.event-container .events-list .list .event-item .content .event-address {
    display     : flex;
    width       : fit-content;
    color       : #707070;
    font-family : var(--font-title);
    font-size   : 16px;
    font-weight : 400;
    line-height : 1;
    
    @media (min-width : 380px) {
        font-size : 18px;
    }
}

.event-container .events-list .pagination {
    margin : 0 auto;
}

.no-result {
    width : 100%;
}

.no-result .inner {
    display        : flex;
    align-items    : center;
    flex-direction : column;
    margin         : 100px 0;
    color          : #66676B;
}

.no-result .inner .h3 {
    font-family : var(--font-title);
    font-size   : 18px;
}

.no-result .inner .bi-search {
    display       : flex;
    width         : 28px;
    height        : 28px;
    margin-bottom : 24px;
}

.pagination-container {
    display         : flex;
    align-items     : center;
    justify-content : center;
    margin          : 0;
    padding         : 0;
    list-style-type : none;
    gap             : 1rem;
}

.pagination-container .page-numbers {
    font-family : var(--font-title);
    font-size   : 22px;
    font-weight : 400;
    line-height : 1;
}

.pagination-container .page-numbers.prev {
    margin-right : 0.5rem;
}

.pagination-container .page-numbers.next {
    margin-left : 0.5rem;
}

.pagination-container .page-numbers {
    color : #707070;
}

.pagination-container .page-numbers.current {
    color : var(--color-main);
}

.gform_wrapper .gform_heading {
    display : none;
}

.gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
    color       : #131415;
    font-family : var(--font-title);
    font-size   : 18px;
    font-weight : 400;
    line-height : 1;
}

.gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_optional {
    color     : #707070;
    font-size : 16px;
}

.gform_wrapper .gform_body .gform_fields .gfield .ginput_container input, .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea {
    color         : #131415;
    border        : 0;
    border-radius : 8px;
    background    : #1922BF1A;
    font-family   : var(--font-title);
    font-size     : 18px;
    font-weight   : 400;
    line-height   : 1;
}

.gform_wrapper .gform_body .gform_fields .gfield .ginput_container input {
    height : 50px;
}

.gform_wrapper .gform_footer .gform_button {
    padding       : 15px 30px !important;
    border-radius : 25px !important;
    background    : var(--color-main) !important;
    font-family   : var(--font-title) !important;
    font-size     : 18px !important;
    font-weight   : 500 !important;
}

.gform_wrapper .gform_footer .gform_button:hover {
    background : var(--color-hover) !important;
    cursor     : pointer;
}