/*
Theme Name: dewonder
Theme URI: https://riode.org/
Author: D-THEMES
Author URI: https://riode.org/about-me/
Description: Riode Responsive WordPress + eCommerce Theme.
Version: 1.0
Template: riode
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/
#explore .trip-table td:nth-child(4) {
    width: auto;
}

.image-box .subtitle {
    text-transform: normal !important;
}

button.expand-all-button {
    color: #333333 !important;
    border-color: #333333 !important;
}

/*Start of region trip archive page*/
.trips-card-custom-style .trip-card {
    border: 1px solid #F0F0F0; /* Thin black border */
    padding: 10px;
    border-radius: 20px; /* Optional rounded corners */
}
/*End of region trip archive page*/


/*Start of Single Event Date Time*/
.single-event-datetime {
    font-size: 22px;
}
/*End of Single Event Date Time*/

/*Start of Event Style*/
.no-events {
    padding: 5px 10px; /* Padding around the text */
    margin: 10px 0; /* Adds vertical margin */
}


.event-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    align-items: start;
}
.event-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    text-align: center;
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}
.event-grid-item:hover {
    transform: translateY(-5px);
}
.event-cover-container {
    position: relative;
    width: 100%;
    border-radius: 8px; /* Ensure full rounding of corners */
    overflow: hidden;
}

.expired-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(128, 128, 128, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    z-index: 2; /* Ensure it's above the image */
}

