/*
 Event Calendar Plugin Modifications Styles
*/

/*
 1. General Styles
*/

/* 1.1 General Styles */
#tribe-events,
.tribe-events {
    font-family: inherit;
}

/* 1.2 hide titles */
.tribe-events-widget-events-list__header-title {
    display: none !important;
}

/*
 2. Events List Widget
*/

/* 
 2.1 Make the widget background transparent
*/
.tribe-events-widget,
.tribe-mini-calendar-widget {
    background: transparent;
    border: none;
    border-radius: 8px;
    box-shadow: none;
}

/* 
 2.2 Align the data and summary columns 
*/
.tribe-common-g-row.tribe-events-widget-events-list__event-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

.tribe-common-g-row.tribe-events-widget-events-list__event-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Date column */
.tribe-events-widget-events-list__event-date-tag.tribe-common-g-col {
    flex-shrink: 0;
    align-self: flex-start;
    margin-right: 0;
}
 
/* Summary column */
.tribe-events-widget-events-list__event-wrapper,
.tribe-common-g-col {
    flex: 1;
    align-self: flex-start;
}

.tribe-events-widget-events-list__event-date-tag-month,
.tribe-events-widget-events-list__event-date-tag-daynum {
    text-align: left;
}

/* 2.3 Style the "View More Events" button */
.tribe-events-widget-events-list__view-more {
    display: block;
    width: 100%;
    text-align: center;
    margin: 20px 0;
}

/* 2.4 Remove unnecessary margins and paddings */
.tribe-events-widget {
    --tec-spacer-7: 20px !important;
}