/* --- Variables & Basic Styles --- */
:root {
    --primary-orange: #e18b2a;
    --primary-light: #ffffff;
    --primary-dark: #4b241b;
    --text-white: #ffffff;
    --text-dark: #333333;
    --sale-red: #e74c3c;
    --filter-bg: #fff;
    --border-color: #ccc;
}

/* --- Wrapper for Layout --- */
.mtc-travel-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    width: 100%; /* Take full width of its container */
    font-family: 'Quicksand', sans-serif; /* Apply base font here */
    box-sizing: border-box;
}
.mtc-travel-wrapper *,
.mtc-travel-wrapper *::before,
.mtc-travel-wrapper *::after {
    box-sizing: border-box; /* Ensure box-sizing inheritance */
}


/* --- Filter Sidebar --- */
#mtc-filters { /* Changed ID */
    width: 280px;
    padding: 20px;
    background-color: #fff;
    border-right: 1px solid var(--border-color) !important;
    /* Remove fixed height, let content determine height */
    /* height: 100vh; */
    overflow-y: auto; /* Keep scroll if needed */
    flex-shrink: 0;
    margin-bottom: 20px; /* Add margin for wrapped layout */
}

input[type=search], .mtc-filter input[type=text], .mtc-filter select, .mtc-filter input[type="number"], .mtc-filter .select2-selection.select2-selection--single, .select2-container .select2-dropdown.select2-dropdown--below, .select:focus, .select:focus-visible {
    border: 1px solid #ccc !important;
}

#mtc-filters h3 { /* Scoped selector */
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--primary-dark);
    font-size: 1.5rem;
    text-transform: uppercase;
    border-bottom: 2px solid var(--primary-orange);
    padding-bottom: 0.5rem;
    font-family: inherit; /* Inherit from wrapper */
}

.mtc-filter { /* Changed class */
    margin-bottom: 1.5rem;
}

.mtc-filter label { /* Scoped selector */
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--primary-dark);
    font-size: 0.9rem;
}

/* Style inputs/selects within the filters */
#mtc-filters select,
#mtc-filters input[type="number"],
#mtc-filters input[type="text"] {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
    background-color: var(--primary-light);
    font-family: inherit; /* Inherit font */
}

#mtc-filters select[multiple] { /* Scoped selector */
    height: 120px;
}

#mtc-filters input[type="number"] { /* Scoped selector */
   -moz-appearance: textfield;
}
#mtc-filters input::-webkit-outer-spin-button, /* Scoped selector */
#mtc-filters input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mtc-filter-price-range { /* Changed class */
    display: flex;
    gap: 10px;
}
.mtc-filter-price-range > div {
    flex: 1;
}


/* --- Main Content Area (Card Listing) --- */
#mtc-content-area { /* Changed ID */
    flex-grow: 1;
    padding: 20px; /* Keep padding */
    /* overflow-y: auto; */ /* Let page handle scroll */
    min-width: 0; /* Prevent flex item overflow */
}

/* --- Card Listing Container --- */
@media (min-width: 764px) {
    .mtc-card-listing { /* Changed class */
        place-items: center !important;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 25px;
    } 
}

@media (max-width: 763px) {
    .mtc-card-listing { /* Changed class */
        place-items: center !important;
        display: grid;
        gap: 25px;
    } 
}



/* === CARD STYLES (Using Prefixed Outer Class, Original Inner Classes) === */

/* --- Card Container --- */
.mtc-card { /* Changed Class */
    display: flex;
    flex-direction: column;
    height: 522.5px;
    width: 332.5px;
    background-color: var(--primary-orange);
    border-radius: 255px 255px 50px 50px;
    align-items: flex-end;
    box-sizing: border-box; /* Already inherited */
    margin: 0;
    position: relative;
}

/* --- Remove Link Underlines --- */
.mtc-card a { /* Scoped selector */
    text-decoration: none;
    color: inherit;
}

/* --- Image Area Wrapper --- */
.mtc-card .card__image-area-wrapper { /* Increased specificity */
    border-radius: 275px;
    border-bottom-right-radius: 47px !important;
    height: 332.5px;
    width: 332.5px;
    min-width: 332.5px;
    min-height: 332.5px;
    background-color: #fff5ed;
    position: relative;
    box-sizing: border-box;
}

