/* =====================================================================
   DIRECTORY AJAX FILTER — Front-end styles v4.3
   All colours are driven by CSS custom-properties (variables).
   FIXES: Vertical alignment + Single column on mobile.
   ===================================================================== */

/* ── Wrapper ── */
#daf-wrap {
    font-family: inherit;
}

/* ── Filter bar ── */
#daf-filter-bar {
    background:    var(--daf-bar-bg,    #f0f4f8);
    border:        1px solid var(--daf-bar-border, #d0dce8);
    border-radius: var(--daf-bar-radius, 10px);
    padding:       var(--daf-bar-padding, 18px) calc(var(--daf-bar-padding, 18px) + 2px);
    margin-bottom: 28px;
}

/* ── Row of selects + reset button ── */
.daf-selects {
    display:         flex !important;
    flex-wrap:       wrap;
    gap:             12px;
    align-items:     stretch !important; 
}

/* ── Select wrapper ── */
.daf-select-wrap {
    position:        relative;
    display:         flex !important;
    align-items:     center;
    flex:            1 1 190px;
    min-width:       160px;
    margin:          0 !important;
}

/* ── Dropdown <select> ── */
.daf-select {
    flex:            1;
    height:          42px !important;
    min-height:      42px !important;
    padding:         0 36px 0 38px !important; 
    margin:          0 !important;
    border:          1px solid var(--daf-select-border, #b0c4d8);
    border-radius:   var(--daf-select-radius, 6px);
    background-color: var(--daf-select-bg, #fff);
    color:           var(--daf-select-color, #333);
    font-size:       var(--daf-select-font-size, 14px);
    cursor:          pointer;
    appearance:      none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: right 12px center !important;
    box-sizing:      border-box !important;
    transition:      border-color .2s, box-shadow .2s;
}

.daf-select:focus {
    outline:    none;
    border-color: var(--daf-select-focus, #5b8dd9);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--daf-select-focus, #5b8dd9) 18%, transparent);
}

/* ── Icon Fix ── */
.daf-select-wrap .daf-select-icon {
    position:       absolute;
    left:           12px;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      16px;
    pointer-events: none;
    z-index:        5;
    display:        flex;
    align-items:    center;
    justify-content: center;
    margin:         0 !important;
}

.daf-select-wrap .daf-select-icon-img {
    width:      18px;
    height:     18px;
    object-fit: contain;
}

/* ── Reset button ── */
#daf-reset {
    height:          42px !important;
    min-height:      42px !important;
    padding:         0 18px !important;
    margin:          0 !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    background:      var(--daf-reset-bg,     #1a56db);
    color:         var(--daf-reset-color,  #fff);
    border:        1px solid var(--daf-reset-border, #1a56db);
    border-radius: var(--daf-reset-radius, 6px);
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    all .2s;
    white-space:   nowrap;
    flex-shrink:   0;
    box-sizing:    border-box !important;
    line-height:   1 !important; 
}

#daf-reset:hover {
    background: var(--daf-reset-hover-bg,    #c0392b);
    color:      var(--daf-reset-hover-color, #fff);
    border-color: var(--daf-reset-hover-bg,  #c0392b);
}

/* ── Active filter tags ── */
#daf-active-tags {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    margin-top: 12px;
}

.daf-tag {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    background:    var(--daf-tag-bg,     #5b8dd9);
    color:         var(--daf-tag-color,  #fff);
    border-radius: var(--daf-tag-radius, 20px);
    padding:       4px 10px 4px 12px;
    font-size:     13px;
    font-weight:   500;
    animation:     daf-pop .15s ease;
}

@keyframes daf-pop {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.daf-tag-remove {
    background:  none;
    border:      none;
    color:       rgba(255,255,255,.8);
    cursor:      pointer;
    font-size:   17px;
    line-height: 1;
    padding:     0 0 0 2px;
    margin:      0;
    transition:  color .15s;
}

.daf-tag-remove:hover { color: #fff; }

/* ── Results area ── */
#daf-results {
    min-height: 80px;
    transition: opacity .25s;
}

/* ── Loading spinner ── */
.daf-loading {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         50px 20px;
    gap:             14px;
    color:           #666;
    font-size:       15px;
}

.daf-spinner {
    width:        38px;
    height:       38px;
    border:       4px solid #d0dff0;
    border-top-color: var(--daf-spinner, #5b8dd9);
    border-radius: 50%;
    animation:    daf-spin .7s linear infinite;
}

@keyframes daf-spin { to { transform: rotate(360deg); } }

/* ── Message states ── */
.daf-no-result,
.daf-error {
    text-align:  center;
    padding:     40px 30px;
    color:       #888;
    font-style:  italic;
    font-size:   15px;
    border:      2px dashed #ddd;
    border-radius: 8px;
}

.daf-error { color: #c0392b; border-color: #f5c6c6; }

/* ── Result count banner ── */
.daf-count {
    margin-bottom: 20px;
    font-weight:   700;
    font-size:     15px;
    color:         var(--daf-count-color, #1a56db);
}

/* ── Desktop grid (Default) ── */
.daf-listings-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   24px;
    align-items:           stretch;
}

/* ── Listing card ── */
.daf-card {
    border:        2px solid var(--daf-card-border, #000);
    border-radius: var(--daf-card-radius, 12px);
    background:    var(--daf-card-bg, #fff);
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
    box-shadow:    0 2px 8px rgba(0,0,0,.06);
    transition:    box-shadow .2s, transform .2s;
}

.daf-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    transform:  translateY(-2px);
}

.daf-card-top {
    display:     flex;
    gap:         16px;
    align-items: flex-start;
    padding:     18px 18px 0;
}

.daf-card-img {
    flex:      0 0 120px;
    max-width: 120px;
}

.daf-card-thumb {
    width:         100%;
    height:        auto;
    border-radius: 6px;
    display:       block;
}

.daf-availability-container {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.daf-avail-title {
    margin:         0;
    font-size:      12px;
    font-weight:    800;
    color:          #000;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.avail-date-btn {
    background:    var(--daf-avail-date-bg,    #32333F);
    color:         var(--daf-avail-date-color, #fff);
    padding:       8px 10px;
    border-radius: 6px;
    font-size:     13px;
    text-align:    center;
    font-weight:   700;
    min-height:    20px;
}

.avail-popup-btn {
    background:    var(--daf-avail-popup-bg,    #1a56db);
    color:         var(--daf-avail-popup-color, #fff);
    border:        none;
    padding:       10px 12px;
    border-radius: 6px;
    cursor:        pointer;
    font-size:     12px;
    font-weight:   700;
    line-height:   1.3;
    transition:    opacity .2s;
}

.avail-popup-btn:hover {
    background: var(--daf-avail-popup-hover-bg,    #1040b0) !important;
    color:      var(--daf-avail-popup-hover-color,  #ffffff) !important;
}

.daf-card-body {
    padding:    14px 18px 18px;
    border-top: 1px solid #eee;
    margin-top: 14px;
    flex:       1;
}

.daf-card-name {
    margin:      0 0 8px;
    font-size:   17px;
    font-weight: 700;
}

.daf-card-name a {
    color:           var(--daf-card-name-color, #f39c12);
    text-decoration: none;
}

.daf-card-name a:hover { text-decoration: underline; }

.daf-card-excerpt {
    font-size:   13px;
    color:       #666;
    margin-bottom: 10px;
    line-height: 1.5;
}

.daf-card-meta {
    font-size:   13px;
    color:       #333;
    margin-bottom: 4px;
}
/* --- "Voir nos alternatives" Button --- */
.avail-alt-btn {
    background-color: var(--daf-alt_btn_bg, #1a56db) !important;
    color: var(--daf-alt_btn_text, #fff) !important;
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    margin-top: 10px;
	font-size:     12px;
    transition: all 0.3s ease !important;
    border: none;
}

/* --- FIX: Hover for Alternatives Button --- */
.avail-alt-btn:hover {
    background-color: var(--daf-alt_btn_hover_bg, #1040b0) !important;
    color: var(--daf-alt_btn_hover_text, #fff) !important;
}

/* --- FIX: Hover for Reset and Popup Buttons --- */
#daf-reset:hover {
    background: var(--daf-reset-hover-bg, #1040b0) !important;
    color: var(--daf-reset-hover-color, #fff) !important;
}

.avail-popup-btn:hover {
    background: var(--daf-avail-popup-hover-bg,   #1040b0) !important;
    color:      var(--daf-avail-popup-hover-color, #ffffff) !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE BREAKPOINTS (Mobile Fix)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Mobile/Tablet (≤ 768px) ── */
@media (max-width: 768px) {
    /* Stack filters vertically */
    .daf-selects {
        flex-direction: column;
        gap: 10px;
    }

    .daf-select-wrap,
    .daf-select,
    #daf-reset {
        width:  100% !important;
        flex:   unset;
    }

    /* FORCES ONE COLUMN ON MOBILE */
    .daf-listings-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .daf-card-top {
        flex-direction: row;
        gap: 12px;
    }

    .daf-card-img {
        flex:      0 0 90px;
        max-width: 90px;
    }
}

/* ── Extra Small Devices (≤ 480px) ── */
@media (max-width: 480px) {
    #daf-filter-bar {
        padding: 12px;
    }

    .daf-card-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .daf-card-img {
        flex:      unset;
        max-width: 100%;
        width:     100%;
    }

    .daf-availability-container {
        align-items: center;
        width: 100%;
    }
}