/* ── JCF Sermon Filter ───────────────────────────────────────────────────── */

/* Two-row stacked layout */
.jcf-sermon-filter__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jcf-sermon-filter__row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

/* ── Row 1 proportions ───────────────────────────────────────────────────── */

.jcf-sermon-filter__field--search    { flex: 3 1 0; min-width: 0; }
.jcf-sermon-filter__field--daterange { flex: 2 1 0; min-width: 0; }
.jcf-sermon-filter__field--order     { flex: 1.5 1 0; min-width: 0; }

/* ── Row 2: equal-width taxonomy dropdowns ───────────────────────────────── */

.jcf-sermon-filter__row--taxonomies .jcf-sermon-filter__field--select {
    flex: 1 1 0;
    min-width: 0;
}

/* ── Shared input / select base ──────────────────────────────────────────── */

.jcf-sermon-filter__input,
.jcf-sermon-filter__select {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    font-size: .9375em;
    background-color: #fff;
    color: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s;
}

.jcf-sermon-filter__input:focus,
.jcf-sermon-filter__select:focus {
    border-color: #888;
}

/* ── Search: magnifying glass icon ──────────────────────────────────────── */

.jcf-sermon-filter__field--search .jcf-sermon-filter__input {
    padding-left: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 18px;
}

/* ── Select: custom dropdown arrow ──────────────────────────────────────── */

.jcf-sermon-filter__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23555' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    cursor: pointer;
}

/* ── Date range: flatpickr trigger input ─────────────────────────────────── */

.jcf-sermon-filter__daterange-trigger {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    cursor: pointer;
}

/* ── Flatpickr calendar overrides ────────────────────────────────────────── */

/* Soften the default flatpickr calendar border/radius to match our inputs */
.flatpickr-calendar {
    border-radius: 8px;
    border: 1px solid #d4d4d4;
    box-shadow: 0 4px 20px rgba(0,0,0,.10);
    font-family: inherit;
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: transparent;
}

/* In-range day highlight — use a light tint so selected range is clear */
.flatpickr-day.inRange {
    background: #e8f0fe;
    border-color: #e8f0fe;
    box-shadow: -5px 0 0 #e8f0fe, 5px 0 0 #e8f0fe;
}

/* ── Label (opt-in, shown above a field) ─────────────────────────────────── */

.jcf-sermon-filter__label {
    display: block;
    font-size: .8125em;
    font-weight: 600;
    margin-bottom: 4px;
}

/* ── Submit button ──────────────────────────────────────────────────────────
   Hidden by default so JS-enhanced pages never show it. The <noscript> block
   in the widget template overrides this for browsers with JS disabled.       */

.jcf-sermon-filter__submit {
    display: none;
    height: 46px;
    padding: 0 20px;
    border: none;
    border-radius: 6px;
    font-size: .9375em;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

/* ── Clear link ──────────────────────────────────────────────────────────── */

.jcf-sermon-filter__clear {
    font-size: .875em;
    text-decoration: none;
    white-space: nowrap;
    opacity: .7;
}

.jcf-sermon-filter__clear:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .jcf-sermon-filter__row {
        flex-wrap: wrap;
    }

    .jcf-sermon-filter__field--search {
        flex: 1 1 100%;
    }

    .jcf-sermon-filter__field--daterange,
    .jcf-sermon-filter__field--order {
        flex: 1 1 calc(50% - 5px);
        max-width: calc(50% - 5px);
    }

    .jcf-sermon-filter__row--taxonomies .jcf-sermon-filter__field--select {
        flex: 1 1 calc(50% - 5px);
        max-width: calc(50% - 5px);
    }
}