/* -------------------------------------------------------------------
   Base
   ------------------------------------------------------------------- */

.caf-filter-wrap * {
    box-sizing: border-box;
}

.caf-filter-wrap a,
.caf-results a {
    text-decoration: none;
}

.caf-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 16px;
    border-radius: 6px;
}

.caf-field {
    flex: 1 1 200px;
    min-width: 0; /* let flex children shrink below their content width */
}

.caf-field-submit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* -------------------------------------------------------------------
   Inputs, selects, and icons
   ------------------------------------------------------------------- */

.caf-filter-bar input[type="text"],
.caf-filter-bar select {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #d5d8dc;
    border-radius: 4px;
    font-size: 15px;
    background-color: #fff;
    line-height: 44px;
}

.caf-filter-bar input[type="text"]:focus,
.caf-filter-bar select:focus {
    outline: none;
    border-color: #4caf50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15);
}

/* Wraps an input/select together with a leading icon and (for the
   keyword field) a trailing clear button, so the icon and any button
   sit inside the field's own padding rather than overlapping the text. */
.caf-input-icon-wrap {
    position: relative;
}

.caf-input-icon-wrap::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: 0.55;
}

.caf-input-icon-wrap input[type="text"] {
    padding-left: 40px;
    padding-right: 36px; /* room for the clear button */
}

/* Custom dropdown arrow, inset with real spacing so it never sits
   flush against the field's edge, plus room on the left for the icon. */
.caf-input-icon-wrap select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 40px;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

.caf-icon-search::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

.caf-icon-location::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.caf-icon-briefcase::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

.caf-icon-tag::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2H2v10l9.29 9.29a1 1 0 0 0 1.42 0l8.29-8.29a1 1 0 0 0 0-1.42Z'/%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3C/svg%3E");
}

.caf-clear-keyword {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.caf-clear-keyword:hover {
    background: #f1f1f1;
    color: #333;
}

/* -------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------- */

.caf-search-btn {
    height: 44px;
    padding: 0 24px;
    background: #4caf50;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
}

.caf-search-btn:hover {
    background: #43a047;
}

.caf-reset-btn {
    height: 44px;
    padding: 0 14px;
    background: transparent;
    color: #667;
    border: none;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}

.caf-reset-btn:hover {
    color: #333;
}

/* -------------------------------------------------------------------
   Results grid
   ------------------------------------------------------------------- */

.caf-results {
    margin-top: 24px;
    transition: opacity 0.15s ease;
}

.caf-results.caf-loading {
    opacity: 0.5;
}

.caf-results-grid {
    display: grid;
    grid-template-columns: repeat(var(--caf-cols-desktop, 4), 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .caf-results-grid {
        grid-template-columns: repeat(var(--caf-cols-tablet, 2), 1fr);
    }
}

@media (max-width: 600px) {
    .caf-results-grid {
        grid-template-columns: repeat(var(--caf-cols-mobile, 1), 1fr);
    }
}

.caf-result-card {
    border: 1px solid #eaeaea;
    border-radius: 6px;
    padding: 16px;
}

.caf-result-thumb img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}

.caf-no-results,
.caf-empty-state {
    padding: 24px;
    text-align: center;
    color: #666;
}

/* Elementor Loop templates render inside the same column grid as the
   default cards. Adjust the column settings in the plugin's Settings
   page (or override these CSS vars in your theme) to change layout. */
.caf-results-grid--elementor .caf-loop-item {
    height: 100%;
}

/* -------------------------------------------------------------------
   Pagination
   ------------------------------------------------------------------- */

.caf-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
}

.caf-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d5d8dc;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
}

.caf-page-link:hover {
    border-color: #4caf50;
    color: #4caf50;
}

.caf-page-link.caf-page-current {
    background: #4caf50;
    border-color: #4caf50;
    color: #fff;
    cursor: default;
}

.caf-page-ellipsis {
    padding: 0 6px;
    color: #999;
}

/* -------------------------------------------------------------------
   Hero variant
   ------------------------------------------------------------------- */

.caf-filter-wrap--hero .caf-filter-bar {
    max-width: 900px;
}

/* -------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */

@media (max-width: 782px) {
    /* Stack fields, but each one keeps a single, consistent gap rather
       than the flex-basis calculations that were producing uneven,
       oversized spacing on narrow screens. */
    .caf-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }

    .caf-field,
    .caf-field-submit {
        flex: 1 1 auto;
        width: 100%;
    }

    .caf-field-submit {
        flex-direction: column;
        gap: 8px;
    }

    .caf-search-btn,
    .caf-reset-btn {
        width: 100%;
    }

    .caf-pagination {
        gap: 4px;
    }

    .caf-page-link {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: 13px;
    }
}