.event-cover {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

.event-details {
    padding: 10px;
}
.event-title-container {
    display: flex;
    align-items: center; /* Align icon and title vertically */
    gap: 8px; /* Space between icon and text */
}

.event-icon {
    width: 24px; /* Adjust icon size */
    height: 24px;
}

.event-title {
    font-size: 21px;
    font-weight: bold;
    margin: 5px 0;
    text-align: left; /* Ensures the text is aligned to the left */
}
.event-date {
    font-size: 16px;
    color: #343434;
    text-align: left; /* Aligns the date text to the left */
    display: block; /* Ensures it takes up full width for alignment */
    margin-left: 0; /* Removes any default centering */
}

.event-expired {
    font-size: 12px;
    color: red;
    font-weight: bold;
}

/* Remove grayscale and brightness effect from expired event images */
.event-grid-item.expired .event-cover {
    filter: none;
}

/* Make the expired label bigger and more prominent */
.event-grid-item.expired .expired-label {
    background: rgba(51, 51, 51, 0.9); /* Bright red background */
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 18px; /* Larger font size */
    font-weight: bold;
    z-index: 2;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow for more prominence */
    transform: rotate(-10deg); /* Optional: Add a slight tilt to stand out */
}



.event-grid-item.expired .expired-label {
    animation: pulse 1.5s infinite;
}



@media screen and (max-width: 1024px) {
    .event-grid-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}
@media screen and (max-width: 768px) {
    .event-grid-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}
/*End of Event Style*/

/* Apply hidden-trip only to tour grid */
/* Ensure .hidden-trip-tour-grid only applies inside .tour-grid-container */
.tour-grid-container .hidden-trip-tour-grid {
    display: none !important;
}

/* Ensure trip-card-container-archive is NOT affected by .hidden-trip-tour-grid */
.trip-card-container-archive .trip-card {
    display: block !important;
}



.dw-footer-grey p {
    color:#ffffff80;
    font-size: 14px;
}

/*Start of single post blog style*/
.single-post .main {
    background-color: #F0F0F0 ;
}

.dw_breadcrumb .elementor-shortcode {
    color: white ;
}

.dw_breadcrumb a {
    color: white ;
}

.single-post main {
    padding-top: 0rem;
}
/*End of single post blog style*/

.dw_1344_container.e-flex.e-con-boxed.e-con.e-parent {
    width: 1344px;
    display: block;
    margin: -60px auto 0 auto; /* Centers horizontally and moves up */
}


.main {
    background-color: #f0f0f0;
    padding-top: 0rem ;
}


/*Start of hubspot DW checkbox*/
/* Ensure checkboxes are properly aligned and styled */
.hs-form .hs-form-checkbox-display {
    display: flex;
    align-items: center;
    gap: 6px; /* Add spacing between the checkbox and text */
    cursor: pointer;
}

/* Style checkboxes */
.hs-form .hs-form-checkbox .hs-input {
    width: 18px !important;
    height: 18px !important;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 2px solid #dcdcdc;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

/* Properly center the checkmark */
.hs-form .hs-form-checkbox .hs-input:checked::before {
    content: "\f00c"; /* Unicode for FontAwesome checkmark */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    color: #0d4edb;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Fix spacing between checkboxes and text */
.hs-form .hs-form-checkbox label {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 6px; /* Adjust spacing between the checkbox and text */
}

/* Remove default bullet points */
.inputs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/*End of hubspot DW checkbox*/
/*start of hubspot form*/
ul.no-list.hs-error-msgs.inputs-list {
    display: none;
}

/*Start of Hubspot Form*/
.hs-form {
    background-color: #F3F3F3 !important;
    padding: 15px !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Start of added on 14 Aug2024 */
.hbspt-form {
    background-color: #F3F3F3 !important;
    padding: 15px !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

#hsForm_2bf61939-55be-4668-8a5d-f53e58f91468 > div > div.actions {
    padding: 0px 0px !important; /* Adjust the padding and add !important */
    margin-top: 10px !important; /* Adjust the top margin and add !important */
    margin-bottom: 0px !important; /* Adjust the bottom margin and add !important */
    box-sizing: border-box !important; /* Ensure box-sizing is applied */
}

#hsForm_2bf61939-55be-4668-8a5d-f53e58f91468 .actions .hs-button.primary.large {
    padding: 5px 10px !important; /* Adjust padding */
    margin: 5px 0 !important; /* Adjust margin */
    box-sizing: border-box !important;
}


.hs-form-2bf61939-55be-4668-8a5d-f53e58f91468_20f45490-8c25-4e66-91cb-02b29325eee2 .hs-submit > .actions {
    padding: 0px 0px !important; /* Adjust the padding and add !important */
    margin-top: 10px !important; /* Adjust the top margin and add !important */
    margin-bottom: 0px !important; /* Adjust the bottom margin and add !important */
    box-sizing: border-box !important; /* Ensure box-sizing is applied */
}


.hs_project_attachments.hs-project_attachments.hs-fieldtype-file.field.hs-form-field {
    margin-bottom: 0px !important;
}

/* End of added on 14 Aug2024 */

/* Headings */
.hs-form .hs-richtext span {
    font-weight: 400;
    color: #222222;
    font-style: normal;
    font-size: 14px;
    line-height: 29px;
    margin-bottom: 10px;
}

/* Subheadline styling */
.hs-form .hs-richtext.hs-main-font-element {
    font-size: 14px;
    margin-bottom: 10px;
}

/* Form fields styling */
.hs-form .hs-form-field {
    margin-bottom: 10px; /* Reduced space between fields */
}

.hs-form .hs-form-field label {
    font-weight: 400;
    color: #222222;
    font-size: 14px;
    line-height: 24px;
    display: block;
    margin-bottom: 8px;
}

.hs-form .hs-form-field label .hs-form-required {
    color: red;
    padding-inline-start: 0px; /* Updated padding-inline-start */
}

.hs-form .hs-form-field input,
.hs-form .hs-form-field select,
.hs-form .hs-form-field textarea {
    width: 100% !important;
    padding: 10px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    background-color: #f9f9f9;
    box-shadow: none;
    box-sizing: border-box;
}

.hs-form .hs-form-field input:focus,
.hs-form .hs-form-field select:focus,
.hs-form .hs-form-field textarea:focus {
    border-color: #222222;
    outline: none;
    background-color: #ffffff;
}

.hs-form .hs-form-field textarea {
    height: auto;
    min-height: 40px; /* Smaller height for textarea */
    resize: vertical;
}

/* Submit button styling */
.hs-form .hs-submit .hs-button {
    background-color: #0d4edb;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

.hs-form .hs-submit .hs-button:hover {
    background-color: #0d4edb;
}

/* Checkbox styling */
.hs-form .hs-form-booleancheckbox .hs-input {
    margin-right: 10px;
    width: 18px !important; /* Set width */
    height: 18px !important; /* Set height */
    vertical-align: middle; /* Align checkbox vertically in the middle */
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* Remove default styling for webkit */
    display: inline-block;
    position: relative;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    cursor: pointer;
}

.hs-form .hs-form-booleancheckbox .hs-input:checked::after {
    content: '\f00c';
    font-size: 9px;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    color: #222222;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.hs-form .hs-form-booleancheckbox .hs-input::before {
    display: none; /* Hide the ::before pseudo-element */
}

.hs-form .hs-form-booleancheckbox label {
    display: flex;
    align-items: center;
    font-weight: normal; /* Ensure the text is not bold */
}

.hs-form .hs-form-booleancheckbox-display {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #222222;
    font-weight: normal; /* Ensure the text is not bold */
}

.hs-form .hs-form-booleancheckbox-display input[type="checkbox"] {
    margin-right: 10px;
    width: 18px; /* Ensure checkbox is 18px wide */
    height: 18px; /* Ensure checkbox is 18px tall */
}

.legal-consent-container .hs-form-booleancheckbox-display > span {
    margin-left: 5px; /* Added margin-left to the span */
}

.legal-consent-container {
    margin-bottom: 0px !important;
}

.legal-consent-container .hs-form-booleancheckbox-display>span {
    margin-left: 5px !important;
}

/* Reduce bottom margin of the specified ul element */
#hsForm_2bf61939-55be-4668-8a5d-f53e58f91468 > fieldset:nth-child(10) > div > div > div > div > div > ul {
    margin-bottom: 0rem !important;
}

#hsForm_2bf61939-55be-4668-8a5d-f53e58f91468 > fieldset:nth-child(10) > div > div > div > div > div > ul {
    padding-inline-start: 0px !important;
}


.hs-form .hs-form-booleancheckbox-display span p {
    margin: 0; /* Remove margin from paragraph inside the label */
    font-weight: normal; /* Ensure the text is not bold */
}

/* Privacy policy link styling */
.hs-form .legal-consent-container a {
    color: #000000;
    text-decoration: underline;
}

.hs-form .legal-consent-container a:hover {
    color: #000000;
}

/* Helper text */
.hs-form .hs-field-desc {
    font-size: 12px;
    color: #666666;
    margin-top: 5px;
}

/* Icon styles if needed */
.hs-form .hs-richtext i {
    margin-right: 5px;
    color: #666666;
}

/* Hide HubSpot branding */
.hs-form .hs-form-privacy-policy {
    display: none;
}

/* Specific field adjustments */
.hs-form .hs-form-field .input input[type="file"] {
    border: none;
    background: none;
}

/* Legal consent styling */
.legal-consent-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Match spacing with other fields */
}

.legal-consent-container .hs-dependent-field {
    flex: 1;
}

.legal-consent-container .hs-form-booleancheckbox {
    display: flex;
    align-items: center;
    margin: 0;
}

/* Styling for job link */
.hs-form .hs-richtext.hs-main-font-element a {
    color: #222222; /* Set the color to black */
}

/*Start of Successfuly form Submit*/
/* Background color for the successful form submit message */
.hbspt-form .submitted-message {
    background-color: #e0f7fa; /* Light cyan background color */
    color: #0d4edb; /* Dark teal text color */
    padding: 15px;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 16px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/*End of Successfuly form Submit*/

/*End of hubspot form*/


/*end of hubspot form*/


/* Start of Styling for trip price */
/* Styling for trip price */
.trip__price__current {
    font-size: 30px; /* Main price font size */
    line-height: 1; /* Adjust line height */
    font-weight: 700;
    color: #343434;
    font-family: "PPTelegraf", sans-serif; /* Font family */
    margin-bottom: 1rem;
    word-break: break-word; /* Prevent overflow */
    display: inline-flex; /* Enable alignment for elements */
    align-items: flex-end; /* Align the '起' at the bottom */
}

.trip__price__current span {
    font-size: 18px; /* Smaller font size for '起' */
    line-height: 1; /* Ensure proper alignment */
    margin-left: 5px; /* Add space between price and '起' */
}

/* End of Styling for trip price */

/* Start of Shortcode to Display Trip Daily Itinerary */
/* Start of Shortcode to Display Trip Daily Itinerary */
/* General styles for the daily itinerary */

h3.itinerary-heading {
font-size: 24px;
font-weight: bold;
margin: 0;
color: #333;
}

.itinerary-header {
    margin-bottom: 20px;
}

.daily-itinerary {
    margin-top: 32px;
}

.trip__detail__section__plan__single {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 16px;
    position: relative;
}

.itinerary-day-title {
    font-size: 18px;
    font-weight: 700;
    color: #386cde;
    font-family: "Inter", sans-serif;
    line-height: normal;
    margin-bottom: 8px;
}

.itinerary-day-subtitle {
    font-size: 18px;
    font-weight: 500;
    color: #343434;
    font-family: "Inter", sans-serif;
    margin-bottom: 16px;
}

.itinerary-day-details {
    display: none; /* Initially hidden for expand/collapse functionality */
    padding-top: 16px;
}

.day-detail-row {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 16px;
    padding-bottom: 16px;
}

.day-detail-row:last-child {
    border-bottom: none; /* Remove border for the last row */
}

.day-detail-row .subsection-title {
    font-size: 16px;
    line-height: normal;
    font-weight: 700;
    color: #343434;
    font-family: "Inter", sans-serif;
}

.day-detail-row .subsection-description {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
    font-family: "Inter", sans-serif;
    margin-top: 8px;
}

.arrow-icon {
    position: absolute;
    right: 16px;
    top: 24px; /* Adjusted to stay consistent */
    background-color: white;
    border-radius: 50%;
    padding: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s;
}

.arrow-icon img {
    width: 16px;
    height: 16px;
    transform-origin: center;
    transition: transform 0.3s ease-in-out;
}

.arrow-icon.expanded img {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
.itinerary-day-title {
    max-width: 90%;
}
}

/* End of Shortcode to Display Trip Daily Itinerary */
/* End of Shortcode to Display Trip Daily Itinerary */


/*Start of trip archive table*/
tr.month-row ,  tr.year-row {
    background-color: unset !important;
    color: unset !important;
}


/* Default row styles */
.trip-table tbody tr {
    background-color: transparent;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover row styles for trip rows only */
.trip-table tbody tr.trip-row:hover {
    background-color: #0d4edb;
    color: white;
    cursor: pointer;
}

/* Specific tour statuses with corresponding colors */
.tour-status {
    display: inline-block;
    padding: 5px 15px;
    color: #343434; /* Default text color */
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    line-height: 1.5; /* Ensure content doesn't overflow vertically */
    transition: background-color 0.3s, color 0.3s;
    vertical-align: middle;
}

/* Styles for each tour status */
.tour-status.open {
    background-color: #E3EE30; /* 接受報名 */
}

.tour-status.completed {
    background-color: #00ca2c; /* 已成團 */
}

.tour-status.departed {
    background-color: #A9BCE5; /* 已出發 */
}

.tour-status.soon {
    background-color: #800080; /* 快將成團 - Purple */
    color: #ffffff !important; /* Ensure text is readable */
}

.tour-status.full {
    background-color: #FF6347; /* Full */
    color: #ffffff !important; /* Ensure text is readable */
}


/* Optional hover effect */
.tour-status:hover {
    transform: scale(1.1);
    color: #fff;
}


/* On hover, change the status text to "了解⾋程" */
.trip-table tbody tr:hover .tour-status {
    background-color: transparent;
    color: white;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
}

/* Make columns sortable */
.jq-sortable th.sortable {
    cursor: pointer;
}

.trip-table th.sortable::after {
    content: ' ▼';
    font-size: 12px;
    margin-left: 5px;
}

.trip-table th.sorted-asc::after {
    content: ' ▲';
}

/* Hover row styles only for the trip-row */
.trip-table tbody tr:hover {
    background-color: #0d4edb;
    color: white;
    cursor: pointer;
}

/* Add padding left to 行程日期 */
.trip-table td:first-child {
    padding-left: 10px;
}

/* Remove hover effects for year-row and month-row */
.year-row, .month-row {
    background-color: transparent; /* No hover effects */
}

/* Ensure no extra space in the row */
.trip-table tbody tr td {
    padding: 10px; /* Adjust padding as needed */
}

.trip-table th:first-child,
.trip-table td:first-child {
    width: 20%; /* 行程日期 */
}

.trip-table th:nth-child(2),
.trip-table td:nth-child(2) {
    width: 35%; /* 深度遊 */
}

.trip-table th:nth-child(3),
.trip-table td:nth-child(3) {
    width: 15%; /* 團費 */
}

.trip-table th:nth-child(4),
.trip-table td:nth-child(4) {
    width: 30%; /* 團隊狀態 */
}


/* End of table styles */

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .tour-status {
    display: inline-flex !important; /* Use flexbox for precise alignment */
    justify-content: center !important; /* Center the text horizontally */
    align-items: center !important; /* Center the text vertically */
    padding: 3px 12px !important; /* Adjusted padding for better fit */
    color: #343434 !important;
    font-weight: bold !important;
    font-size: 14px !important; /* Maintain readability */
    border-radius: 5px !important;
    text-align: center !important;
    white-space: nowrap !important; /* Prevent text wrapping */
    overflow: visible !important; /* Ensure no clipping */
    text-overflow: clip !important; /* Prevent ellipsis */
    min-width: 60px !important; /* Ensure enough width for text */
}

    .tour-status {
        font-size: 13px !important; /* Slightly smaller font size for mobile */
        padding: 2px 8px !important; /* Compact padding for mobile */
        min-width: 50px !important; /* Adjusted width for mobile */
    }

    /* Adjust table layout for smaller screens */
    .trip-table th,
    .trip-table td {
        font-size: 13px !important; /* Smaller table font size */
        padding: 6px !important; /* Compact layout for mobile */
    }

    .trip-table {
        width: 100% !important; /* Ensure the table fits the screen */
    }

    .trip-table td:first-child {
        padding-left: 5px !important; /* Adjust padding for alignment */
    }

    .trip-table th.sortable::after {
        display:none !important;
        }

        .tour-status.soon {
            background-color: #800080; /* 快將成團 - Purple */
            color: #ffffff !important; /* Ensure text is readable */
        }

        .trip-table th:first-child,
        .trip-table td:first-child {
            width: 20%; /* 行程日期 */
        }
        
        .trip-table th:nth-child(2),
        .trip-table td:nth-child(2) {
            width: 45%; /* 深度遊 */
        }
        
        .trip-table th:nth-child(3),
        .trip-table td:nth-child(3) {
            width: 15%; /* 團費 */
        }
        
        .trip-table th:nth-child(4),
        .trip-table td:nth-child(4) {
            width: 20%; /* 團隊狀態 */
        }

    td.tour-status {
        min-width: 60px !important;
    }

    .custom-post-meta {
        margin-top: 10px !important;
    }
    .custom-post-excerpt {
        margin-bottom: 0px !important;
    }
}

/*––– New‐landing‐page tweaks –––*/
#new_landing .trip-table {
  /* make the table fill its parent (≈900px) */
  width: 100% !important;
  /* keep your column %'s from collapsing */
  table-layout: fixed !important;
  margin: 0; 
}

/* ensure padding & borders are counted inside your width % */
#new_landing .trip-table th,
#new_landing .trip-table td {
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* re-define your four columns so they add to 100% */
#new_landing .trip-table th:first-child,
#new_landing .trip-table td:first-child {
  width: 20%;
}
#new_landing .trip-table th:nth-child(2),
#new_landing .trip-table td:nth-child(2) {
  width: 35%;
}
#new_landing .trip-table th:nth-child(3),
#new_landing .trip-table td:nth-child(3) {
  width: 15%;
}
#new_landing .trip-table th:nth-child(4),
#new_landing .trip-table td:nth-child(4) {
  width: 30%;
}

