/* Provider Cards */
.provider {
    /* Existing styles */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    flex: 1 1 calc(33.333% - 40px);
    /* Default to three cards per row */
    max-width: calc(33.333% - 40px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Adjust for large screens (three cards per row) */
@media (min-width: 1200px) {
    .provider {
        flex: 1 1 calc(33.333% - 40px);
        /* Three cards per row */
        max-width: calc(33.333% - 40px);
    }
}

/* Adjust for medium screens (two cards per row) */
@media (max-width: 1199px) and (min-width: 601px) {
    .provider {
        flex: 1 1 calc(50% - 40px);
        /* Two cards per row */
        max-width: calc(50% - 40px);
    }
}

/* Mobile Styles (one card per row) */
@media (max-width: 600px) {
    .provider {
        flex: 1 1 100%;
        /* One card per row */
        max-width: 100%;
        width: 100%;
    }
}

/* Hover Effect to Make Cards Interactive */
.provider:hover {
    transform: translateY(-5px);
    /* Slightly lift the card on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* Darker shadow on hover */
}

/* Category Containers with Alternating Pastel Colors */
.category {
    width: 90%;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

/* Category Containers with Alternating Pastel Colors */
.category:nth-of-type(1n) {
    background-color: #ffd1dc; /* Light pink */
}

.category:nth-of-type(2n) {
    background-color: #ffebb5; /* Light yellow */
}

.category:nth-of-type(3n) {
    background-color: #d9f7be; /* Light green */
}

.category:nth-of-type(4n) {
    background-color: #d0e7ff; /* Light blue */
}

.category:nth-of-type(5n) {
    background-color: #e1d7ff; /* Light purple */
}

/* Hover Effect: Slightly Darker Colors */
.category:nth-of-type(1n):hover {
    background-color: #f8b0c1; /* Darker pink */
}

.category:nth-of-type(2n):hover {
    background-color: #ffd87f; /* Darker yellow */
}

.category:nth-of-type(3n):hover {
    background-color: #bce8a0; /* Darker green */
}

.category:nth-of-type(4n):hover {
    background-color: #a6c9f3; /* Darker blue */
}

.category:nth-of-type(5n):hover {
    background-color: #c9b2f1; /* Darker purple */
}


/* Category Title */
.category h3 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px 0; /* Reduce margin above to 5px, keep 10px below */
    padding: 0; /* Ensure there's no padding */
}

/* Provider Header for Name and Image */
.provider-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.provider-header img {
    margin-right: 15px;
    width: 80px;
    height: auto;
}

.provider-header h3 {
    margin: 0;
    font-size: 1.5em;
    color: #333;
}

/* Provider Description */
.provider-description {
    font-size: 0.9em;
    color: #555;
    margin-left: 65px;
    margin-top: 2px;
    margin-bottom: 15px;
}

/* Provider Contact Details */
.provider-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.provider-contact p,
.provider-contact a {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    white-space: nowrap;
}

.provider-contact a {
    color: #007bff;
    text-decoration: none;
}

.provider-contact .phone-link {
    color: #28a745;
}

.provider-contact .phone-link i {
    margin-right: 5px;
    color: #28a745;
    font-size: 1.2em;
}

/* Review Buttons */
.review-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.review-buttons form {
    display: inline-block;
}

/* Category Styles */
.category {
    margin-bottom: 20px;
    /* Increased margin for better separation */
}

/* County Filter Message */
.county-filter-message {
    color: green;
    font-weight: bold;
}

/* Provider List */
.provider-list {
    display: none;
    margin-left: 20px;
    margin-top: 10px;
    transition: height 0.3s ease;
}

/* Filter Section and Controls */
.filter-section {
    margin-top: 5px;
}

.filter-section select {
    padding: 5px;
    margin-right: 10px;
}

.filter-section .filter-buttons {
    display: flex;
    gap: 10px;
}

.filter-controls {
    display: flex;
    align-items: center;
    /* Vertically aligns the button and dropdown */
    gap: 10px;
    /* Adds space between the dropdown and buttons */
}

.filter-controls select {
    width: auto;
    /* Ensures the dropdown doesn't take up too much space */
    padding: 5px;
    /* Consistent padding with buttons */
}