/* --- Sale Badge --- */
/* Assuming sale badge HTML is inside .mtc-card */
.mtc-card .sale-badge { /* Increased specificity */
    position: absolute;
    top: 1rem;
    right: 0;
    width: 13rem;
    height: 5rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-6deg);
}
.mtc-card .sale-badge__value { /* Updated for new structure */
    color: var(--text-white);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    margin-top: -0.2rem;
}
/* Legacy support for old structure if needed */
.mtc-card .sale-badge__content { /* Increased specificity */
    position: relative;
}
.mtc-card .sale-badge__img { /* Increased specificity */
    top: 0;
    right: 0;
    height: 13rem;
    width: 5rem;
    display: block;
}
.mtc-card .sale-badge__text { /* Increased specificity */
    color: var(--text-white);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    position: absolute;
    top: 2rem;
    right: 1.75rem;
    transform: rotate(-12deg);
}

/* --- Image Link --- */
.mtc-card .card__image-link { /* Increased specificity */
    display: block;
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 332.5px;
    height: 332.5px;
    z-index: 12;
}

/* --- Image Container Styling --- */
.mtc-card .card__image-container { /* Increased specificity */
    position: absolute;
    top: 0;
    height: 327.5px;
    width: 327.5px;
    background-color: var(--primary-dark);
    overflow: hidden;
    margin-left: 5px;
    z-index: 10;
    box-sizing: border-box;
    left: 0; /* Adjusted left position based on user request */
    border-radius: 200px;
    border-bottom-right-radius: 50px !important;
}

.mtc-card .card__image-element { /* Increased specificity */
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease-in-out;
    background-color: #cccccc;
}

/* --- Image Hover Effect --- */
.mtc-card .card__image-link:hover .card__image-element { /* Increased specificity */
    transform: scale(1.1);
}

/* --- Content Area Link --- */
.mtc-card .card__content-link { /* Increased specificity */
    display: block;
    width: 100%;
    flex-grow: 1;
    cursor: pointer;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    overflow: hidden;
    position: relative;
}

/* --- Original Bottom-Left Corner Cutout Attempt --- */
.mtc-card .card__content-link::before { /* Increased specificity */
    content: "";
    display: block;
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 50px;
    height: 50px;
    background-color: var(--primary-orange);
    border-top-right-radius: 50px;
    z-index: 15;
}

/* --- Content Area Styling --- */
.mtc-card .card__content { /* Increased specificity */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    padding: 1rem 1rem 1.5rem 1rem;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

/* --- Content Top Section (Text & Icon) --- */
.mtc-card .card__content-top { /* Increased specificity */
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: space-between;
    align-items: flex-start;
}

.mtc-card .card__text-group { /* Increased specificity */
    flex-grow: 1;
    overflow: hidden;
}

/* --- Line Clamping --- */
.mtc-card .card__title-wrapper, /* Increased specificity */
.mtc-card .card__subtitle-wrapper { /* Increased specificity */
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}

.mtc-card .card__title { /* Increased specificity */
    color: var(--primary-dark);
    font-size: 1.25rem;
    line-height: 1.75rem;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
}

.mtc-card .card__subtitle { /* Increased specificity */
    color: var(--primary-dark);
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 0;
}

.mtc-card .card__continent-icon { /* Increased specificity */
    width: 2.5rem;
    height: 2.5rem;
    display: block;
    flex-shrink: 0;
}

/* --- Content Bottom Section (Price & Link) --- */
.mtc-card .card__content-bottom { /* Increased specificity */
    color: var(--text-white);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-end;
}

/* Wrapper for duration and terms on the right side */
.mtc-card .card__right-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.mtc-card .card__price-info, /* etc */
.mtc-card .card__price-line,
.mtc-card .card__price-note,
.mtc-card .card__terms-link-text,
.mtc-card .card__price-prefix,
.mtc-card .card__price-amount {
    line-height: 1;
}

.mtc-card .card__price-line {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: flex-end;
}

.mtc-card .card__price-amount {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
}

/* Special styling for "Price on request" */
.mtc-card .card__price-amount.price-on-request {
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
}

/* Reset Button Styling */
#mtc-filters .mtc-reset-button,
button.mtc-reset-button,
button#mtc-reset-filters {
    width: 100% !important;
    padding: 12px 16px !important;
    background-color: var(--primary-orange) !important;
    color: var(--text-white) !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    white-space: nowrap !important;
    user-select: none !important;
    display: block !important;
}

