.search-results-container {
    max-width: 1200px;
    margin: 60px auto;
    margin-bottom: 5vh;
    font-family: "Nunito Sans";
    position: static;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.search-input {
    text-transform: uppercase;
}

.dropdown-btn {
    text-transform: uppercase;
}


.legend-item {
    display: flex;
    align-items: center;
    margin: 5px 15px;
    font-family: "Nunito Sans";

}
/* Table header */
.results-header {
    display: grid;
    grid-template-columns: 40px 1.2fr 1fr 1fr 1.8fr;
    letter-spacing: 0.5px;
    background-color: #043259;
    text-transform: uppercase;
    color: white;
    padding: 15px;
    border-radius: 5px;
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
    margin-bottom: 10px;
}

.header-cell {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.sort-icon {
    margin-left: 5px;
}


.results-body {
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
    background: white;
  }
  
  .result-row {
    display: grid;
    grid-template-columns: 40px 1.2fr 1fr 1fr 1.8fr;
    align-items: center;
    padding: 16px 20px;
    font-family: "Nunito Sans";
    color:#043259;
    font-size: 14px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
    background-color: #FFFFFF;
    margin-bottom: 8px;
    border-bottom: 1px solid #e0e7e9;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 5px;
  }

.result-row:nth-child(even) {
    background-color: rgba(128, 164, 174, 0.3); 
}

.results-body:last-child {
    box-shadow: none;
}

  .result-cell {
    padding-right: 8px;
    cursor: pointer;
    line-height: 1.5;
}

.result-row:hover {
    background-color: rgba(96, 166, 153, 0.08); 
    transform: translateY(-2px); 
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2); 
}

.result-cell.nombre {
       font-weight: 700;
       font-size: 14px;
}

.result-cell.especialidad {
       font-weight: 500;
}

.result-cell.direccion {
    line-height: 1.6;
}

.result-cell.telefono {
    font-weight: 600;
}

.result-cell.telefono a {
    color: #60A699;
    cursor: pointer;
    text-decoration: none;
}

.result-cell.telefono a:hover {
    color: #043259;
    text-decoration: underline;
}


/* Verified provider badge */
.verified-badge {
    display: flex;
    justify-content: center;
}

.verified-icon {
    width: 24px;
    height: 24px;
}


/* Pagination controls */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background-color: none !important;
    padding: 30px;
    margin: 0;
    box-shadow: none !important;
}

.page-btn {
    background-color: #043259;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Nunito Sans";
}

.page-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.page-info {
    margin: 0 10px;
    font-family: "Nunito Sans";
    color: #036A6F;
}

.no-results {
    text-align: center;
    padding: 40px 20px;
    color: #5a7184;
}

