/**
 * MATALZA - Override CSS pour thème WoodMart et autres
 * Widget de recherche sur 2 LIGNES pour un affichage propre
 * 
 * @package Matalza
 */

/* ============================================================
   CACHER LE TITRE DE PAGE - UNIQUEMENT PAGES HÉBERGEMENT
   ============================================================ */

/* Page single hébergement uniquement (URL /hebergement/xxx/) */
body.single-mtz_accommodation h1.entry-title,
body.single-mtz_accommodation h1.page-title,
body.single-mtz_accommodation .entry-header,
body.single-mtz_accommodation header.entry-header,
body.single-mtz_accommodation .page-header,
body.single-mtz_accommodation .ast-archive-description,
body.single-mtz_accommodation .elementor-page-title,
body.single-mtz_accommodation .elementor-widget-theme-post-title,
body.single-mtz_accommodation .page-title-default,
body.single-mtz_accommodation .wd-page-title,
body.single-mtz_accommodation .ast-title-header-display {
    display: none !important;
}

/* ============================================================
   VARIABLES
   ============================================================ */

:root {
    --mtz-primary: #888C6C;
    --mtz-primary-hover: #6e7256;
    --mtz-bg: #ffffff;
    --mtz-bg-field: #F5F5F0;
    --mtz-text: #1f2937;
    --mtz-text-light: #6b7280;
    --mtz-border: #e5e7eb;
    --mtz-radius: 10px;
}

/* ============================================================
   WIDGET DE RECHERCHE - RESET COMPLET
   ============================================================ */

.mtz-search-widget:not(.mtz-search-hero),
body .mtz-search-widget:not(.mtz-search-hero),
.woodmart-container .mtz-search-widget:not(.mtz-search-hero),
.elementor-widget-container .mtz-search-widget:not(.mtz-search-hero),
.entry-content .mtz-search-widget:not(.mtz-search-hero),
.site-content .mtz-search-widget:not(.mtz-search-hero),
#content .mtz-search-widget:not(.mtz-search-hero),
main .mtz-search-widget:not(.mtz-search-hero),
article .mtz-search-widget:not(.mtz-search-hero),
div.mtz-search-widget:not(.mtz-search-hero) {
    all: unset !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 24px !important;
    background: var(--mtz-bg) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.mtz-search-widget *,
.mtz-search-widget *::before,
.mtz-search-widget *::after {
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/* ============================================================
   FORMULAIRE - LAYOUT 2 LIGNES
   ============================================================ */

.mtz-search-widget form,
.mtz-search-widget .mtz-search-form,
.mtz-search-widget form.mtz-search-form {
    all: unset !important;
    display: block !important;
    width: 100% !important;
}

.mtz-search-widget .mtz-search-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

/* ============================================================
   CHAMPS - STYLE UNIFORME
   ============================================================ */

.mtz-search-widget .mtz-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Ligne 1: Dates prend toute la largeur */
.mtz-search-widget .mtz-field.mtz-field-dates {
    grid-column: 1 / -1 !important;
}

/* Ligne 2: Voyageurs et Type côte à côte */
.mtz-search-widget .mtz-field.mtz-field-guests,
.mtz-search-widget .mtz-field.mtz-field-type {
    grid-column: span 1 !important;
}

/* ============================================================
   LABELS
   ============================================================ */

.mtz-search-widget .mtz-field label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--mtz-text) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mtz-search-widget .mtz-field-icon {
    font-size: 14px !important;
    line-height: 1 !important;
}

.mtz-search-widget .mtz-field-label {
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* ============================================================
   DATE RANGE PICKER
   ============================================================ */

.mtz-search-widget .mtz-date-range-picker {
    display: flex !important;
    align-items: center !important;
    background: var(--mtz-bg-field) !important;
    border-radius: var(--mtz-radius) !important;
    padding: 0 !important;
    border: none !important;
    height: 50px !important;
    overflow: hidden !important;
}

.mtz-search-widget .mtz-date-input,
.mtz-search-widget input.mtz-date-input,
.mtz-search-widget .mtz-date-range-picker input {
    flex: 1 !important;
    height: 50px !important;
    padding: 0 16px !important;
    border: none !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--mtz-text) !important;
    text-align: center !important;
    cursor: pointer !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.mtz-search-widget .mtz-date-input::placeholder {
    color: var(--mtz-text-light) !important;
    opacity: 1 !important;
}

.mtz-search-widget .mtz-date-separator {
    color: var(--mtz-text-light) !important;
    font-size: 16px !important;
    padding: 0 8px !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   SELECTEUR DE VOYAGEURS
   ============================================================ */

.mtz-search-widget .mtz-guests-selector {
    position: relative !important;
    width: 100% !important;
}

.mtz-search-widget .mtz-guests-trigger {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 16px !important;
    background: var(--mtz-bg-field) !important;
    border-radius: var(--mtz-radius) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--mtz-text) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.mtz-search-widget .mtz-guests-trigger:hover {
    background: #e9e9e4 !important;
}

.mtz-search-widget .mtz-dropdown-arrow {
    font-size: 10px !important;
    color: var(--mtz-text-light) !important;
    transition: transform 0.2s ease !important;
}

.mtz-search-widget .mtz-guests-selector.active .mtz-dropdown-arrow {
    transform: rotate(180deg) !important;
}

/* Dropdown */
.mtz-search-widget .mtz-guests-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--mtz-bg) !important;
    border-radius: var(--mtz-radius) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 16px !important;
    z-index: 9999 !important;
    display: none !important;
    border: 1px solid var(--mtz-border) !important;
}

.mtz-search-widget .mtz-guests-selector.active .mtz-guests-dropdown,
.mtz-search-widget .mtz-guests-dropdown.active {
    display: block !important;
}

.mtz-search-widget .mtz-guest-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--mtz-border) !important;
}

