.trip-departures-container {
    font-family: Arial, sans-serif;
    padding: 20px;
    border-radius: 8px;
}

/* Year tabs styling */
.year-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.year-tab {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f0f0f0;
    color: #333333;
    transition: all 0.3s ease;
    font-weight: bold;
    min-width: 60px;
    text-align: center;
}

.year-tab.active {
    background-color: var(--year-active-bg, #0073aa);
    color: var(--year-active-text, #ffffff);
    border-color: var(--year-active-bg, #0073aa);
}

.year-tab:hover:not(.active) {
    background-color: #e0e0e0;
    border-color: #999;
}

/* Month tabs styling */
.month-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}


.month-tab {
    flex: 1;
    user-select: none;
    cursor: pointer;
    min-width: 60px;
    display: flex;
    gap: 10px;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    height: 38px;
    color: #333333;
    background-color: #f0f0f0;
    border-radius: 24px;
    position: relative;
    text-align: center;
    
}

.month-tab:before {
    content: '';
    position: absolute;
    top: 20%;
    right: -3px;
    width: 11px;
    height: 11px;
    background-color: #ff6b6b;
    border-radius: 50%;
    border:2px solid var(--background-color);
    transform: translateY(-50%);
    opacity: 0;
}

.month-tab.has-trips:before {
    opacity: 1;
}
.month-tab.active.has-trips:before {
    opacity: 0;
}

.month-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f5f5f5;
}

.month-tab.active {
    background-color: var(--month-active-bg, #0073aa);
    color: var(--month-active-text, #ffffff);
    border-color: var(--month-active-bg, #0073aa);
}

.month-tab:hover:not(.active):not(.disabled) {
    background-color: #e0e0e0;
    border-color: #999;
}

/* Trip listings */
.trip-listings {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

/* .trip-item {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: space-between;
} */
.trip-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
    padding-bottom: 20px;
    background-color: #fafafa;
    border-radius: 4px;
    border: 1px solid #eee;
    padding: 15px;
    
}


.trip-item .trip-info-start-and-end {
    display: flex;
    align-items: center;
    gap: 15px;
    width:180px;
    font-size: 18px;
}

.trip-item .trip-name{
    flex: 1;
    width: 300px;
    font-weight: 500;
    font-size:18px;
    
}



.trip-item .date-box {
    display: flex;
    grid-gap: 4px;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 1px solid var(--button-bg, #0073aa);
    background-color: var(--button-bg);
    opacity: 0.8;
    border-radius: 8px;
    color:var(--button-text);
}

.trip-item .date-box .day {
    font-size: 22px !important;
    line-height: 1;
}

.trip-item .date-box .month {
    font-size: 15px;
    line-height: 1;
}

.trip-item .trip-details {
    display: flex;
    align-items: center;
    gap: 15px;
}

.trip-item .trip-name {
    font-weight: bold;
    margin-right: 15px;
}

.trip-item .date-range {
    color: #666;
    font-style: italic;
    margin-right: 15px;
}

.status{
    width: 180px;
    flex-shrink: 0;
    font-weight: 500;
    text-align: center;
    font-size:18px; 
}
.status-open {
    color: #28a745;
    font-weight: bold;

}

.status-sold {
    color: gray;
    font-weight: bold;
}

.contact-button, .tour-button {
    display: inline-block;
    padding: 8px 16px;
    text-decoration: none !important;
    border-radius: 4px;
    margin-top: 10px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: bold;
    background-color: var(--button-bg, #0073aa);
    color: var(--button-text, #ffffff);
}

.contact-button:hover, .tour-button:hover {
    transform: translateY(-2px);
    text-decoration: none !important;
    color:var(--button-text, #ffffff) !important ;
}
.contact-button.trip-sold-out-btn{
    user-select: none !important;
    pointer-events: none !important;
    background-color: gray !important;
}

.contact-button:active, .contact-button:focus, .tour-button:active, .tour-button:focus{
 color:rgba(255,255,255,0.8);   
}

/* No trips message */
.no-trips-message {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-top: 20px;
}

/* Price display */
.price-display {
    display: flex;
    align-items: center;
    gap: 0px;
    width:150px;
    flex-direction:column;
    text-align: center;
}

/* Hide price for sold trips */
/* .status.status-sold .price-display {
    display: none !important;
} */
.price-display .regular-price{
text-decoration-line: line-through;
text-decoration-thickness: 2px;
text-decoration-color: #f54d4d;
font-size:18px
}
.price-display .discount-price{
font-size:20px;
margin-bottom: -7px !important;
}

.month-tab.active:after,.month-tab.active:before{
display: block !important;
}

.month-tab:after {
    display: none !important;
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    left: -6px !important;
    right: -6px !important;
    bottom: -6px !important;
    border: 2px solid var(--month-active-bg, #0073aa) !important;
    pointer-events: none !important;
    border-radius: 24px !important;
}

@media (max-width:768px){
    .trip-item{
        justify-content: center !important;
        flex-direction: column !important;
        gap:15px !important;
    }

    .trip-item .trip-info-start-and-end {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .trip-item .trip-name{
        width: 100% !important;
        text-align: center !important;
        margin-right: 0px !important;
    }
    .price-display{
        width: 100% !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .status{
        width:100% !important;
    }
    .trip-duration{
        width:100% !important;
        text-align: center;
    }
}