/* hide any extra blank column(s) */
#new_landing .trip-table th:nth-child(n+5),
#new_landing .trip-table td:nth-child(n+5) {
  display: none;
}

/* optional: if you just want to hide truly empty cells */
#new_landing .trip-table th:empty,
#new_landing .trip-table td:empty {
  display: none;
}

/* —————————————————————————————— */
/* Force tour‐status + arrow onto a single line */
/* —————————————————————————————— */
#new_landing .tour-status,
#new_landing .trip-table tbody tr:hover .tour-status {
  white-space: nowrap !important;   /* no wrapping */
  overflow: hidden;                 /* in case it's still too long */
  text-overflow: ellipsis;          /* gracefully clip if needed */
  font-size: 0.9em !important;      /* shrink slightly to help it fit */
  line-height: 1.2 !important;      /* tighter line height */
}

/* If you're appending an arrow via ::after, make sure it's included */
#new_landing .tour-status::after {
  content: ' →';                     /* your hover arrow */
  white-space: nowrap;               /* keep arrow on the same line */
}


/*End of trip archive table*/






/*Start of all tour grid layout shortcode*/

.trip-thumbnail img {
    border-radius: 10px; /* Adjust the radius as needed */
    overflow: hidden; /* Ensures the rounded corners are visible */
    margin-bottom: 15px;
}


/* Region filter buttons */
.region-filters {
    display: flex;
    margin-bottom: 20px;
    gap: 10px;
    flex-wrap: wrap;
}

.region-filters .filter-btn {
    display: inline-flex; /* Aligns content horizontally */
    align-items: center; /* Centers content vertically */
    background-color: #ffffff; /* White background */
    font-size: 16px; /* Converted from 1rem */
    line-height: 24px; /* Converted from 1.5rem */
    font-weight: 600; /* Bold font weight */
    color: #343434; /* Dark gray text color */
    font-family: "Inter", sans-serif; /* Font family */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    padding: 8px 16px 8px 8px; /* Converted from 0.5rem 1rem 0.5rem 0.5rem */
    border-radius: 20px; /* Converted from 1.25rem */
    border: none; /* No border for a cleaner look */
    gap: 8px; /* Space between icon and text */
    cursor: pointer; /* Pointer cursor */
}

/* Hover effect for region buttons */
.region-filters .filter-btn:hover {
    background-color: #0d4edb; /* Blue background on hover */
    color: #ffffff; /* White text on hover */
}

/* Active state for buttons */
.region-filters .filter-btn.active {
    background-color: #0d4edb; /* Blue background for active */
    color: #ffffff; /* White text for active */
}

/*Start of svg icon*/

.region-icon {
    width: 24px; /* Wrapper size */
    height: 24px; /* Wrapper size */
    border-radius: 10px;
    display: flex; /* Align content inside */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    background-color: transparent; /* Ensure no unwanted background */
}

.region-icon svg {
    width: 1.5rem; /* Match reference size */
    height: 1.5rem; /* Match reference size */
    fill: #343434; /* Default icon color */
    transition: fill 0.3s ease, transform 0.3s ease; /* Smooth transition for fill color */
}

/* Hover effect for icon */
.region-filters .filter-btn:hover .region-icon svg {
    fill: #ffffff; /* Change to white on hover */
}

/* Active state for icon */
.region-filters .filter-btn.active .region-icon svg {
    fill: #ffffff; /* Change to white on active */
}

/* Ensure no styles conflict */
.region-filters .filter-btn .region-icon svg {
    fill: #343434 !important; /* Enforce normal state color */
}


/*End of SVG icon*/

/* Optional: Add a slight scaling effect on hover for better interaction */
.region-filters .filter-btn:hover .region-icon svg,
.region-filters .filter-btn.active .region-icon svg {
    transform: scale(1.1); /* Slightly enlarge the icon */
}


/* Trips container */
.trips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: start; /* Align items to the start */
}

/* Individual trip card */
.trip-card {
    flex: 0 0 calc(25% - 20px); 
    box-sizing: border-box; /* Include padding in width calculation */
    background-color: #fff;
    border-radius: 20px;
    padding: 10px;
    transition: transform 0.3s ease;
}

.trip-card:hover {
    transform: scale(1.05);
}

.trip-card a {
    text-decoration: none;
    color: inherit;
}

/* Trip title */
.trip-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Trip duration and dates - together in one line */
.trip-duration-and-dates {
    display: flex;
    gap: 10px;
}

/* Default styling */
.trip-duration-and-dates {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px; /* Adjust spacing between elements */
}

.trip-duration {
    background-color: rgb(222, 229, 243);
    padding: 2px 10px;
    font-size: 14px;
    color: #0d4edb;
    border-radius: 10px;
    text-align: center;
    display: inline-block; /* Ensures it only takes the necessary width */
    min-width: fit-content; /* Reset min-width */
    max-width: fit-content; /* Prevents it from stretching */
}

p.trip-dates {
    font-size: 14px;
}

/* On smaller screens, stack them */
@media screen and (max-width: 1000px) {
    .trip-duration-and-dates {
        display: flex !important;
        flex-direction: row !important; /* Elements in a row */
        align-items: center !important; /* Vertical alignment */
        gap: 10px !important; /* Space between elements */
        flex-wrap: wrap !important; /* Allow wrapping if needed */
        justify-content: flex-start !important; /* Align items to the start */
    }
    

    .trip-duration {
        width: auto !important; /* Ensures it only takes necessary width */
        text-align: left !important;
        display: inline-block !important; /* Prevents full width */
        max-width: fit-content !important; /* Ensures proper width */
    }

    .trip-dates {
        width: auto !important;
        text-align: left !important;
        display: inline-block !important;
        max-width: fit-content !important;
    }
}


/* Festivals styling */
.trip-festivals {
    display: inline-block;
    background-color: #dee5f3;
    padding: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #343434;
    border-radius: 10px;
    margin-top: 10px;
}