#mtc-filters .mtc-reset-button:hover,
button.mtc-reset-button:hover,
button#mtc-reset-filters:hover {
    background-color: var(--primary-dark) !important;
    color: var(--text-white) !important;
    border: none !important;
}

#mtc-filters .mtc-reset-button:active,
button.mtc-reset-button:active,
button#mtc-reset-filters:active {
    background-color: var(--primary-dark) !important;
    color: var(--text-white) !important;
    border: none !important;
    transform: translateY(0) !important;
}

.mtc-card .card__price-note {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.mtc-card .card__terms-link-text {
   font-size: 0.875rem;
   text-align: right;
}

/* Trip duration display */
.mtc-card .card__duration {
   font-size: 1.125rem;
   text-align: right;
   font-weight: 700;
   color: var(--text-white);
}

/* Placeholder image style */
.mtc-card .placeholder-bg { /* Increased specificity */
    background-color: #ccc !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 1.2rem;
    font-weight: bold;
}


/* --- Responsive Adjustments --- */
/* Only apply to pages/areas that contain travel cards */
@media (max-width: 960px) { /* Adjust breakpoint maybe */
    .mtc-travel-wrapper {
       flex-direction: column; /* Stack vertically on mobile */
    }
    
    /* Show mobile filter button - only in travel cards areas */
    .mtc-travel-wrapper .mtc-mobile-filter-button {
        display: inline-flex;
    }
    
    .mtc-travel-wrapper #mtc-filters {
        display: none; /* Hide original filters on mobile */
        width: 100%;
        border-right: none;
        border-bottom: none;
        padding: 0;
        margin-bottom: 0;
        background-color: transparent;
    }
    
    /* Mobile filters inside popup don't need the h3 title */
    .mtc-filter-popup-body .mtc-filter {
        margin-bottom: 1.5rem;
    }
    
    .mtc-filter-popup-body .mtc-filter label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: var(--primary-dark);
        font-size: 0.9rem;
    }
    
    /* Style inputs/selects within mobile popup */
    .mtc-filter-popup-body select,
    .mtc-filter-popup-body input[type="number"],
    .mtc-filter-popup-body input[type="text"] {
        width: 100%;
        padding: 0.6rem 0.8rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 0.9rem;
        background-color: var(--primary-light);
        font-family: inherit;
    }
    
    .mtc-travel-wrapper #mtc-content-area {
        width: 100%; /* Ensure it takes full width below filters */
        padding: 15px; /* Reduce padding */
    }
    
    .mtc-travel-wrapper .mtc-card-listing {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Adjust min card width */
        gap: 15px;
     }
}

/* Only apply mobile card styles to travel cards areas */
@media (max-width: 480px) {
     .mtc-travel-wrapper .mtc-card-listing {
        /* Stack to single column on very small screens */
        grid-template-columns: 1fr;
        gap: 20px;
        justify-items: center; /* Center grid items horizontally */
     }
     /* Adjust card width/height on mobile if needed - only in travel areas */
     .mtc-travel-wrapper .mtc-card {
         width: 315px; /* Make card take full width */
         /* Consider making height auto or adjusting fixed height */
         height: auto;
         min-height: 500px;
     }
     /* Adjust image wrapper/container for 100% width card - only in travel areas */
     .mtc-travel-wrapper .mtc-card .card__image-area-wrapper {
         width: 100%; /* Make image area full width */
         border-radius: 275px; /* Keep larger left corner */
         border-bottom-right-radius: 47px !important; /* Keep smaller right corner */
         height: 305px;
     }
     .mtc-travel-wrapper .mtc-card .card__image-container {
         width: 100%; /* Make image area full width */
         border-radius: 200px; /* Keep larger left corner */
         border-bottom-right-radius: 40px !important; /* Keep smaller right corner */
         height: 300px;
         width: 300px;
     }
     .mtc-travel-wrapper .mtc-card .card__image-container {
         left: 0; /* Align left */
     }
     .mtc-travel-wrapper .mtc-card .card__image-link {
         width: 100%;
         height: 300px; /* Match container */
         left: 0;
     }

}

