.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;
}

/* Red dot indicator for months that have trips */
.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, #ffffff);
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
}

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

/* Hide red dot when tab is active */
.month-tab.active::before {
    opacity: 0;
}

/* Active border ring */
.month-tab::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 2px solid var(--month-active-bg, #0073aa);
    pointer-events: none;
    border-radius: 24px;
    opacity: 0;
}

.month-tab.active::after {
    opacity: 1;
}

.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);
}

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

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

.trip-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
    padding: 15px;
    background-color: #fafafa;
    border-radius: 4px;
    border: 1px solid #eee;
}

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

/* Single definition for trip-name (removed duplicate) */
.trip-item .trip-name {
    flex: 1;
    width: 300px;
    font-weight: bold;
    font-size: 18px;
    margin-right: 15px;
}

.trip-item .date-box {
    display: flex;
    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, #0073aa);
    opacity: 0.8;
    border-radius: 8px;
    color: var(--button-text, #ffffff);
}

.trip-item .date-box .day {
    font-size: 22px;
    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 .date-range {
    color: #666;
    font-style: italic;
    margin-right: 15px;
}

/* =====================
   Status
   ===================== */
.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;
}

/* =====================
   Buttons
   ===================== */
.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) !important;
    color: var(--button-text, #ffffff) !important;
}

.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) !important;
}

/* =====================
   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;
}

.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;
}

/* =====================
   Responsive
   ===================== */
@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;
    }
}