.trip-festivals:empty {
    display: none; /* Hide when no text is present */
}

button.filter-btn.active,
button.filter-btn:focus,
button.filter-btn:hover {
    background-color: #0d4edb;  /* Blue background */
    color: #ffffff !important;  /* White text */
    border-color: #0d4edb;  /* Optional: match border to background */

    /* Ensure the icon inside is also white */
    svg {
        fill: #ffffff;
    }
}

/* For icon inside button when active */
button.filter-btn.active svg,
button.filter-btn:focus svg,
button.filter-btn:hover svg {
    fill: #ffffff !important;
}

/*End of all tour grid layout shortcode*/


/*Start of creating blog archive shortcode*/
/* Start of creating blog archive shortcode */

/* Container for posts */
.custom-posts-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0 auto;
    justify-content: space-between;
}

/* Each post */
.custom-post-item {
    display: flex;
    flex: 1 1 calc(50% - 1.5rem);  /* Two column layout */
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    align-items: flex-start;
    overflow: hidden;
}

/* Thumbnail on the left */
.custom-post-thumbnail {
    flex: 0 0 40%;
    max-width: 40%;
    margin-right: 2rem;
    border-radius: 10px;  /* Added border-radius to the featured image */
}

span.custom-post-date {
    font-size:12px;
}

/* Details on the right */
.custom-post-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Title */
.custom-post-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: normal;
}

.custom-post-title a {
    color: #343434;
    text-decoration: none;
}

/* Excerpt */
.custom-post-excerpt {
    margin-bottom: 10px;
    font-size: 14px;
    color: #343434;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Category - Updated to use max-width: fit-content */
.custom-post-category {
    font-size: 12px;
    color: #fff;
    background-color: #dee5f3; /* Matching color of your website */
    padding: 5px;
    border-radius: 10px;
    display: inline-block; /* Ensures the category is only as wide as its content */
    margin-bottom: 10px;
    max-width: fit-content; /* Ensures the width adapts to content */
    white-space: nowrap; /* Ensures the text does not wrap */
}

/* Meta (Date) */
.custom-post-meta {
    font-size: 12px;
    color: #888;
    margin-bottom: 1rem;
}

/* Post wrap for alignment */
.custom-post-item .post-media img {
    width: 100%;
    height: auto;
    border-radius: 1.25rem;
}

/*Start of region archive page (sub-region)*/
    /* Ensure the featured image inside the thumbnail has a 10px radius */
    .custom-post-thumbnail img {
        border-radius: 10px;  /* Apply the border-radius directly to the image */
    }


    .region-title-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .region-title {
        font-size: 24px;
        font-weight: bold;
        margin: 0;
    }
    
    .trip-count {
        display: inline-block;
        background-color: #F0F0F0;
        padding: 5px 10px;
        border-radius: 10px;
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }
    

/* Style for the learn more link */
.learn-more-link {
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Space between text and icon */
}

.learn-more-link .arrow-icon {
    font-size: 18px;
    transition: transform 0.3s ease;
}

/* Add a hover effect to the arrow */
.learn-more-link:hover .arrow-icon {
    transform: translateX(5px);
}

/*Addition of tour status label*/
/* Ensure the trip status label is always visible */
/* Ensure the trip status label is always visible */
.trip-status-label {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 15px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    z-index: 10;
    display: block !important;  /* Force display to block */
    opacity: 1 !important;      /* Ensure full visibility */
    visibility: visible !important; /* Ensure it's not hidden */
    transition: none !important;  /* Disable transition effects */
}

/* Specific styles for each tour status */
.trip-card-trip-status-label.open {
    background-color: #E3EE30 !important; /* 接受報名 */
    color: #343434 !important;
}

.trip-card-trip-status-label.completed {
    background-color: #00ca2c; /* 已成團 */
    color: #343434 !important;
}

.trip-card-trip-status-label.departed {
    background-color: #A9BCE5; /* 已出發 */
    color: #343434 !important;
}

.trip-card-trip-status-label.soon {
    background-color: #800080; /* 快將成團 - Purple */
    color: #ffffff;
}

/* Remove any hover effect if present */
.trip-thumbnail:hover .trip-status-label {
    opacity: 1 !important;
    visibility: visible !important;
}


/*End of region archive page (sub-region)*/






/* For mobile devices (1 post per row) */
@media (max-width: 768px) {
    .custom-post-item {
        flex: 1 1 100%; /* 1 post per row */
        flex-direction: column; /* Stack image and details vertically */
    }

    /* Adjust the thumbnail size on mobile */
    .custom-post-thumbnail {
        max-width: 100%; /* Make sure the thumbnail is full width on mobile */
        margin-right: 0; /* Remove margin-right on mobile */
    }

    /* Make the post details full width as well */
    .custom-post-details {
        flex: 1 1 100%; /* Allow details to take full width */
    }
}

/* End of creating blog archive shortcode */


/*Start of 所有目的地 menu */
/* Start of 所有目的地 menu */
.region-menu {
    position: relative;
    display: inline-block;
}

.region-menu-trigger {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #0073aa;
    border-radius: 25px;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.region-menu-trigger:hover {
    background-color: #005f87;
}

/* Hide dropdown initially */
/* Hide dropdown initially */
#region-dropdown {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 20px;
    width: 600px;
    /*z-index: 1000;*/
}

/* Ensure the menu item is positioned correctly */
.dw-region-menu {
    position: relative;
    cursor: pointer;
}


/* Style for region list */
.region-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Style for each region group */
.region-item {
    padding-bottom: 15px;
    border-bottom: 1px solid #E5E5E5;
    margin-bottom: 15px;
}

.region-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Parent region title */
.parent-region {
    font-size: 18px
}
/*End of 所有目的地 menu */


/*Start of Thematic Tours Shortcode*/
/* Start of Thematic Tours Shortcode */
/*Trip card Tour status label hide*/
.dw-show-trip-label .trip-card-trip-status-label {
    display: initial !important;
}



.theme-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

@media (min-width: 768px) {
    .theme-cards-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    .theme-cards-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

.theme-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.theme-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 318 / 440;
    object-fit: cover;
    filter: brightness(0.7);
}

.theme-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    padding: 15px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.theme-info div {
    margin-bottom: 5px;
}

/* Updated styling for theme-category */
.theme-category {
    position: absolute;
    top: 10px;
    left: 15px;
    background: #ffffff; /* White background */
    padding: 5px 15px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    color: #0d4edb; /* Blue text color */
}

/* Bigger text for the theme title */
.theme-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Updated color for theme_short_description_2 */
.theme-desc-2 {
    font-size: 14px;
    color: #E3EE30 !important; /* Ensuring the correct font color is applied */
    text-align: left;
}

/* Add a divider below theme_short_description_2 */
.theme-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 10px 0;
}

/* Ensuring text is left-aligned and white font */
.theme-details p {
    font-size: 14px;
    color: #fff;
    text-align: left;
}

/* Reduce the margin for a more compact layout */
.theme-card .theme-details p {
    margin: 5px 0;
}

/* End of Thematic Tours Shortcode */


/*End of Thematic Tours Shortcode*/



/* Media query for mobile view */
@media (max-width: 768px) {
    .trip-card {
        flex: 0 0 100%; /* Make each card take full width */
    }
}
/*End of all tour grid layout shortcode*/

@media (min-width: 768px) {
    /* Start of Trip Weather & Transport Card */
    /* Add margin to separate the weather and transport cards */
    .dw-weather {
        margin-bottom: 15px; /* Add space below the weather card */
        height: 28%; /* Keep consistent height */
        padding: 10px; /* Add padding */
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Optional shadow */
        border-radius: 8px; /* Optional rounded corners */
        background-color: #f8f8f8; /* Neutral background */
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        color: inherit;
    }

    .dw-transport {
        height: 28%; /* Keep consistent height */
        padding: 10px; /* Add padding */
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Optional shadow */
        border-radius: 8px; /* Optional rounded corners */
        background-color: #f8f8f8; /* Neutral background */
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        color: inherit;
    }
    /* End of Trip Weather & Transport Card */
}


@media (max-width: 768px) {
    .dw-weather, .dw-transport {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
    }
}


/*Start of Event page CTA animation*/

@keyframes pulseText {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.98; }
    100% { transform: scale(1); opacity: 1; }
}

.cta-pulse {
    display: inline-block;
    font-weight: bold;
    animation: pulseText 1.2s infinite ease-in-out;
}
/*End of Event page CTA animation*/

/*Start of Current Region Archive Page shortcode*/
.current-region-title {
    color: white;
    font-size: 64px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .current-region-title {
        font-size: 28px;
    }
}

/*End of Current Region Archive Page shortcode*/


