/**
 * Status badges on property cards (Prodáno / Rezervováno / Slevněno)
 *
 * Shape follows the existing druh_nemovitosti / druh_nabidky chips in the
 * listing card: 8px radius, 5px 15px padding.
 */

:root {
    --fr-stitek-prodano-bg: #1F2544;
    --fr-stitek-prodano-color: #FFFFFF;
    --fr-stitek-rezervovano-bg: #F5A524;
    --fr-stitek-rezervovano-color: #FFFFFF;
    --fr-stitek-slevneno-bg: #E23D3D;
    --fr-stitek-slevneno-color: #FFFFFF;
    --fr-stitek-radius: 8px;
    --fr-stitek-offset: 16px;
}

.fr-stitky {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
}

.fr-stitek {
    display: inline-block;
    padding: 8px 20px;
    border-radius: var(--fr-stitek-radius);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-transform: none;
}

.fr-stitek--prodano {
    background-color: var(--fr-stitek-prodano-bg);
    color: var(--fr-stitek-prodano-color);
}

.fr-stitek--rezervovano {
    background-color: var(--fr-stitek-rezervovano-bg);
    color: var(--fr-stitek-rezervovano-color);
}

.fr-stitek--slevneno {
    background-color: var(--fr-stitek-slevneno-bg);
    color: var(--fr-stitek-slevneno-color);
}

/**
 * Inside a listing the badges are overlaid on the photo, which is the first
 * element of the card and therefore sits in its top-left corner.
 */
.jet-listing-grid__item {
    position: relative;
}

/*
 * The height/width overrides beat JetEngine's `.jet-equal-columns > *
 * { height: 100% }`, which would otherwise stretch the badge strip over the
 * whole card.
 */
.jet-listing-grid__item > .fr-stitky,
.jet-listing-grid__item.jet-equal-columns > .fr-stitky {
    position: absolute;
    top: var(--fr-stitek-offset);
    left: var(--fr-stitek-offset);
    z-index: 10;
    width: auto;
    height: auto;
}

.fr-stitky > .fr-stitek {
    align-self: flex-start;
    height: auto;
}

/* Sold properties are still on offer visually, just visibly settled */
.jet-listing-grid__item.fr-ma-prodano .elementor-widget-image,
.jet-listing-grid__item.fr-ma-prodano [class*="elementor-element"][style*="background-image"] {
    filter: saturate(0.75);
}

@media (max-width: 767px) {
    :root {
        --fr-stitek-offset: 12px;
    }

    .fr-stitek {
        padding: 6px 16px;
        font-size: 15px;
    }
}