/* Fluid responsive design for devices under 400px */
@media (max-width: 400px) {
    .mtc-travel-wrapper {
        overflow-x: hidden; /* Prevent horizontal scroll */
    }

    .mtc-travel-wrapper .mtc-card-listing {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 15px; /* Consistent padding */
        justify-items: center; /* Center cards */
    }

    /* Card scales smoothly with viewport width */
    .mtc-travel-wrapper .mtc-card {
        width: min(calc(100vw - 50px), 300px) !important; /* Prevent overflow */
        max-width: none !important;
        min-width: unset !important;
        height: auto !important;
        aspect-ratio: 0.65; /* Maintain proportions */
        min-height: 420px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* Image area scales proportionally with card */
    .mtc-travel-wrapper .mtc-card .card__image-area-wrapper {
        width: 100% !important;
        min-width: unset !important;
        height: auto !important;
        aspect-ratio: 1; /* Square aspect ratio */
        max-height: 280px;
        min-height: unset !important;
        border-radius: 50% 50% 12% 12%;
        border-bottom-right-radius: 35px !important;
    }

    /* Image container scales with wrapper */
    .mtc-travel-wrapper .mtc-card .card__image-container {
        width: calc(100% - 10px) !important;
        height: calc(100% - 10px) !important;
        left: 5px;
        top: 5px;
        border-radius: 45% 45% 10% 10%;
        border-bottom-right-radius: 30px !important;
    }

    /* Image link matches container */
    .mtc-travel-wrapper .mtc-card .card__image-link {
        width: calc(100% - 10px) !important;
        height: calc(100% - 10px) !important;
        left: 5px;
        top: 5px;
    }

    /* Content area with responsive padding */
    .mtc-travel-wrapper .mtc-card .card__content {
        padding: calc(0.5rem + 0.5vw);
        gap: 0.5rem;
    }

    /* Text sizes scale with viewport */
    .mtc-travel-wrapper .mtc-card .card__title {
        font-size: calc(0.9rem + 0.5vw);
        line-height: 1.4;
    }

    .mtc-travel-wrapper .mtc-card .card__subtitle {
        font-size: calc(0.7rem + 0.4vw);
        line-height: 1.3;
    }

    /* Icon scales proportionally */
    .mtc-travel-wrapper .mtc-card .card__continent-icon {
        width: calc(1.5rem + 0.5vw);
        height: calc(1.5rem + 0.5vw);
    }

    /* Price text responsive */
    .mtc-travel-wrapper .mtc-card .card__price-amount {
        font-size: calc(1rem + 0.6vw);
    }

    .mtc-travel-wrapper .mtc-card .card__duration {
        font-size: calc(0.8rem + 0.4vw);
    }

    /* Sale badge scales with card */
    .mtc-travel-wrapper .mtc-card .sale-badge {
        width: calc(6rem + 2vw);
        height: calc(2.5rem + 0.5vw);
        top: 0.5rem;
        right: 0;
    }

    .mtc-travel-wrapper .mtc-card .sale-badge__value {
        font-size: calc(0.8rem + 0.4vw);
        margin-top: 0;
    }
}

/* === HOMEPAGE SPECIFIC STYLES === */
/* Target homepage specifically to show only one row per taxonomy section */
body.home .mtc-card-listing,
body.page-id-2 .mtc-card-listing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-template-rows: 1fr; /* Limit to one row */
    gap: 25px;
    overflow: hidden; /* Hide cards that would wrap to second row */
    max-height: 550px; /* Slightly more than card height (550px + gap) */
}

/* Responsive adjustments for homepage */
@media (max-width: 960px) {
    body.home .mtc-card-listing,
    body.page-id-2 .mtc-card-listing {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    body.home .mtc-card-listing,
    body.page-id-2 .mtc-card-listing {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 480px) {
    body.home .mtc-card-listing,
    body.page-id-2 .mtc-card-listing {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
}

/* Fix Select2 dropdown z-index issues in mobile popups */
.select2-dropdown {
    z-index: 99999 !important; /* Ensure Select2 dropdown appears above popups */
}

/* Ensure Select2 container has proper positioning in mobile popups */
.select2-container--open .select2-dropdown {
    z-index: 99999 !important;
}

/* Fix Select2 dropdown positioning issues */
.select2-container--default.select2-container--open {
    z-index: 9999 !important;
}

/* Prevent popup from moving when Select2 opens */
.mtc-filter-popup-body .select2-container {
    position: relative;
}

.mtc-filter-popup-body .select2-dropdown {
    z-index: 99999 !important;
}