/*Start of Trip page flight ticket*/
.airline-name-wrapper {
    color: #333333;
}

.flight-title {
    font-size: 18px !important;
}

.flight-details {
    font-size: 16px !important;
}


/*Start of Display Region Card*/
/* Start of Regions Display Shortcode */
p.display-region-card-desc-2 {
color: #E3EE30 !important;
}

.display-region-card-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
}

.display-region-card {
    position: relative !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.display-region-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 318 / 440 !important;
    object-fit: cover !important;
    filter: brightness(0.85) !important;
}

.display-region-card-info {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    color: #fff !important;
    padding: 15px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent) !important;
}

.display-region-card-info div {
    margin-bottom: 5px !important;
}

.display-region-card-category {
    position: absolute !important;
    top: 10px !important;
    left: 15px !important;
    background: #ffffff !important;
    padding: 5px 15px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    color: #0d4edb !important;
}

.display-region-card-title {
    font-size: 22px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
}

.display-region-card-desc-2 {
    font-size: 14px !important;
    color: #E3EE30 !important;
    text-align: left !important;
}

.display-region-card-divider {
    width: 100% !important;
    height: 1px !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    margin: 10px 0 !important;
}

.display-region-card-details p {
    font-size: 14px !important;
    color: #fff !important;
    text-align: left !important;
}

.display-region-card .display-region-card-details p {
    margin: 5px 0 !important;
}

.region-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    padding: 10px !important;
    border-bottom: 1px solid #ddd !important;
}

.region-title {
    font-weight: bold !important;
    color: #343434 !important;
    margin: 0 !important;
}

.learn-more-link {
    display: flex !important;
    align-items: center !important;
    color: #000 !important;
    text-decoration: none !important;
    font-weight: bold !important;
    transition: color 0.3s !important;
    font-size: 16px !important;
    gap: 5px !important;
}

.learn-more-link:hover {
    color: #0d4edb !important;
}

.learn-more-link::after {
    content: '→' !important;
    font-size: 16px !important;
    transition: color 0.3s !important;
}

.learn-more-link:hover::after {
    color: #0d4edb !important;
}

@media (min-width: 768px) {
    .display-region-card-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .display-region-card-container {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* End of Regions Display Shortcode */

/*End of Display Region Card*/


/*Start of flight info*/
.flight-info-container {
    border-radius: 10px;
    font-family: Arial, sans-serif;
    color: #333;
}
.flight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flight-header h3 {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    color: #333;
}
.elementor-heading-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    /*margin-bottom: 10px;*/
}
.flight-cost {
    font-size: 16px !important;
    font-weight: bold;
    color: #333333;
    text-align: right;
}
.flight-section {
    margin-top: 10px;
}
.flight-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
.flight-details {
    font-size: 14px;
    color: #666;
    margin: 5px 0;
}
.airline-name {
    font-weight: bold;
    color: black;
}
.flight-remarks {
    margin-top: 15px;

}
@media screen and (max-width: 768px) {
    .flight-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .flight-cost {
        text-align: left;
        margin-top: 5px;
    }
}
/*End of flight info*/


/*Start of adjusting menu positions and style*/
        /* Change background color to #0d4edb and set text & icon color to white */
        #adminmenu .menu-icon-post,
        #adminmenu .menu-icon-page,
        #adminmenu .menu-icon-trip,
        #adminmenu .menu-icon-event,
        #adminmenu .menu-icon-thematic_tour,
        #adminmenu .menu-icon-explore {
            background-color: #0d4edb !important;
        }

        /* Change menu text color to white */
        #adminmenu .menu-icon-post a,
        #adminmenu .menu-icon-page a,
        #adminmenu .menu-icon-trip a,
        #adminmenu .menu-icon-event a,
        #adminmenu .menu-icon-thematic_tour a,
        #adminmenu .menu-icon-explore a {
            color: white !important;
        }

        /* Change icon color to white */
        #adminmenu .menu-icon-post div.wp-menu-image::before,
        #adminmenu .menu-icon-page div.wp-menu-image::before,
        #adminmenu .menu-icon-trip div.wp-menu-image::before,
        #adminmenu .menu-icon-event div.wp-menu-image::before,
        #adminmenu .menu-icon-thematic_tour div.wp-menu-image::before,
        #adminmenu .menu-icon-explore div.wp-menu-image::before {
            color: white !important;
        }

/*End of adjusting menu positions and style*/


/*Start of destination page style*/
.dw_destination_bg_overlay::before {
    content: "";
    background-color: rgb(90 90 90 / 30%); /* light grey with 50% opacity */
    z-index: 0;
  }
  
  

.dw-destination-breadcrumb .elementor-shortcode a {
    color: white !important;
}

.dw-destination-breadcrumb .elementor-shortcode {
    color: white !important;
}

.dw-read-toggle {
    margin-top: 10px;
    background-color: white;
    color: #fff;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
  }
  
  .dw-read-toggle:hover {
    opacity: 0.85;
  }

  .dw_apply_hyperlink {
    color: #0d4edb;
    text-decoration: none;
  }
  
  .dw_apply_hyperlink:hover {
    text-decoration: underline;
  }
  
  
/*End of destination page style*/


/*Start of Single Trip Revamp*/
.dw_single_trip_status .trip-card-trip-status-label {
    top: 0px !important;
}

/*End of Single Trip Revamp*/


/*Start of landing page event table*/
.dewonder-event-table {
    width: 100%;
    border-collapse: collapse;
    margin: 40px 0; /* Increased margin for more spacing */
    table-layout: fixed; /* Ensure columns respect the specified widths */
}

.dewonder-event-table th,
.dewonder-event-table td {
    padding: 10px;
    border: none; /* Remove all borders */
    border-bottom: 1px solid #e9e9e9; /* Add bottom border only */
    text-align: left;
    word-wrap: break-word; /* Allow long text to wrap within the column */
}

/* Set specific widths for each column */
.dewonder-event-table th:nth-child(1),
.dewonder-event-table td:nth-child(1) {
    width: 20%; /* Format column (活動內容) */
}

.dewonder-event-table th:nth-child(2),
.dewonder-event-table td:nth-child(2) {
    width: 30%; /* Date column (日期) */
}

.dewonder-event-table th:nth-child(3),
.dewonder-event-table td:nth-child(3) {
    width: 15%; /* Time column (時間) */
}

.dewonder-event-table th:nth-child(4),
.dewonder-event-table td:nth-child(4) {
    width: 35%; /* Speaker column (講者) */
}

/* Let the theme's default text color apply naturally */
.dewonder-event-table th {
    font-weight: bold;
    border-bottom: 1px solid #e9e9e9; /* Ensure header has bottom border */
}

/* Hover effect: background changes to theme color #0d4edb, text turns white */
.dewonder-event-table tbody tr:hover {
    background-color: #0d4edb;
    color: #ffffff;
}

/* Remove border from the last row to avoid double border at the bottom */
.dewonder-event-table tr:last-child th,
.dewonder-event-table tr:last-child td {
    border-bottom: none;
}

/* Hide the appended date/time span by default on desktop */
.mobile-date-time {
    display: none;
}

/* Mobile styles */
@media (max-width: 767px) {
    .dewonder-event-table th,
    .dewonder-event-table td {
        font-size: 14px; /* Reduce font size on mobile */
    }

    /* Hide Date and Time columns */
    .dewonder-event-table th:nth-child(2),
    .dewonder-event-table th:nth-child(3),
    .dewonder-event-table td:nth-child(2),
    .dewonder-event-table td:nth-child(3) {
        display: none;
    }

    /* Ensure the Format (活動內容) and Speaker (講者) columns remain visible */
    .dewonder-event-table th:nth-child(1),
    .dewonder-event-table td:nth-child(1) {
        width: 50%; /* Adjust width of 活動內容 column on mobile */
    }

    .dewonder-event-table th:nth-child(4),
    .dewonder-event-table td:nth-child(4) {
        width: 50%; /* Adjust width of 講者 column on mobile */
    }

    /* Show appended date/time after 活動內容, styled in #343434, and white on hover */
    .mobile-date-time {
        display: block;
        color: #343434;
        font-size: 13px; /* Slightly smaller than main text */
        margin-top: 4px;  /* Space between format and date/time */
    }

    .dewonder-event-table tbody tr:hover .mobile-date-time {
        color: #ffffff;
    }
}
/*End of landing page event table*/



/*Start of landing page trip card, make it to show 3 trip card per row*/