.mtz-search-widget .mtz-guest-row:last-of-type {
    border-bottom: none !important;
}

.mtz-search-widget .mtz-guest-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.mtz-search-widget .mtz-guest-type {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--mtz-text) !important;
}

.mtz-search-widget .mtz-guest-desc {
    font-size: 12px !important;
    color: var(--mtz-text-light) !important;
}

.mtz-search-widget .mtz-guest-counter {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.mtz-search-widget .mtz-counter-btn {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid var(--mtz-border) !important;
    background: var(--mtz-bg) !important;
    font-size: 18px !important;
    color: var(--mtz-text) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.mtz-search-widget .mtz-counter-btn:hover {
    background: var(--mtz-primary) !important;
    border-color: var(--mtz-primary) !important;
    color: #fff !important;
}

.mtz-search-widget .mtz-guest-counter input {
    all: unset !important;
    width: 24px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--mtz-text) !important;
}

.mtz-search-widget .mtz-guests-done {
    all: unset !important;
    display: block !important;
    width: 100% !important;
    padding: 12px !important;
    margin-top: 12px !important;
    background: var(--mtz-primary) !important;
    color: #fff !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* ============================================================
   SELECT TYPE
   ============================================================ */

.mtz-search-widget .mtz-select,
.mtz-search-widget select.mtz-select,
.mtz-search-widget select {
    all: unset !important;
    display: block !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 40px 0 16px !important;
    background-color: var(--mtz-bg-field) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    border-radius: var(--mtz-radius) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--mtz-text) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ============================================================
   BOUTON RECHERCHER - PLEINE LARGEUR
   ============================================================ */

.mtz-search-widget .mtz-search-submit {
    width: 100% !important;
}

.mtz-search-widget .mtz-btn-search,
.mtz-search-widget button.mtz-btn-search,
.mtz-search-widget .mtz-search-submit button {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 50px !important;
    background: var(--mtz-primary) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: var(--mtz-radius) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.mtz-search-widget .mtz-btn-search:hover {
    background: var(--mtz-primary-hover) !important;
}

.mtz-search-widget .mtz-btn-icon {
    font-size: 18px !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 500px) {
    .mtz-search-widget {
        padding: 16px !important;
    }
    
    .mtz-search-widget .mtz-search-fields {
        grid-template-columns: 1fr !important;
    }
    
    .mtz-search-widget .mtz-field.mtz-field-dates,
    .mtz-search-widget .mtz-field.mtz-field-guests,
    .mtz-search-widget .mtz-field.mtz-field-type {
        grid-column: 1 !important;
    }
}

/* ============================================================
   FLATPICKR
   ============================================================ */

.flatpickr-calendar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--mtz-primary) !important;
    border-color: var(--mtz-primary) !important;
}

/* ============================================================
   FORCER POUR WOODMART
   ============================================================ */

.woodmart-container .mtz-search-widget input,
.woodmart-container .mtz-search-widget select,
.woodmart-container .mtz-search-widget button,
body.flavor-flavor .mtz-search-widget input,
body.flavor-flavor .mtz-search-widget select,
body.flavor-flavor .mtz-search-widget button {
    height: 50px !important;
    line-height: 50px !important;
    font-size: 15px !important;
}

/* ============================================================
   STYLE HERO - CONTENEUR TRANSPARENT
   ============================================================ */

.mtz-search-widget.mtz-search-hero,
body .mtz-search-widget.mtz-search-hero,
.elementor-widget-container .mtz-search-widget.mtz-search-hero,
div.mtz-search-widget.mtz-search-hero {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.mtz-search-widget.mtz-search-hero .mtz-field,
body .mtz-search-widget.mtz-search-hero .mtz-field {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}