/* ============================================================
   BUSCAR CLÍNICA - CliniqOne Style (Matching Server)
   Epic #2241 - WASM Migration
   ============================================================ */

/* ========== SEARCH HERO SECTION (White background like Server) ========== */
.search-hero-section {
    background: #f8f9fa;
    min-height: auto;
    padding: 60px 0 40px 0;
}

/* Remove decorative pattern for clean look */
.search-hero-section::before {
    display: none;
}

.search-hero-title {
    font-weight: 400 !important;
    font-size: 2.5rem !important;
    color: #0E2A3A !important;
    animation: fadeInUp 0.8s ease-out;
}

.search-hero-subtitle {
    font-size: 1rem !important;
    color: #5E6D78 !important;
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-stats {
    animation: fadeInUp 1.2s ease-out;
}

/* Fix stats text color for light background */
.search-stats .mud-typography {
    color: #5E6D78 !important;
}

/* ========== COMPACT SEARCH BAR (Like Server) ========== */
.search-bar-container {
    width: 100%;
    max-width: 600px;
    border-radius: 8px !important;
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    animation: fadeInUp 1s ease-out;
    padding: 4px !important;
}

.search-bar-container:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.search-input-vita911 .mud-input-root {
    height: 48px !important;
    border-radius: 6px !important;
}

.search-input-vita911 .mud-input {
    font-size: 1rem !important;
    padding: 0 16px !important;
}

.search-input-vita911 .mud-input-adornment {
    font-size: 1.4rem !important;
}

.search-input-vita911 .mud-input::placeholder {
    color: #90a4ae !important;
    opacity: 0.7;
}

/* Button - Always teal (even when disabled, with opacity) */
.search-action-btn {
    height: 48px !important;
    padding: 0 24px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #16A7C6 !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

/* Keep teal color when disabled, just reduce opacity */
.search-action-btn:disabled {
    background-color: #16A7C6 !important;
    opacity: 0.6;
}

.search-action-btn:hover:not(:disabled) {
    background-color: #0B6F8A !important;
    transform: translateY(-1px);
}

.search-action-btn:active:not(:disabled) {
    transform: translateY(0);
}

/* ========== WHITE CARDS (CliniqOne Style) ========== */
.clinic-card-vita911 {
    background: white !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    animation: fadeIn 0.6s ease-out;
}

.clinic-card-vita911:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    border-color: #16A7C6 !important;
}

.clinic-card-vita911:active {
    transform: translateY(-2px);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Clinic avatar inside card - Gray like Server */
.clinic-avatar {
    background: #e0e0e0 !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto;
}

.clinic-avatar .mud-icon-root {
    color: #9e9e9e !important;
}

/* Override text colors inside cards to be dark */
.clinic-card-vita911 .mud-typography {
    color: #0E2A3A !important;
}

.clinic-card-vita911 .mud-typography[style*="Color.Secondary"],
.clinic-card-vita911 .mud-secondary-text {
    color: #5E6D78 !important;
}

/* Subdomain chip */
.subdomain-chip {
    background: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
    color: #0E2A3A !important;
    font-weight: 500 !important;
}

.subdomain-chip .mud-icon-root {
    color: #16A7C6 !important;
}

/* Card button - Teal CliniqOne style */
.clinic-card-btn {
    background: #16A7C6 !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
}

.clinic-card-btn:hover {
    background: #0B6F8A !important;
    transform: translateY(-1px);
}

/* ========== SEARCH RESULTS SECTION ========== */
.search-results-section {
    background: #f8f9fa;
}

/* ========== POPULAR CLINICS PLACEHOLDER ========== */
.popular-clinics-section {
    background: white;
    min-height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== RESPONSIVE DESIGN ========== */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .search-hero-title {
        font-size: 2rem !important;
    }

    .search-hero-subtitle {
        font-size: 0.95rem !important;
    }

    .search-bar-container {
        max-width: 100%;
    }

    .search-input-vita911 .mud-input-root {
        height: 44px !important;
    }

    .search-action-btn {
        height: 44px !important;
        padding: 0 20px !important;
    }

    .clinic-avatar {
        width: 56px !important;
        height: 56px !important;
    }

    .search-stats {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .search-hero-section {
        padding: 40px 0 30px 0;
    }

    .search-hero-title {
        font-size: 1.75rem !important;
    }

    .search-hero-subtitle {
        font-size: 0.9rem !important;
    }

    .search-input-vita911 .mud-input-root {
        height: 42px !important;
    }

    .search-input-vita911 .mud-input {
        font-size: 0.9rem !important;
    }

    .search-action-btn {
        height: 42px !important;
        padding: 0 16px !important;
        font-size: 0.8rem !important;
    }

    .clinic-card-vita911 {
        padding: 12px !important;
    }

    .clinic-avatar {
        width: 48px !important;
        height: 48px !important;
    }

    .clinic-card-btn {
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
    }

    /* Stack search bar vertically on mobile */
    .search-stack {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .search-stack .search-action-btn {
        width: 100%;
        min-height: 44px; /* Touch target mínimo */
    }
}

/* ========== AUTOCOMPLETE DROPDOWN ENHANCEMENTS ========== */
.mud-popover-open .mud-list-item {
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.mud-popover-open .mud-list-item:hover {
    background: rgba(22, 167, 198, 0.08) !important;
}

/* Mobile: Autocomplete dropdown full width to prevent truncation */
@media (max-width: 600px) {
    .autocomplete-popover-fullwidth {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        left: 16px !important;
        right: 16px !important;
    }

    .autocomplete-popover-fullwidth .mud-list {
        max-height: 60vh !important;
    }

    /* Items dentro del dropdown - más padding para touch */
    .autocomplete-popover-fullwidth .mud-list-item {
        padding: 12px 16px !important;
        min-height: 56px !important;
    }

    /* Texto del item - prevenir truncado */
    .autocomplete-popover-fullwidth .mud-typography {
        white-space: normal !important;
        word-break: break-word !important;
    }
}

/* ========== LOADING STATES ========== */
.search-input-vita911 .mud-progress-circular {
    color: #16A7C6 !important;
}

/* ========== ACCESSIBILITY ENHANCEMENTS ========== */
.clinic-card-vita911:focus-visible {
    outline: 3px solid #16A7C6;
    outline-offset: 4px;
}

.search-action-btn:focus-visible,
.clinic-card-btn:focus-visible {
    outline: 3px solid #16A7C6;
    outline-offset: 2px;
}