/* Apply styles for tablet and desktop (screens 768px and wider) */
@media (min-width: 768px) {
/* Individual trip card */
.dw_lp_trip_card .trip-card{
    flex: 0 0 calc(33.33% - 13.33px) !important; /* 3 cards per row, accounting for 2 gaps (40px total) */
    box-sizing: border-box; /* Include padding in width calculation */
    background-color: #fff;
    border-radius: 20px;
    padding: 10px;
    transition: transform 0.3s ease;
}
/*End of landing page trip card, make it to show 3 trip card per row*/

  }

/* Start of Ensure the right column has a minimum width on tablet and smaller screens */
@media (max-width: 1024px) {
    .dw_right_sticky {
      min-width: 320px !important; /* Ensure the form is usable */
    }
  
    /* Adjust the parent container to allow wrapping */
    .dw_right_sticky-parent,
    .e-flex:has(.dw_right_sticky) { /* Target the parent flex container */
      flex-wrap: wrap !important; /* Allow columns to stack if space is constrained */
      gap: 20px; /* Add spacing between elements */
    }
  }
  
  /* Desktop (above 1024px) - restore default behavior */
  @media (min-width: 1025px) {
    .dw_right_sticky {
      min-width: 330px;
    }
  }

/* End of Ensure the right column has a minimum width on tablet and smaller screens */

/*Start of branded highlight*/
/* Style for the entire promotional line */
.dw-promo-line {
    font-style: italic; /* Make the entire line italic */
    font-weight: bold; /* Make the entire line bold */
    margin: 0; /* Ensure no extra margin unless specified */
}

/* Branded highlight for promotional text */
.dw-branded-highlight {
    position: relative;
    padding-bottom: 4px; /* Space between text and highlight */
    color: inherit; /* Inherit the text color from the theme */
    font-weight: bold; /* Already bold, reinforced here for consistency */
}

/* Thick bottom highlight using pseudo-element for better control */
.dw-branded-highlight::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px; /* Thick highlight */
    background-color: #0d4edb; /* DeWonder brand color */
    border-radius: 2px; /* Slight rounding for a modern look */
}

/* Optional: Hover effect to enhance interactivity */
.dw-branded-highlight:hover::after {
    background-color: #0b3bb5; /* Slightly darker shade on hover */
}

@media (max-width: 768px) {
    .dw-branded-highlight::after {
        height: 4px; /* Thinner highlight on mobile */
    }
}
/*End of branded highlight*/


/*Start of sticky whatsapp and contact us button*/
/* Container for Sticky Buttons */
.dw-sticky-buttons {
    position: fixed !important;
    bottom: 20px !important; /* Adjusted to move buttons closer to the bottom */
    right: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 1001 !important; /* Ensure it's above other elements */
}

.dw-sticky-buttons button {
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    color: white !important;
    transition: background-color 0.3s !important;
    display: flex !important;
    align-items: center !important; /* Ensure vertical centering */
    justify-content: center !important; /* Ensure horizontal centering */
    gap: 8px !important; /* Space between icon and text */
    line-height: 1 !important; /* Prevent line-height from affecting centering */
    height: 44px !important; /* Set a consistent height for both buttons */
}

.dw-sticky-buttons .dw-whatsapp-btn {
    background-color: #25D366 !important;
}

.dw-sticky-buttons .dw-whatsapp-btn:hover {
    background-color: #20B058 !important;
}

/* Ensure the WhatsApp icon is white */
.dw-sticky-buttons .dw-whatsapp-btn .whatsapp-icon svg {
    width: 24px !important;
    height: 24px !important;
    fill: #ffffff !important; /* Set the icon color to white */
}

/* LINE button styles for Taiwan locale */
.dw-sticky-buttons .dw-line-btn {
    background-color: #00B900 !important;
}

.dw-sticky-buttons .dw-line-btn:hover {
    background-color: #00A000 !important;
}

/* Style the LINE icon */
.dw-sticky-buttons .dw-line-btn .line-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dw-sticky-buttons .dw-line-btn .line-icon img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
}

.dw-sticky-buttons .dw-learn-more-btn {
    background-color: #0d4edb !important;
    color: white !important;
    border: 1px solid white !important; /* Thin white border */
}

/* Show the Learn More icon on all devices */
.dw-sticky-buttons .dw-learn-more-btn .learn-more-icon {
    display: inline-block !important;
}

/* Style the Learn More icon */
.dw-sticky-buttons .dw-learn-more-btn .learn-more-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: #ffffff !important; /* Ensure the icon is white */
}

/* Show the Learn More text on desktop and tablet */
.dw-sticky-buttons .dw-learn-more-btn .learn-more-text {
    color: #ffffff !important; /* Ensure the text is white */
}

.dw-sticky-buttons .dw-learn-more-btn:hover {
    background-color: #0b3fb5 !important; /* Slightly darker shade for hover effect */
    border: 1px solid white !important; /* Maintain border on hover */
}

/* Highlight effect for the sticky column */
.hubspot-form-sticky-column-highlight {
    animation: highlight-form 1s ease-in-out;
}

