/* assets/css/wp-vacances-search.css */

/* Shop Title */
.shop-title-desktop {
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center;
    display: none;
}

@media (min-width: 1024px) {
    .shop-title-desktop {
        display: block;
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

.shop-title-mobile {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    width: 100%;
    text-align: center;
    padding: 0 20px;
    margin: 0;
}

.shop-title-mobile h1 {
    color: #FFFFFF !important;
}

@media (min-width: 1024px) {
    .shop-title-mobile {
        display: none;
    }
}

.shop-main-title {
    font-family: var(--wp--preset--font-family--dm-sans, "DM Sans", sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    margin: 0;
    color: var(--wp--preset--color--bleu-sombre, #2847AF);
}

@media (min-width: 1024px) {
    .shop-main-title {
        color: var(--wp--preset--color--bleu-sombre, #2847AF);
    }
}

/* Shop Description */
.shop-category-images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    position: relative;
}


@media (max-width: 1023px) {
    .shop-category-image-main {
        aspect-ratio: 3/4;
    }
    .shop-category-image-secondary {
        display: none;
    }
    .shop-title-container h1 {
        color: #FFFFFF !important;
    }
}

.shop-category-image-main,
.shop-category-image-secondary {
    position: relative;
    overflow: hidden;
}

.shop-category-image-main img,
.shop-category-image-secondary img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

@media (min-width: 1024px) {
    .shop-category-images {
        grid-template-columns: 7fr 3fr;
        gap: 24px;
    }
}

.shop-description-container {
    padding-top: 60px;
    padding-bottom: 60px;
}

@media (min-width: 1024px) {
    .shop-description-container {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

.shop-description-text {
    color: var(--color-secondary, #1E3687);
    text-align: center;
    font-family: "Windsor Pro", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 36px */
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .shop-description-text {
        font-size: 32px;
        line-height: 150%;
        /* 48px */
    }
}

/* Filter Bar */
.woocommerce-products-header__title {
    display: none;
}

.vacances-filter-bar {
    display: flex;
    gap: 16px;
    background: #fff;
    padding: 16px 8px;
    margin-top: 0;
    margin-bottom: 40px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid #1E3687;
    border-bottom: 1px solid #1E3687;
}

.vacances-filter-bar.no-description {
    margin-top: 32px;
}

.vacances-filter-bar .filter-label {
    color: #1E3687;
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.vacances-filter-bar .filter-btn {
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #1E3687;
    border-left: 1px solid #E5E8F6;
    padding-left: .5rem;
}

.vacances-filter-bar .filter-btn.active {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

.vacances-filter-bar .more-filters-link {

    font-family: "DM Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

/* --- Sidebar (pour info, juste les styles principaux) --- */
#vacances-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
    /* hidden by default */
}

#vacances-search-overlay.open {
    display: block;
}

#vacances-search-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    /* Mobile first */
    max-width: 100%;
    background: #fff;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    #vacances-search-sidebar {
        width: 576px;
        /* Desktop width */
    }
}

#vacances-search-sidebar.open {
    transform: translateX(0);
}

.sidebar-header {
    padding: 24px;
    border-bottom: 1px solid #E5E8F6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-title {
    color: var(--Bleu-sombre, #1E3687);
    font-family: "DM Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -1.2px;
}

/* Hide back arrow on desktop */
@media (min-width: 768px) {
    #close-sidebar {
        display: none;
    }
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.sidebar-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.sidebar-footer {
    padding: 24px;
    border-top: 1px solid #E5E8F6;
    text-align: center;
}

#close-sidebar {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

#apply-filters-btn {
    background: #1E3687;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    font-family: "DM Sans";
}

/* Sections accordéon / Grid Desktop */
.filter-section {
    border-bottom: 1px solid #E5E8F6;
    padding: 24px 0;
}


.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.section-header h4 {
    margin: 0;
    color: var(--Bleu-sombre, #1E3687);
    font-family: "DM Sans";
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.section-body {
    display: none;
    /* Mobile default: closed */
    padding-top: 16px;
}

.section-body.open {
    display: block;
}

/* Reset default toggle icons style if needed */
.toggle-icon {
    font-weight: bold;
    color: #1E3687;
}

/* DESKTOP LAYOUT */
@media (min-width: 768px) {
    .filter-section {
        display: grid;
        grid-template-columns: 136px 1fr;
        gap: 16px;
        align-items: start;
    }

    .section-header {
        display: block;
        /* Remove flex used for mobile accordion */
        cursor: default;
        padding: 0;
    }

    .section-header .toggle-icon {
        display: none;
        /* Always open, no usage of icon */
    }

    .section-body {
        display: block !important;
        /* Force open */
        padding-top: 0;
    }
}

/* Exemple style controls */
.tag-checkbox,
.cat-checkbox {
    display: block;
    margin-bottom: 5px;
    cursor: pointer;
}

/* Container Layout for Checkboxes */
#levels-container,
#themes-container,
.sub-dates-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qty-btn {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 8px;
    width: 24px;
    height: 24px;
    border-radius: 16px;
    background: #E5E8F6;
    /* Light background from SVG context usually implies this, or user didn't specify background but layout */
    border: none;
    cursor: pointer;
    box-sizing: content-box;
    /* To ensure 24x24 content + padding? Or 24x24 total? The SVG is 24x24. So button content box. */
}

#filter-participants-qty {
    color: var(--Bleu-sombre, #1E3687);
    text-align: center;

    /* Regular */
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    /* 150% */
    padding: 8px 0 8px 8px;
    border: none;
    background: transparent;
    width: auto;
    max-width: 60px;
}

.participant-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.privatization-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.toggle-switch {
    width: 34px;
    height: 20px;
    position: relative;
    display: inline-block;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #2196F3;
}

/* Old slider styles removal or override? keeping generic slider just in case other things use it 
   Actually, it seems only used there in this file context. I will append new styles. */
input:checked+.slider:before {
    transform: translateX(14px);
}

/* --- Privatization Block (Category) --- */
.privatization-block-wrapper {
    display: block;
    cursor: pointer;
    background: #fff;
    /* Assumed */
    border: 1px solid #E5E8F6;
    /* Default border matching other elements? or none? Snippet doesn't specify border. */
    border-radius: 8px;
    /* Standard rounded */
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.privatization-block-wrapper input {
    display: none;
    /* Hide real checkbox */
}

.privatization-info {
    display: flex;
    align-items: center;
    gap: 1rem
}

.privatization-content {
    display: flex;
    padding: 16px 16px 16px 8px;
    /* From spec */
    gap: 16px;
    /* Spec says 24px gap in "Bloc principal"? But layout might be tight. Let's try 16-24. */
    width: 100%;
    box-sizing: border-box;
}

/* Icon * */
.privatization-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* "Icone arrondi" implies circle? Snippet image shows circle. */
    background: #A1A6BE;
    flex-shrink: 0;
    transition: background 0.3s ease;
    transform: translateY(10px)
}

/* Active State */
.privatization-block-wrapper input:checked~.privatization-content .privatization-icon {
    background: #FE5C42;
    /* Active color */
}

/* Text */
.privatization-text {
    flex: 1;
}

.privatization-text p {
    color: var(--Bleu-sombre, #1E3687);
    font-family: "DM Sans";
    font-size: 16px;
    font-style: normal;
    /* Bold looks better usually, snippet didn't specify weight but "Regular" comment was there? Image looked boldish. Let's stick to Regular if spec says so. */
    line-height: 24px;
}

/* Image */
.privatization-image {
    width: 95px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}

/* --- Native Range Slider --- */
.range-slider-container {
    position: relative;
    width: 100%;
    height: 54px;
    /* Increased to fit values at bottom */
    margin-top: 10px;
}

.slider-track {
    width: 100%;
    height: 6px;
    background: #E5E8F6;
    /* Default neutral color */
    position: absolute;
    top: 25px;
    /* Fixed top position */
    transform: translateY(-50%);
    border-radius: 3px;
    z-index: 1;
}

/* Overlapping Inputs */
.range-slider-container input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    /* Make input transparent to clicks */
    -webkit-appearance: none;
    z-index: 2;
    height: 10px;
    top: 25px;
    /* Fixed top position */
    transform: translateY(-50%);
    background: none;
    /* Transparent background */
    margin: 0;
}

/* Thumbs - Webkit */
.range-slider-container input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    /* Re-enable clicking on thumb */
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: #FE5C42;
    /* Secondary color */
    border: none;
    /* Removed white border */
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin-top: -9px;
    /* (24px - 6px) / 2 * -1 = -9px. Requires track height 6px */
}

/* Track - Webkit - Required for proper vertical align calculation */
.range-slider-container input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: transparent;
    /* Track is visualized by .slider-track div */
    border: none;
}

/* Thumbs - Moz */
.range-slider-container input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 24px;
    height: 24px;
    background: #FE5C42;
    border: none;
    /* Removed white border */
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Track - Moz */
.range-slider-container input[type="range"]::-moz-range-track {
    width: 100%;
    height: 6px;
    background: transparent;
    border: none;
}

/* Values Display */
.range-slider-container+.values {
    display: flex;
    justify-content: space-between;
}

.range-slider-container+.values span {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    border: 1px solid var(--Liseret, #E5E8F6);
    background: #FFF;

    font-family: "DM Sans";
    font-size: 14px;
    font-weight: 400;
    color: #1E3687;
}

.privatization-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.small-desc {
    font-size: 12px;
    color: #777;
    margin: 0;
}

/* Standard Close Button */
.btn-close-standard {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    background: var(--Neutral-grey-1, #F8F9FC);
    /* Fallback #F8F9FC if var not defined */
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-close-standard:hover {
    background: #E5E8F6;
}

.budget-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rslider-container-box {
    flex: 1;
}

/* --- Flatpickr Override for Hozen Theme --- */
.flatpickr-calendar {
    font-family: "DM Sans", sans-serif !important;
    border-radius: 12px !important;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #E5E8F6 !important;
    margin-top: 8px;
    z-index: 99999 !important;
    /* Force above sidebar */
}

.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowTop:before {
    display: none !important;
    /* Remove arrow for cleaner look */
}

/* CSS for Flatpickr - Headers */
.flatpickr-current-month {
    font-size: 100%;
    /* Reset default scaling */
    line-height: inherit;
    font-weight: 700;
    color: #1E3687;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Ensure full height for vertical alignment */
    padding: 0;
}

.flatpickr-months {
    background: #fff;
    border-radius: 12px 12px 0 0;
    padding: 10px;
    align-items: center;
    /* Vertical center alignment for flex children (arrows) */
    position: relative;
}

/* Selects & Inputs (Month/Year) - 12px */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-family: "DM Sans", sans-serif;
    font-size: 12px !important;
    font-weight: 700;
    color: #1E3687;
    padding: 0 4px;
    /* Slight padding */
    border: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Ensure hover states are clean */
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: transparent;
}

/* Alignment of Arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    position: absolute;
    top: 50% !important;
    /* Center vertical */
    transform: translateY(-50%);
    height: 30px !important;
    /* Fixed height */
    width: 30px !important;
    /* Fixed width */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100 !important;
    /* High Z-index */
}

.flatpickr-prev-month {
    left: 10px !important;
}

.flatpickr-next-month {
    right: 10px !important;
}

/* Arrows SVG - Size reverted */
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    /* width: 8px !important; -- REVERTED */
    /* height: 8px !important; -- REVERTED */
    fill: #1E3687 !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: #FE5C42 !important;
}

@media (min-width: 768px) {
    #sidebar-filter-date {
        width: 164px !important;
    }
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: #1E3687;
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: #1E3687;
}

.flatpickr-weekdays {
    background: #fff;
}

span.flatpickr-weekday {
    color: #A1A6BE;
    font-weight: 600;
    font-size: 14px;
}

.flatpickr-day {
    color: #1E3687;
    border-radius: 8px !important;
    font-weight: 500;
}

.flatpickr-day.today {
    border-color: #E5E8F6;
    background: #F8F9FC;
    color: #1E3687;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: #FE5C42 !important;
    border-color: #FE5C42 !important;
    color: #fff !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #cbd5e0 !important;
    /* Lighter grey for disabled */
    background: transparent !important;
    border-color: transparent !important;
    opacity: 0.5;
}

/* Corrections Flèches */
.flatpickr-prev-month,
.flatpickr-next-month {
    z-index: 10 !important;
    /* Force on top */
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: #1E3687 !important;
    /* Force fill */
}

.flatpickr-prev-month svg path,
.flatpickr-next-month svg path {
    fill: inherit !important;
    /* Ensure path inherits if it has hardcoded fill */
}

/* Footer Buttons for Flatpickr */
/* Footer Buttons for Flatpickr */
/* Footer Buttons for Flatpickr */
.flatpickr-custom-footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 10px 10px 15px 10px;
    border-top: 1px solid #E5E8F6;
    margin-top: 5px;
}

/* Shared Styles for Buttons */
.flatpickr-cancel-btn,
.flatpickr-validate-btn {
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    /* 200% */
    letter-spacing: 2.4px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: background 0.3s;
}

.flatpickr-cancel-btn {
    background: transparent;
    color: var(--Bleu-sombre, #1E3687);
    text-decoration: none;
}

.flatpickr-validate-btn {
    display: flex;
    padding: 4px 12px;
    align-items: center;
    gap: 16px;
    /* Kept from request, though likely unused unless icon added */
    border-radius: 8px;
    background: var(--rouge-h, #FE5C42);
    color: #fff;
    backdrop-filter: blur(8px);
}

/* Center 'No Products Found' message */
.woocommerce-info.no-products-found,
.woocommerce-info.cart-empty,
.hozen-no-products-info {
    text-align: center;
    width: 100%;
    margin: 40px auto; /* Increased margin for better spacing */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px !important;
    background-color: transparent !important; /* Make it cleaner */
    border: none !important;
    color: var(--Bleu-sombre, #1E3687);
    font-family: "DM Sans";
    font-size: 18px;
    box-shadow: none !important;
}

.woocommerce-info.no-products-found::before,
.woocommerce-info.cart-empty::before,
.hozen-no-products-info::before {
    display: none !important;
}

.flatpickr-validate-btn:hover {
    background: #e04b34;
}