/**
 * Styles for the custom Year/Month filter panels.
 * Adjust colors and spacing to match your theme.
 */
.epc-year-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    border-radius: 10px;
    background: #0C4A76;
    padding:0;
}
.epc-year-panel .epc-btn {
    flex-basis:100%;
    background-color:#ffffff;
    text-align:right;
}
.epc-month-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* gap between each date box, per spec */
}
.epc-btn {
    cursor: pointer;
    border: none;
    user-select: none; /* prevents text-selection cursor/highlight on click, since these are divs now, not buttons */
}
.epc-btn:hover {
    opacity: 0.85;
}
.epc-month-btn.is-active {
    background: #A4471B;
    color: #fff;
}
.epc-year-btn.is-active {
    color:#A4471B;
}
/* Each month/date button is its own box, per design spec */
.epc-month-btn {
    display: inline-flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    background: #EBE6E4;
    color: #A4471B;
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 1em; /* 54px */
    text-transform: capitalize;
}
/* Year buttons sit inside the white rounded panel above; base sizing
   only, tell me the exact text style if you have one and I'll match it. */
.epc-year-btn {
    color: #0C4A76;
    font-family: "Work Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 54px */
}
/* Hides the native Elementor Taxonomy Filter widget while keeping it
   functional in the DOM, since the custom panels drive it by proxy.
   Add this class to the native widget via Elementor's Advanced tab > CSS Classes. */
.epc-hide-filter {
    display: none;
}