/* =========================================================
   SUCHFILTER LAYOUT
   ========================================================= */

.modern-search-panel {
    display: grid !important;

    grid-template-columns:
        135px
        175px
        minmax(300px, 1fr)
        175px
        190px
        110px !important;

    gap: 10px !important;
    align-items: end !important;
}

.filter-postal {
    grid-column: 1;
    grid-row: 1;
}

#kassenToggle {
    grid-column: 2;
    grid-row: 1;
}

.filter-specialty {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
}

#newToggle {
    grid-column: 4;
    grid-row: 1;
}

#openTodayToggle {
    grid-column: 5;
    grid-row: 1;
}

#searchButton {
    grid-column: 6;
    grid-row: 1;
}

#resetButton {
    grid-column: 1;
    grid-row: 2;

    width: 48px;
}


/* =========================================================
   JETZT GEÖFFNET
   ========================================================= */

#openNowToggle {
    grid-column: 5;
    grid-row: 2;

    width: 100%;
    min-height: 44px;
}

#openNowToggle.is-hidden {
    display: none !important;
}

#openNowToggle:not(.is-hidden) {
    display: flex !important;
}


/* Filter-Texte dürfen nicht abgeschnitten werden */

.filter-toggle {
    width: 100%;
    min-width: 0;
}

.filter-toggle-copy {
    min-width: 0;
}

.filter-toggle-copy strong {
    white-space: nowrap;
}


/* =========================================================
   KASSEN-BADGES BEIM ARZTNAMEN
   ========================================================= */

.doctor-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.doctor-name-row .doctor-name {
    margin: 0;
}

.insurance-badges {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.insurance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 21px;
    padding: 3px 7px;

    border: 1px solid #2380e8;
    border-radius: 6px;

    background: #f5faff;
    color: #1265c6;

    font-size: 10px;
    line-height: 1;
    font-weight: 800;

    white-space: nowrap;
}


/* =========================================================
   KLEINERE BILDSCHIRME
   ========================================================= */

@media (max-width: 1250px) {

    .modern-search-panel {
        grid-template-columns:
            135px
            175px
            minmax(260px, 1fr)
            175px !important;
    }

    .filter-postal {
        grid-column: 1;
        grid-row: 1;
    }

    #kassenToggle {
        grid-column: 2;
        grid-row: 1;
    }

    .filter-specialty {
        grid-column: 3 / 5;
        grid-row: 1;
    }

    #newToggle {
        grid-column: 1;
        grid-row: 2;
    }

    #openTodayToggle {
        grid-column: 2;
        grid-row: 2;
    }

    #openNowToggle {
        grid-column: 2;
        grid-row: 3;
    }

    #searchButton {
        grid-column: 3;
        grid-row: 2;
    }

    #resetButton {
        grid-column: 4;
        grid-row: 2;
    }
}


.doctor-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 6px;
    padding: 3px 7px;

    border-radius: 999px;

    background: #e9f3ff;
    color: #1269d3;

    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .05em;
    vertical-align: middle;
}



/* ===== KASSEN DIREKT NEBEN ARZT ===== */

.doctor-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.doctor-name-row .doctor-name {
    margin: 0;
}

.insurance-badges {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.insurance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 7px;
    min-height: 21px;

    border: 1px solid #b9d8fb;
    border-radius: 7px;

    background: #f3f8ff;
    color: #1268ce;

    font-size: 10px;
    line-height: 1;
    font-weight: 800;

    white-space: nowrap;
}

.doctor-new-badge {
    display: inline-flex;
    align-items: center;

    margin-left: 6px;
    padding: 3px 7px;

    border-radius: 999px;

    background: #e8f3ff;
    color: #1268ce;

    font-size: 9px;
    font-weight: 900;
}


/* ===== JETZT GEÖFFNET ===== */

#openNowToggle.is-hidden {
    display: none !important;
}

#openNowToggle:not(.is-hidden) {
    display: flex !important;
}

/* Kassen immer eigene Zeile unter dem Namen */
.doctor-name-row {
    display: block !important;
}

.doctor-name-row .doctor-name {
    display: block;
    margin: 0 0 5px 0 !important;
}

.insurance-badges {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 21px;
}



/* ==========================================================
   Öffentliche Suche
   ========================================================== */

.filter-free-search {
    grid-column: 1 / -1;
}

.filter-free-search .filter-input-shell {
    width: 100%;
}

.filter-free-search input {
    width: 100%;
    min-width: 0;
    font-size: 14px;
}


/* ==========================================================
   Gastzugang
   ========================================================== */

.guest-access-button,
.guest-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 17px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

.guest-access-button {
    border: 1px solid #d8e1ec;
    background: #ffffff;
    color: #38516e;
}

.guest-access-button:hover {
    background: #f5f8fc;
}

.guest-login-button {
    border: 1px solid #1769e0;
    background: #1769e0;
    color: #ffffff;
}

.guest-login-button:hover {
    background: #125cc8;
}


/*
 * Nicht eingeloggte Besucher:
 * keine Favoriten, Notizen oder Zuweiser-Aktionen.
 */

body[data-authenticated="0"] .doctor-card-tools,
body[data-authenticated="0"] .doctor-actions {
    display: none !important;
}


@media (max-width: 760px) {

    .filter-free-search {
        grid-column: auto;
    }

    .guest-access-button {
        display: none;
    }
}


/* ==========================================================
   U-Bahn Nähe
   ========================================================== */

.subway-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-top: 9px;
    margin-bottom: 2px;
    cursor: default;
}

.subway-badges {
    display: flex;
    align-items: center;
    gap: 5px;
}

.subway-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 30px;
    height: 23px;
    padding: 0 7px;

    border-radius: 6px;

    color: #ffffff;
    background: #47627f;

    font-size: 11px;
    font-weight: 850;
    line-height: 1;

    box-shadow:
        0 2px 5px
        rgba(20, 43, 69, .13);
}


/* Wiener U-Bahn-Linien */

.subway-line-u1 {
    background: #e3302d;
}

.subway-line-u2 {
    background: #8b3f91;
}

.subway-line-u3 {
    background: #ef7d00;
}

.subway-line-u4 {
    background: #319a45;
}

.subway-line-u6 {
    background: #8b5a3c;
}


/* Hover-Fenster */

.subway-tooltip {
    position: absolute;

    left: 0;
    bottom: calc(100% + 8px);

    z-index: 1000;

    min-width: 175px;
    max-width: 250px;

    padding: 10px 12px;

    border: 1px solid #d9e2ec;
    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 10px 28px
        rgba(23, 46, 73, .16);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(4px);

    transition:
        opacity .14s ease,
        transform .14s ease,
        visibility .14s ease;

    pointer-events: none;
}

.subway-tooltip::after {
    content: "";

    position: absolute;

    left: 13px;
    top: 100%;

    width: 8px;
    height: 8px;

    background: #ffffff;

    border-right:
        1px solid #d9e2ec;

    border-bottom:
        1px solid #d9e2ec;

    transform:
        translateY(-4px)
        rotate(45deg);
}

.subway-tooltip strong {
    display: block;

    margin-bottom: 3px;

    color: #17314e;

    font-size: 12px;
    font-weight: 800;
}

.subway-tooltip span {
    display: block;

    color: #718298;

    font-size: 11px;
    white-space: nowrap;
}

.subway-info:hover
.subway-tooltip {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}