.no-results::before {
    content: '🔍';
    display: block;
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.no-results h3 {
    font-size: 20px;
    color: #043259;
    margin-bottom: 8px;
    font-weight: 600;
}

.no-results p {
    font-size: 15px;
    color: #5a7184;
    margin-bottom: 20px;
}

.no-results .suggestions {
    background: #f0f8f6;
    padding: 20px;
    border-radius: 8px;
    display: inline-block;
    text-align: left;
    margin-top: 20px;
}

.no-results .suggestions li {
    margin-bottom: 8px;
    color: #043259;
}


.footer {
    position: absolute !important;
}

/* ==========================================
   MOBILE RESPONSIVE - DIRECTORY PAGE
   COMPLETE FIX
   ========================================== */

/* ==========================================
   SEARCH CONTAINER - ALL SCREEN SIZES
   ========================================== */

/* Override homepage negative margin for directory */
.search-container {
    margin: 40px auto 40px !important; /* NO negative margin */
    z-index: 10;
}

/* ==========================================
   TABLET (769px - 1024px)
   ========================================== */

@media (max-width: 1024px) {
    /* Search container - slightly smaller */
    .search-container {
        width: calc(100% - 60px) !important;
        margin: 30px auto 40px !important;
        padding: 12px 24px !important;
    }
    
    .search-params {
        gap: 14px;
    }
    
    /* Results container */
    .search-results-container {
        max-width: 95%;
        margin: 50px auto 0 !important; /* Space from search */
    }
    
    /* Table adjustments */
    .results-header {
        grid-template-columns: 40px 1.3fr 1fr 1fr 1.8fr; /* Better proportions */
        padding: 14px 20px;
        font-size: 12px;
    }
    
    .result-row {
        grid-template-columns: 40px 1.3fr 1fr 1fr 1.8fr; /* Match header */
        padding: 16px 20px;
        font-size: 13px;
    }
    
    /* Fix address alignment */
    .result-cell.direccion {
        text-align: left !; /* Force left align */
        padding-right: 12px;
    }
    
    .result-cell.nombre {
        font-size: 14px;
    }
}

/* ==========================================
   TABLET SMALL (641px - 768px)
   ========================================== */

@media (max-width: 768px) {
    /* Search container - more compact */
    .search-container {
        width: calc(100% - 40px) !important;
        margin: 25px auto 35px !important;
        padding: 20px 24px !important;
        border-radius: 24px !important;
    }
    
    .step-2 {
        font-size: 16px;
        margin-bottom: 14px;
    }
    
    /* Stack search fields to 2 columns */
    .search-params {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .input-label {
        font-size: 14px;
    }
    
    .search-input,
    .dropdown-btn {
        font-size: 12px;
        padding: 11px 14px;
    }
    
    .search-btn {
        width: 100%;
        min-width: 100%;
        font-size: 18px;
        padding: 11px;
        grid-column: 1 / -1; /* Span full width */
    }
    
    /* Results - still show table but compressed */
    .search-results-container {
        margin: 40px auto 0 !important;
        padding: 0 10px;
    }
    
    .results-header {
        grid-template-columns: 40px 1.5fr 1fr 2fr; /* 3 columns on tablet */
        padding: 12px 16px;
        font-size: 11px;
    }
    
    /* Hide telefono column on smaller tablets */
    .header-cell.telefono,
    .result-cell.telefono {
        display: none;
    }
    
    .result-row {
        grid-template-columns: 40px 1.5fr 1fr 2fr; /* Match header */
        padding: 14px 16px;
        font-size: 13px;
    }
}

/* ==========================================
   MOBILE (481px - 640px)
   ========================================== */

@media (max-width: 640px) {
    /* Search container - single column */
    .search-container {
        width: calc(90% - 30px) !important;
        margin: 12px auto 16px !important;
        padding: 14px 16px !important;
        border-radius: 20px !important;
    }
    
    .step-2 {
        font-size: 15px;
        margin-bottom: 8px;
    }
    
    /* Single column layout */
    .search-params {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .input-label {
        font-size: 14px;
        margin-bottom: 4px;
    }
    
    .search-input,
    .dropdown-btn {
        font-size: 15px;
        padding: 9px 12px;
    }
    
    .search-btn {
        font-size: 17px;
        padding: 10px;
        gap: 8px;
    }
    
    /* Results - SWITCH TO CARDS */
    .search-results-container {
        margin: 30px auto 0 !important;
        padding: 0 10px;
    }

    .search-btn img,
    .search-btn svg,
    .search-btn i {
        width: 18px;
        height: 18px;
        flex-shrink: 0;    
    }
    
    /* Hide table header */
    .results-header {
        display: none;
    }
    
    /* Card-based layout */
    .results-body {
        border-radius: 12px;
        margin-bottom: 15px;
        box-shadow: none; /* Remove container shadow */
    }
    
    .result-row {
        display: block; /* Stack content */
        padding: 18px;
        margin-bottom: 12px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        border-bottom: none;
        background: white;
    }
    
    .result-row:nth-child(even) {
        background: rgba(128, 164, 174, 0.15); /* Lighter on mobile */
    }
    
    .result-row:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(96, 166, 153, 0.25);
        border-left: none;
        padding-left: 18px;
    }
    
    .result-cell {
        display: block;
        padding: 0;
        margin-bottom: 10px;
        line-height: 1.6;
        text-align: left !important; /* Force left align */
    }
    
    .result-cell:last-child {
        margin-bottom: 0;
    }
    
    /* Provider name - prominent */
    .result-cell.nombre {
        font-size: 17px;
        font-weight: 700;
        color: #043259;
        margin-bottom: 8px;
        padding-bottom: 10px;
        border-bottom: 2px solid #D5EDE7;
    }
    
    /* Add context labels */
    .result-cell.especialidad::before {
        content: "📋 ";
        margin-right: 6px;
    }
    
    .result-cell.especialidad {
        font-size: 15px;
        color: #4d6f8c;
        font-weight: 600;
    }
    
    .result-cell.telefono::before {
        content: "📞 ";
        margin-right: 6px;
    }
    
    .result-cell.telefono {
        color: #60A699;
        font-weight: 600;
        font-size: 16px;
        display: block !important; /* Show phone on mobile */
    }
    
    .result-cell.telefono a {
        color: inherit;
        text-decoration: none;
    }
    
    .result-cell.direccion::before {
        content: "📍 ";
        display: inline-block;
        margin-right: 6px;
    }
    
    .result-cell.direccion {
        font-size: 14px;
        color: #5a7184;
        line-height: 1.5;
    }
    
    /* Pagination - stack */
    .pagination-controls {
        flex-wrap: wrap;
        gap: 6px;
        padding: 12px 0 16px;
    }
    
    .page-btn {
        padding: 7px 12px;
        font-size: 13px;
        min-width: 36px;
    }
    
    .page-info {
        width: 100%;
        text-align: center;
        order: -1;
        margin-bottom: 10px;
        font-size: 15px;
    }

    footer + * {
        display: none;
    }
}

/* ==========================================
   MOBILE SMALL (321px - 480px)
   ========================================== */

@media (max-width: 480px) {
    .search-container {
        width: calc(90% - 24px) !important;
        margin: 8px auto 8px !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
    }
    
    .step-2 {
        font-size: 13px;
    }
    
    .input-label {
        font-size: 13px;
    }

    .search-input,
    .dropdown-btn {
        font-size: 11px;
        padding: 6px 8px;
    }
    
    
    .search-results-container {
        margin: 25px auto 0 !important;
        padding: 0 8px;
    }
    
    .result-row {
        padding: 16px;
        margin-bottom: 10px;
        border-radius: 8px;
    }
    
    .result-cell.nombre {
        font-size: 16px;
    }
    
    .result-cell.especialidad,
    .result-cell.telefono {
        font-size: 14px;
    }
    
    .result-cell.direccion {
        font-size: 13px;
    }
    
    .pagination-controls {
        padding: 15px 0 25px;
    }
    
    .page-btn {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 32px;
    }
    
    .page-info {
        font-size: 13px;
    }

    footer + * {
        display: none !important;
    }
}

/* ==========================================
   MOBILE TINY (< 320px)
   ========================================== */

@media (max-width: 320px) {
    .search-container {
        width: calc(90% - 20px) !important;
        padding: 14px 16px !important;
    }
    
    .step-2 {
        font-size: 13px;
    }
    
    .search-btn {
        font-size: 15px;
    }
    
    .result-row {
        padding: 14px;
    }
    
    .result-cell.nombre {
        font-size: 15px;
    }
    
    .result-cell.especialidad,
    .result-cell.telefono {
        font-size: 13px;
    }
    
    .result-cell.direccion {
        font-size: 12px;
    }
    
    .page-btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    footer + * {
        display: none !important;
    }
}