.custom-wp-travel-book {
    border: 0;
    background-color: var(--e-global-color-primary, #0F8F6F);
    color: var(--e-global-color-447554c, #FFFFFF);
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 8px;
    text-decoration: none;
}
.trip-matrix-wrapper h3 {
    font-family: "Noto Sans Thai", Sans-serif;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.5em !important;
    color: var(--e-global-color-primary) !important;
}
.wptravel-recurring-dates, .wp-travel-booking__header {
    display: none !important;
}
@media (min-width: 991px) {
    .custom-wp-travel-book {
        margin-left: 10px;
    }
}
.custom-wptravel-recurring-dates {
    width: 100%;
}

.action-column {
    text-align: center;
}
.sold-out {
    color: #999;
    font-style: italic;
}
.warning-text {
    color: #ED1C24 !important;
    font-weight: bold !important;
}
.seats-warning {
    color: #ED1C24;
    font-size: 0.85em;
    margin-left: 5px;
}

.price-column {
    /* font-weight: 600; */
    color: #333;
}

.trip-matrix-wrapper {
    font-family: "Noto Sans Thai", Sans-serif;
    margin-top: 20px;
    overflow-x: auto;
}
.trip-matrix-table-wrapper {
    border-radius: 16px;
    overflow: hidden;
}
.trip-matrix-table-scroll {
    overflow: auto;
}
.trip-matrix-table {
    --table-row-height: 65px;
    width: 100%;
    /* min-width: 600px; */
    border-collapse: collapse;
    background: transparent;
    overflow: hidden;
    margin-bottom: 0;

}
/* หัวตารางสีเขียว */
.trip-matrix-table thead, .trip-matrix-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.trip-matrix-table thead {
    background: var(--e-global-color-accent, #00c07f);
    background-image: linear-gradient(90deg, var(--e-global-color-accent, #00c07f) 0%, var(--e-global-color-primary, #0F8F6F) 100%);
}
.trip-matrix-table thead th {
    /* background-color: #189a72; */
    background-color: transparent;
    border-color: #189a72;
    color: #ffffff;
    padding: 16px;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
    border-left: 0;
    border-right: 0;
}
.trip-matrix-table thead th:first-child {
    text-align: left;
    padding-left: 20px;
}
/* แถวข้อมูล */
.trip-matrix-table tbody {
    display: block;
    max-height: 390px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}
.trip-matrix-table tbody.show-all {
    max-height: 2000px;
}
/* .trip-matrix-table tbody .trip-row.trip-hidden-row {
    display: none;
} */
.trip-matrix-table tbody tr:last-child {
    border-bottom: none;
}
.trip-matrix-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}
.trip-matrix-table tbody td {
    height: var(--table-row-height);
    border-color: #189a72;
    border-bottom: 0;
    padding: 12px 16px;
    text-align: center;
    vertical-align: middle;
    color: inherit;
    border-left: 0;
    border-right: 0;
}
.trip-matrix-table tbody td:first-child {
    text-align: left;
    padding-left: 20px;
    font-weight: 600;
    color: inherit;
}
/* ปุ่มจอง */
.trip-matrix-table .btn-select-travel {
    display: inline-block;
    position: relative;
    background: var(--e-global-color-accent, #00c07f);
    background-image: linear-gradient(90deg, var(--e-global-color-accent, #00c07f) 0%, var( --e-global-color-primary, #0F8F6F ) 100%);
    box-shadow: 4px 4px 20px 0px rgba(15, 143, 111, 0.4);
    color: #FFFFFF !important;
    border: none;
    padding: 8px 20px;
    border-radius: 50em;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    min-width: 96px;
    transition: all 0.3s ease-in-out;
}
.trip-matrix-table .btn-select-travel:hover {
    color: var(--e-global-color-accent, #00c07f) !important;
    transform: translateY(-4px);
}
.trip-matrix-table .btn-select-travel:before {
    content: "";
    display: flex;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: inherit;
    background-color: #FFFFFF;
    position: absolute;
    top: 2px;
    left: 2px;
    opacity: 0;
    transition: 0.3s;
    z-index: 1;
}

.trip-matrix-table .btn-select-travel .button-text {
    position: relative;
    display: inline-block;
    line-height: 24px;
    z-index: 2;
}
.trip-matrix-table .btn-select-travel:hover:before {
    opacity: 0.9 !important;
}


/* Table footer */
.trip-toggle-wrapper {
    padding: 16px;
    text-align: center;
    background-color: #E6F7F0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.trip-toggle-wrapper .trip-toggle-btn {
    color: #FFFFFF;
    padding: 8px 20px;
    border: 0;
    background: var(--e-global-color-accent, #00c07f);
    background-image: linear-gradient(90deg, var(--e-global-color-accent, #00c07f) 0%, var(--e-global-color-primary, #0F8F6F) 100%);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-radius: 50em;
}

.trip-toggle-wrapper .trip-toggle-btn:hover,
.trip-toggle-wrapper .trip-toggle-btn:focus {
    transform: translateY(-4px);
    color: #fff;
}
@media (min-width: 767px) {
    .trip-matrix-table thead th.pricing-start {
        display: none;
    }
}
@media (max-width: 767px) {
    .trip-matrix-table thead th,
    .trip-matrix-table thead th:first-child,
    .trip-matrix-table thead th:last-child,
    .trip-matrix-table tbody td,
    .trip-matrix-table tbody td:first-child,
    .trip-matrix-table tbody td:last-child {
        padding-left: 4px;
        padding-right: 4px;
    }
    .trip-matrix-table thead th:first-child,
    .trip-matrix-table tbody td:first-child {
        width: 160px;
    }
    .trip-matrix-table thead th:nth-child(3),
    .trip-matrix-table thead th:nth-child(4),
    .trip-matrix-table thead th:nth-child(5),
    .trip-matrix-table tbody td:nth-child(3),
    .trip-matrix-table tbody td:nth-child(4) {
        display: none;
    }
    .trip-matrix-table thead th,
    .trip-matrix-table tbody td {
        font-size: 14px;
        white-space: nowrap;
        text-align: center;
    }
    .trip-matrix-table thead th:first-child {
        text-align: center;
    }
    .trip-matrix-table .btn-select-travel {
        padding: 8px 16px;
        font-size: 14px;
        min-width: 64px;
    }
}