@keyframes highlight-form {
    0% { border: 2px solid transparent; background-color: transparent; }
    50% { border: 2px solid #0d4edb; background-color: rgba(13, 78, 219, 0.1); }
    100% { border: 2px solid transparent; background-color: transparent; }
}

/* Mobile-specific styles (for screens 767px and below) */
@media (max-width: 767px) {
    /* Hide the WhatsApp text, showing only the icon */
    .dw-sticky-buttons .dw-whatsapp-btn .whatsapp-text {
        display: none !important;
    }

    /* Adjust padding for WhatsApp button to center the icon */
    .dw-sticky-buttons .dw-whatsapp-btn {
        padding: 10px !important; /* Reduce padding to center the icon */
    }

    /* Hide the LINE text, showing only the icon */
    .dw-sticky-buttons .dw-line-btn .line-text {
        display: none !important;
    }

    /* Adjust padding for LINE button to center the icon */
    .dw-sticky-buttons .dw-line-btn {
        padding: 10px !important; /* Reduce padding to center the icon */
    }

    /* Show the Learn More icon on mobile */
    .dw-sticky-buttons .dw-learn-more-btn .learn-more-icon {
        display: inline-block !important;
    }

    /* Style the Learn More icon */
    .dw-sticky-buttons .dw-learn-more-btn .learn-more-icon svg {
        width: 16px !important;
        height: 16px !important;
        fill: #ffffff !important; /* Ensure the icon is white */
    }

    /* Hide the Learn More text on mobile */
    .dw-sticky-buttons .dw-learn-more-btn .learn-more-text {
        display: none !important;
    }

    /* Adjust padding for Learn More button to center the icon */
    .dw-sticky-buttons .dw-learn-more-btn {
        padding: 10px !important; /* Reduce padding to center the icon */
    }
}

/* Hide Learn More button on desktop and tablet (min-width: 768px) */
@media (min-width: 768px) {
    .dw-sticky-buttons .dw-learn-more-btn {
        display: none !important;
    }
}
/*End of sticky whatsapp and contact us button*/

/*───────────────────────────────────────────────────────────*/
/*   I.  trip_table_v2：FILTER BAR (multiple‐select filters)  */
/*       "行程時段" 在手機版 ≤768px 隱藏                         */
/*───────────────────────────────────────────────────────────*/

.trip-table-v2-filters {
  display: flex;
  flex-wrap: nowrap;      /* 所有 filter 永遠排列在一行 */
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Each filter‐item 均等伸縮；最小寬度 100px */
.trip-table-v2-filters .ttv2-filter-item {
  flex: 1 1 0;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  position: relative;     /* label 可以置頂 */
}

/* Force each <label> to stay on top in dark gray */
.trip-table-v2-filters .ttv2-filter-item label {
  margin-bottom: 0.25rem;
  white-space: nowrap;
  font-weight: 600;
  color: #343434 !important;     /* 永遠不要被覆蓋 */
  display: block !important;
  opacity: 1 !important;
  z-index: 10;                   /* 高於下方的 Select2 容器 */
  background-color: transparent; /* optional 酌情調整 */
  padding: 0 2px;                /* 若 Select2 有 border，label 就不會被剪到 */
}

/* Hide the native <select> so you don't see the "flash of browser <select>" */
.trip-table-v2-filters .ttv2-filter-item select {
  display: none !important;
}

/* Make sure the injected Select2 container is visible and cannot overlap its own label */
.trip-table-v2-filters .select2-container {
  display: inline-block;
  width: 100%;
  margin-top: 6px;  /* 下移 6px，確保 label 不會被 Select2 框蓋住 */
  z-index: 1;       /* 比 label 低，label 以 "z-index:10" 蓋在最上面 */
}

/* 在手機螢幕 (≤768px) 隱藏 "行程時段" */
@media (max-width: 768px) {
  .trip-table-v2-filters .filter-time {
    display: none !important;
  }
}

/* Add a tiny scrollbar style if the filter row overflows horizontally */
.trip-table-v2-filters::-webkit-scrollbar {
  height: 6px;
}
.trip-table-v2-filters::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/*───────────────────────────────────────────────────────────*/
/*   II.  旅程 v2 專屬樣式 (全都在 .dw-trip-v2-wrapper 內部)    */
/*───────────────────────────────────────────────────────────*/

/* 7A) 讓整張 table 滿 100% 並且可以左右捲動 */
.dw-trip-v2-wrapper .trip-table-v2-wrapper {
  width: 100%;
  overflow-x: auto; /* 手機/平板太窄就橫向捲動 */
  margin-bottom: 2rem;
}

.dw-trip-v2-wrapper .trip-table-v2 {
  width: 100% !important;
  border-collapse: collapse;
  table-layout: fixed; /* 固定欄寬，避免莫名留空 */
  font-family: "Noto Sans TC", sans-serif;
}

/* 7B) Table cells: box-sizing + ellipsis */
.dw-trip-v2-wrapper .trip-table-v2 th,
.dw-trip-v2-wrapper .trip-table-v2 td {
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0.75rem 0.5rem;
  border: 1px solid #eee;
  text-align: left;
  vertical-align: middle;
}

/* 7C) Header 背景 */
.dw-trip-v2-wrapper .trip-table-v2 thead th {
  background-color: #f5f5f5;
  border-bottom: 2px solid #ddd;
  font-weight: 600;
}

/* 7D) 年 / 月 列 */
.dw-trip-v2-wrapper .trip-table-v2 .year-row td {
  background-color: #f1f1f1;
  font-weight: 600;
}
.dw-trip-v2-wrapper .trip-table-v2 .month-row td {
  background-color: #fbfbfb;
  font-weight: 500;
}

/* 7E) 滑鼠懸停整行時變藍底白字 */
.dw-trip-v2-wrapper .trip-table-v2 tbody tr.trip-row:hover {
  background-color: #0d4edb !important;
  color: #ffffff;
  cursor: pointer;
}
.dw-trip-v2-wrapper .trip-table-v2 tbody tr.trip-row:hover td,
.dw-trip-v2-wrapper .trip-table-v2 tbody tr.trip-row:hover th {
  color: #ffffff;
}

/* 7E‐2) 確保 tour-status pill 的文字在 hover 時為白色 */
.dw-trip-v2-wrapper .trip-table-v2 tbody tr.trip-row:hover .tour-status {
  color: #ffffff !important;
  background-color: transparent !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: fit-content;
  max-width: none !important;
}

/* 7F) Tour-status pills (same as before) */
.dw-trip-v2-wrapper .trip-table-v2 .tour-status {
  display: inline-block;
  padding: 5px 15px;
  color: #343434; /* default */
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  line-height: 1.5;
  transition: background-color 0.3s, color 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.open      { background-color: #E3EE30; color: #343434; }
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.completed { background-color: #00ca2c; color: #343434; }
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.departed  { background-color: #A9BCE5; color: #343434; }
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.soon      { background-color: #800080; color: #ffffff; }
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.full      { background-color: #FF6347; color: #ffffff; }

/* 7G) Sortable arrow icon on header */
.dw-trip-v2-wrapper .trip-table-v2 th.sortable {
  cursor: pointer;
}
.dw-trip-v2-wrapper .trip-table-v2 th.sortable::after {
  content: " ▼";
  font-size: 12px;
  margin-left: 5px;
}
.dw-trip-v2-wrapper .trip-table-v2 th.sorted-asc::after {
  content: " ▲";
}

/*───────────────────────────────────────────────────────────*/
/*   III.  SELECT2 OVERRIDES (只修改必要規則)                */
/*───────────────────────────────────────────────────────────*/

/* 1) Force every Select2 "box" (single‐select or multi‐select) to be exactly 36px tall */
.dw-trip-v2-wrapper .select2-container .select2-selection--single,
.dw-trip-v2-wrapper .select2-container .select2-selection--multiple {
  height: 36px;
  padding-top: 2px;
  padding-bottom: 2px;
  box-sizing: border-box;
}

/* 2) Vertically center the placeholder/selected text inside that 36px */
.dw-trip-v2-wrapper .select2-container .select2-selection__rendered {
  line-height: 32px;  
  display: flex;
  align-items: center;
  min-height: 36px;
}

/* 3) Center the dropdown arrow in single‐select */
.dw-trip-v2-wrapper .select2-container--default
  .select2-selection--single .select2-selection__arrow {
  height: 36px;
  top: 0;  /* arrow sits at top of the 36px box */
}

/* 4) Center the "×" clear icon in single‐select */
.dw-trip-v2-wrapper .select2-container--default
  .select2-selection--single .select2-selection__clear {
  top: 50%;
}

/* 5) Make multi‐select "tags" smaller & wrap neatly */
.dw-trip-v2-wrapper .select2-container--default
  .select2-selection--multiple .select2-selection__choice {
  font-size: 0.85em;
  margin: 2px 4px 7px 4px;
  height: auto;
  line-height: 1.2;  /* 細框的高 */
}

/* 6) Ensure the remove‐"×" inside each tag is visible/clickable */
.dw-trip-v2-wrapper .select2-container--default
  .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: 4px;
  font-size: 0.9em;
  line-height: 1;
}

/* 7) Override the inline search <input> height so it never exceeds that 36px */
.dw-trip-v2-wrapper .select2-container
  .select2-search--inline .select2-search__field {
  height: 32px !important;      /* a little less than 36px to allow for padding */
  margin-top: 2px !important;   /* center it inside the 36px box */
}

/*───────────────────────────────────────────────────────────*/
/*   IV.  MOBILE (≤768px) 调整                                  */
/*───────────────────────────────────────────────────────────*/

/* 7H) On mobile, allow multi-line wrap in table cells */
@media (max-width: 768px) {
  .dw-trip-v2-wrapper .trip-table-v2 th,
  .dw-trip-v2-wrapper .trip-table-v2 td {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* 7I) Hide the "團費" column (3rd column) on mobile */
@media (max-width: 768px) {
  .dw-trip-v2-wrapper .trip-table-v2 thead th:nth-child(3),
  .dw-trip-v2-wrapper .trip-table-v2 tbody td:nth-child(3) {
    display: none !important;
  }
}

/* 7J) Prevent the "團隊狀態" (4th column) from stretching on mobile */
@media (max-width: 768px) {
  .dw-trip-v2-wrapper .trip-table-v2 {
    table-layout: auto; /* 這樣 4th column 就不會撐滿剩餘空間 */
  }
  .dw-trip-v2-wrapper .trip-table-v2 thead th:nth-child(4),
  .dw-trip-v2-wrapper .trip-table-v2 tbody td:nth-child(4) {
    width: auto !important;
  }
}

/* 7K) On tablet/desktop (≥769px), force the table back to fill full width */
@media (min-width: 769px) {
  .dw-trip-v2-wrapper .trip-table-v2-wrapper {
    overflow-x: auto;
  }
  .dw-trip-v2-wrapper .trip-table-v2 {
    width: 100%;
  }
}

/*───────────────────────────────────────────────────────────*/
/*   IV.5  MOBILE: 調整「行程日期」「深度遊」「團隊狀態」欄寬         */
/*───────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* 增加第1欄 (行程日期) 欄寬 +5% */
  .dw-trip-v2-wrapper .trip-table-v2 thead th:nth-child(1),
  .dw-trip-v2-wrapper .trip-table-v2 tbody td:nth-child(1) {
    width: 20% !important;
  }

  /* 增加第2欄 (深度遊) 欄寬 +5% */
  .dw-trip-v2-wrapper .trip-table-v2 thead th:nth-child(2),
  .dw-trip-v2-wrapper .trip-table-v2 tbody td:nth-child(2) {
    width: 25% !important;
  }

  /* 減少第4欄 (團隊狀態) 欄寬 -10% */
  .dw-trip-v2-wrapper .trip-table-v2 thead th:nth-child(4),
  .dw-trip-v2-wrapper .trip-table-v2 tbody td:nth-child(4) {
    width: 15% !important;
  }
}

/*End of trip_table_v2*/

/*───────────────────────────────────────────────────────────*/
/*  [trip_page_trip_table] Styles (with toggle & margin)     */
/*───────────────────────────────────────────────────────────*/

.trip-page-trip-table-wrapper {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Each "row" is a flex container (clickable) */
/* Align-items flex-start so status pill lines up with the date/title/price stack */
.trip-page-trip-row,
.trip-page-trip-row.hidden-trip {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;    /* Changed back to flex-start for correct vertical alignment */
  border-bottom: 1px solid #e0e0e0;
  padding-top: 12px;
  padding-bottom: 12px;
  cursor: pointer;            /* entire row is clickable */
}

/* Left column container: stacks date, title, price vertically */
.trip-page-col-left {
  flex: 1 1 70%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* "Desktop" date (hidden on mobile) */
.trip-page-date-not-mobile {
  display: flex;
  font-weight: 600;
  color: #343434;
  font-family: "Noto Sans TC", sans-serif;
}

/* "Mobile" date+status container (shown only on narrow) */
.trip-page-date-and-status-mobile {
  display: none;
  justify-content: space-between;
  align-items: center;
  font-family: "Noto Sans TC", sans-serif;
}

/* On mobile, add left margin to the status pill */
.trip-page-date-and-status-mobile .trip-page-status {
  margin-left: 8px;
}

/* Trip title */
.trip-page-title {
  font-size: 14px;
  color: #0d4edb;
  font-family: "Noto Sans TC", sans-serif;
}

/* Trip price */
.trip-page-price {
  font-size: 13px;
  color: #343434;
  font-family: "Noto Sans TC", sans-serif;
}

/* Right column: desktop status pill (hidden on mobile) */
.trip-page-col-right {
  flex: 0 0 20%;
  text-align: right;
  display: flex;
  align-items: flex-start;   /* align at top so it lines up with date/title */
  justify-content: flex-end;
}

/* Status pill common styles */
.trip-page-status {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: "Noto Sans TC", sans-serif;
}

/* Example status‐specific colors */
.trip-page-status.open {
  background-color: #e3ee30;
  color: #343434;
}
.trip-page-status.completed {
  background-color: #00ca2c;
  color: #343434;
}
.trip-page-status.departed {
  background-color: #a9bce5;
  color: #343434;
}
.trip-page-status.soon {
  background-color: #800080;
  color: #ffffff;
}
.trip-page-status.full {
  background-color: #ff6347;
  color: #ffffff;
}

/* Hover effect: row background → #0d4edb, text → white */
.trip-page-trip-row:hover,
.trip-page-trip-row.hidden-trip:hover {
  background-color: #0d4edb;
}
.trip-page-trip-row:hover .trip-page-date-not-mobile,
.trip-page-trip-row:hover .trip-page-title,
.trip-page-trip-row:hover .trip-page-price,
.trip-page-trip-row:hover .trip-page-status {
  color: #ffffff;
}

/* Hide any "hidden-trip" rows by default */
.trip-page-trip-row.hidden-trip {
  display: none;
}

/* "See more" (toggle) button container */
.trip-page-see-more {
  text-align: center;
  margin-top: 8px;
}

/* Toggle button: smaller, white text */
.trip-page-toggle-button {
  background-color: #0d4edb;
  color: #ffffff !important; /* enforce white text */
  padding: 4px 10px;
  font-size: 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: "Noto Sans TC", sans-serif;
}

/* No‐results message */
.trip-page-no-results {
  font-style: italic;
  color: #777;
  text-align: center;
  margin: 20px 0;
  font-family: "Noto Sans TC", sans-serif;
}


/*───────────────────────────────────────────────────────────*/
/*  [trip_page_trip_table] Updated Styles: Scrollable + Highlight  */
/*───────────────────────────────────────────────────────────*/

.trip-page-trip-table-wrapper {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;

  /* limit height when more than 3 items */
  max-height: 360px;              /* desktop default */
  overflow-y: auto;               /* make it scrollable */
  overscroll-behavior-y: contain; /* touch scrolling stays within this box */
}

/* Each "row" is a flex container (clickable) */
/* Now flex-direction: column to stack lines vertically */
.trip-page-trip-row,
.trip-page-trip-row.hidden-trip {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e0e0e0;
  padding-top: 12px;
  padding-bottom: 12px;
  cursor: pointer; /* entire row is clickable */
  background-color: #ffffff; /* default background */
}

/* Highlight the current trip (different background) */
.trip-page-trip-row.current-trip {
  background-color: #f0f8ff; /* light highlight */
}

/* First line: date on left, status pill on right */
.trip-page-first-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* "Desktop" date (hidden on mobile) */
.trip-page-date-not-mobile {
  display: flex;
  font-weight: 600;
  color: #343434;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
}

/* "Mobile" date+status container (shown only on narrow) */
.trip-page-date-and-status-mobile {
  display: none;
  justify-content: space-between;
  align-items: center;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
}

/* On mobile, add left margin to the status pill */
.trip-page-date-and-status-mobile .trip-page-status {
  margin-left: 8px;
}

/* Add left margin to the status pill on desktop/tablet */
.trip-page-first-line .trip-page-status {
  margin-left: 16px;
}

/* Trip title (second line) */
.trip-page-title {
  font-size: 14px;
  color: #0d4edb;
  font-family: "Noto Sans TC", sans-serif;
  margin-top: 4px;
}

/* Trip price (third line) */
.trip-page-price {
  font-size: 13px;
  color: #343434;
  font-family: "Noto Sans TC", sans-serif;
  margin-top: 2px;
}

/* Status pill common styles */
.trip-page-status {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: "Noto Sans TC", sans-serif;
}

/* Example status‐specific colors */
.trip-page-status.open {
  background-color: #e3ee30;
  color: #343434;
}
.trip-page-status.completed {
  background-color: #00ca2c;
  color: #343434;
}
.trip-page-status.departed {
  background-color: #a9bce5;
  color: #343434;
}
.trip-page-status.soon {
  background-color: #800080;
  color: #ffffff;
}
.trip-page-status.full {
  background-color: #ff6347;
  color: #ffffff;
}

/* Hover effect: row background → #0d4edb, text → white */
.trip-page-trip-row:hover,
.trip-page-trip-row.hidden-trip:hover,
.trip-page-trip-row.current-trip:hover {
  background-color: #0d4edb;
}
.trip-page-trip-row:hover .trip-page-date-not-mobile,
.trip-page-trip-row:hover .trip-page-title,
.trip-page-trip-row:hover .trip-page-price,
.trip-page-trip-row:hover .trip-page-status,
.trip-page-trip-row.current-trip:hover .trip-page-date-not-mobile,
.trip-page-trip-row.current-trip:hover .trip-page-title,
.trip-page-trip-row.current-trip:hover .trip-page-price,
.trip-page-trip-row.current-trip:hover .trip-page-status {
  color: #ffffff;
}

/* "See more" / "See less" button removed entirely */

/* No‐results message */
.trip-page-no-results {
  font-style: italic;
  color: #777;
  text-align: center;
  margin: 20px 0;
  font-family: "Noto Sans TC", sans-serif;
}

/*───────────────────────────────────────────────────────────*/
/*  Responsive tweaks                                          */
/*───────────────────────────────────────────────────────────*/
@media (max-width: 1024px) {
  /* On tablet, reduce max-height */
  .trip-page-trip-table-wrapper {
    max-height: 280px;
  }
}

@media (max-width: 600px) {
  .trip-page-trip-table-wrapper {
    max-height: 220px;
  }

  /* Hide the desktop "first line" (date + status) on mobile */
  .trip-page-first-line {
    display: none !important;
  }

  /* Show mobile date+status, hide desktop date */
  .trip-page-date-and-status-mobile {
    display: flex !important;
  }
  .trip-page-date-not-mobile {
    display: none !important;
  }
}

/* Ensure nested scrolling on mobile doesn't block page scroll */
.trip-page-trip-table-wrapper {
  overscroll-behavior-y: contain;
}


/*───────────────────────────────────────────────────────────*/
/* End of [trip_page_trip_table] Styles (Independent of other tables) */
/*───────────────────────────────────────────────────────────*/

.trip-table-v2 td:nth-child(2) {
  white-space: normal !important;
  word-break: break-word;
}

.tour-status.full,
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.full {
  background-color: #0d4edb !important;
  color: #ffffff !important;
}

.tour-status.departed,
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.departed,
.trip-page-status.departed {
  background: #fbe9e7 !important;
  background-color: #fbe9e7 !important;
  color: #d84315 !important;
}

.trip-card-trip-status-label {
    color: #fff !important;
    background: none !important;
    background-color: transparent !important;
}
.trip-card-trip-status-label.open,
.trip-card-trip-status-label.completed,
.trip-card-trip-status-label.departed,
.trip-card-trip-status-label.soon,
.trip-card-trip-status-label.full {
    color: #fff !important;
    background: none !important;
    background-color: transparent !important;
}

@media (max-width: 768px) {
  .trip-table-v2-filters {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .trip-table-v2-filters .filter-time {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .trip__price__current {
    font-size: 18px !important;
  }
}

.elementor-testimonial-wrapper .elementor-testimonial-content {
    font-size: 16px !important;
}