/*
 * Arzt Suche Screen CSS
 * Struktur wie ehemals arzt-mallorca-suche (Git-Historie).
 * Nutzt ausschließlich Base-Klassen und Layout-/Spacing-Variablen (--spacing-*, --radius-*, --color-*).
 */
#arzt-suche-container {
    margin-top: calc(-1 * var(--spacing-2xl));
}

/*
 * VERWENDETE BASE-KLASSEN:
 * - .base-layout-container, .base-layout-content (layout.css)
 * - .base-breadcrumb, .base-breadcrumb-separator (widgets-links.css)
 * - .base-page-header (widgets-headlines.css)
 * - .base-search-row, .base-form-group, .base-form-label (widgets-forms.css)
 * - .base-button-standard (widgets-buttons.css)
 * - .base-section, .base-section-intro, .base-section-image-strip, .base-image-strip-img (widgets-sections.css)
 * - .base-doctor-list, .base-doctor-list-item, .base-doctor-list-image, .base-doctor-list-content,
 *   .base-card-doctor-name, .base-doctor-specialty, .base-doctor-location, .base-doctor-list-actions,
 *   .base-doctor-photo-placeholder, .base-doctor-photo-circle (widgets-cards.css)
 */

@media (width >= 600px) {
    #arzt-suche-search-row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
    }

    #arzt-suche-search-row .base-form-field {
        min-width: 160px;
        flex: 1;
    }

    #arzt-suche-search-row button {
        width: auto;
        min-width: 180px;
        flex-shrink: 0;
    }
}

.arzt-suche-advanced-toggle {
    margin-top: var(--spacing-sm);
}

.arzt-suche-advanced-filters {
    margin-top: var(--spacing-sm);
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.arzt-suche-advanced-field {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.arzt-suche-no-results-message {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
}

.arzt-suche-no-results-text {
    margin: 0;
}

.arzt-suche-pager-wrapper {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    display: flex;
    justify-content: center;
    align-items: center;
}

.arzt-suche-pager {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-wrap: wrap;
}

.arzt-suche-pager-link {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    background-color: var(--color-background-secondary);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    display: inline-block;
    min-width: 40px;
    text-align: center;
}

.arzt-suche-pager-link:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-primary);
}

.arzt-suche-pager-page {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    background-color: var(--color-background-secondary);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    display: inline-block;
    min-width: 40px;
    text-align: center;
}

.arzt-suche-pager-page:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-primary);
}

.arzt-suche-pager-page-active {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
    cursor: default;
}

.arzt-suche-pager-page-active:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.arzt-suche-pager-ellipsis {
    padding: var(--spacing-sm) var(--spacing-md);
}