/* =========================================
   DOOFINDER - FLAGS
   ========================================= */

.dfd-card-flags {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;

    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;

    padding-right: 8px;
}


/* =========================================
   BRAK W MAGAZYNIE - LEWA STRONA
   ========================================= */

.dfd-card-flags .dfd-card-flag[data-availability="out-of-stock"] {
    order: 1;

    /* może się kurczyć, gdy Similar się rozwinie */
    flex: 0 1 auto;
    min-width: 0;

    margin-left: 0 !important;
    margin-right: 6px !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}


/* =========================================
   SIMILAR - PRAWA STRONA
   ========================================= */

.dfd-card-flags button.dfd-similar {
    order: 2;

    /* wyłączamy absolute z CSS Doofindera */
    position: static !important;

    /* Similar nie może się kurczyć */
    flex: 0 0 auto;

    margin-left: auto !important;
    margin-right: 0 !important;

    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
}


/* =========================================
   GDY SĄ OBIE FLAGI - font -1px
   ========================================= */

.dfd-card-flags:has(.dfd-similar):has([data-availability="out-of-stock"])
.dfd-card-flag[data-availability="out-of-stock"] {
    font-size: 11px !important;
}

.dfd-card-flags:has(.dfd-similar):has([data-availability="out-of-stock"])
button.dfd-similar .dfd-similar-button-text {
    font-size: 11px !important;
}


/* =========================================
   HOVER
   ========================================= */

@media (hover: hover) {

    .dfd-card:hover .dfd-card-flags button.dfd-similar {
        margin-left: auto !important;
        margin-right: 0 !important;
        overflow: visible !important;
    }

    .dfd-card:hover
    .dfd-card-flags button.dfd-similar
    .dfd-similar-button-text {
        white-space: nowrap;
        overflow: visible !important;
    }
}