/* Fewo-Flow Anpassungen */

/* ==========================================================================
   Widget Area Header
   ========================================================================== */
.page-template-rolfs-fewo-buchen .widget-area-header,
.ferienwohnungen-template-default .widget-area-header {
    display: none;
}

.widget-area-header {
    margin-bottom: 0;
}

/* ==========================================================================
   Mobile Searchbar
   ========================================================================== */
.mobile-searchbar .sfm__title {
    font-size: 30px;
}

.mobile-searchbar .sfm__stack {
    grid-template-columns: 1fr 1fr 240px;
}

.mobile-searchbar .sfm__field {
    padding: 8px 12px;
    max-height: 44px;
    width: 100%;
}

.mobile-searchbar .sfm__input {
    width: 50%;
}

.mobile-searchbar .sf__submit .sf__btn {
    width: 100%;
    height: 44px;
    min-height: 44px;
}

@media (max-width: 1279px) {
    .mobile-searchbar .sfm__wrap {
        padding: 0;
        width: 100%;
    }
}

@media (max-width: 991px) {
    .mobile-searchbar .sfm__stack {
        grid-template-columns: 1fr 1fr;
    }

    .mobile-searchbar .sf__submit {
        grid-column: 1 / -1;
        /* über beide Spalten */
        justify-self: center;
        width: 240px;
    }
}

@media (max-width: 619px) {
    .mobile-searchbar .sfm__stack {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .mobile-searchbar .sfm__field {
        max-width: 320px;
        min-width: 280px;
    }
}

/* ==========================================================================
   Favoriten (Herz-Icon)
   ========================================================================== */
.posts__fav.is-active svg .heart-fill {
    fill: var(--color-primary);
}

.posts__fav.is-active svg .heart-stroke {
    stroke: #fff !important;
}

.posts__fav:hover {
    box-shadow: none;
}

@media (max-width: 1600px) {

    .posts__fav.prop__fav,
    .posts__fav.prop__fav.is-active {
        margin-right: 0;
    }
}

/* ==========================================================================
   Archiv / Grid
   ========================================================================== */
.archive-props .feature {
    width: 100%;
}

@media (max-width: 900px) {
    .archive-props .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .archive-props .grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 1500px) {

    .prop-grid,
    .controls__grid,
    .grid,
    .container.backlink-wrapper {
        max-width: 1492px !important;
    }
}

/* ==========================================================================
   Backlink & Filter-Buttons
   ========================================================================== */
.backlink-wrapper {
    padding-top: 2rem;
    padding-bottom: 20px;
}

@media (min-width: 901px) {
    .backlink-wrapper {
        padding-top: 3rem;
    }
}

.backlink,
.btn-filter {
    transition: box-shadow 0.3s ease;
}

.backlink:hover,
.backlink:focus,
.backlink:active,
.btn-filter:hover,
.btn-filter:focus,
.btn-filter:active {
    text-decoration: none;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.33);
}

.archive-props .btn-filter {
    margin-left: 0;
}

/* ==========================================================================
   Kalender
   ========================================================================== */
.calendar-nav-btn {
    border: none;
    transition: box-shadow 0.3s ease;
}

.calendar-nav-btn:hover {
    background: var(--wp--preset--color--light-green);
}

/* ==========================================================================
   Einzelansicht Ferienwohnung
   ========================================================================== */
.single-ferienwohnungen .hero-wrapper {
    padding-top: 0;
}

@media (min-width: 1601px) {
    .single-ferienwohnungen .hero-inner {
        padding-left: 80px;
        padding-right: 80px;
    }
}

/* ==========================================================================
   Wunschliste
   ========================================================================== */
.wishlist-panel {
    border: 1.5px dashed rgb(117, 152, 92) !important;
    box-shadow: 0 2px 20px -10px rgba(0, 0, 0, 0.85);
    margin-top: 40px !important;
    width: calc(100% - 2 * var(--gutter));
    max-width: var(--align-content);
}

@media (min-width: 992px) {
    .wishlist-panel {
        margin-top: 60px !important;
    }
}

#wishlist-list .badge {
    left: 12px !important;
    top: 12px !important;
}

.wishlist-grid {
    background-color: var(--wp--preset--color--white);
    border: 1.5px dashed var(--color-primary);
    box-shadow: 0 2px 20px -10px #000000d9;
    padding: 40px;
    margin-top: 3rem;
}

.wishlist-grid {
    margin: auto;
}

/* ==========================================================================
   Fewo-Ergebnisse
   ========================================================================== */
#fewo-results {
    width: calc(100% - 2 * var(--gutter)) !important;
    max-width: var(--align-content) !important;
    margin: 3rem auto;
    background-color: var(--wp--preset--color--white);
    border: 1.5px dashed var(--color-primary);
    box-shadow: 0 2px 20px -10px #000000d9;
    padding: 40px;
}

#fewo-results .grid {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   Amenity Modal
   ========================================================================== */
.amenity-modal__panel {
    top: 25%;
    transform: translateY(-50%);
}

/* ==========================================================================
   Farb-Utilities
   ========================================================================== */
.btn-filter,
.wp-element-button,
.sf__submit .sf__btn,
.prop-archive-search .sf__submit .sf__btn,
.archive-props .pf .pf-pill input:checked + span,
.backlink,
.prop__fav,
.hero-all-btn,
.archive-props .pf .pf-btn,
.amenity-all-btn {
    background: #75985c !important;
}

.badge {
    background: #75985c !important;
    height: 40px !important;
    padding: 0.8rem !important;
}

.has-white-background-color.wp-element-button {
    background: #fff !important;
}

.archive-props .pf .pf-pill input:checked + span,
.archive-props .pf .pf-btn,
.amenity-all-btn {
    color: #fff !important;
}

.archive-props .excerpt,
.archive-props .title,
.archive-props .feature,
.archive-props .pf .pf-pill span,
.calendar-day-price,
.calendar-weekdays,
.archive-props .pf .pf-group > legend,
.excerpt,
.posts-feature {
    color: var(--color-text) !important;
}