/* --- High-Fidelity Skeleton Loader Styles --- */

/* The main animation handler */
.skeleton-box {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 300px; 
    animation: skeleton-shimmer 1.2s forwards infinite linear;
}

@keyframes skeleton-shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

/* Add a class to the card to reset padding while loading */
.service-member-grid.is-loading .service-member-details {
    padding: 20px; /* Or match your default padding */
}

/* Style the placeholder image */
.is-loading .service-member-img {
    height: 180px; /* Adjust to your image height */
    background-color: #eee;
}

/* Style the placeholder text lines */
.is-loading .skeleton-text-h6 {
    height: 18px;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 4px;
}

.is-loading .skeleton-text-p {
    height: 14px;
    width: 100%;
    border-radius: 4px;
}

/* Style the placeholder icons */
.is-loading .people-card__social-links {
    margin-top: 15px;
}

.is-loading .skeleton-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%; /* Make them circles */
    margin-right: 8px;
}

.service-member-grid.is-loading .service-member-details
 {
    padding: 0;
}

/* 1. Turn the parent list item into a flex container */
.is-loading .people-card__contact li {
    display: flex;
    align-items: center; /* This vertically aligns the icon and the text placeholder */
}

/* 2. Tell the icon not to shrink */
.is-loading .people-card__contact li .fa-phone {
    flex-shrink: 0;
}

/* 3. Make the placeholder grow to fill the available space */
.is-loading .skeleton-text-phone {
    display: inline-block;
    height: 14px;
    width: 100%; /* Or use flex-grow: 1; */
    margin-left: 8px;
    border-radius: 4px;
}
.pa_load_more{
    grid-column: auto / span 7;
    padding-top: unset;
    padding-bottom: 60px;
}

.search-result:has(.search-results-not-found){
    display: flex;
    min-height: unset;
}
.selected-options-list{
    display: grid ;
    column-gap: 1em;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media only screen and (max-width: 1300px) {
    .selected-options-list{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media only screen and (max-width: 1000px) {
    .selected-options-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media only screen and (max-width: 768px) {
    .selected-options-list{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media only screen and (max-width: 400px) {
    .selected-options-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
.selected-option{
    width: 100%;
    grid-column: auto / span 7;
    position: relative;
}
.selected-option hr{
    max-width: 100%;
    margin-left: 0;
}
.people-search-col .caret{
    right:1em ;
    left: unset !important;
}
.people-search-col:after{
    content: unset !important;
}
body.ascend .container .selected-options-list a.nectar-button{
    width: 100%;
    padding: 10px 30px;
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    min-width: unset;
}
@media only screen and (max-width: 400px) {
    #lawyer-search-input{
        margin-bottom: 24px;;
    }
}


.selected-option-inner {
    justify-content: space-between;
    display: flex;
    align-items: center;
    gap:1em;
    max-width: 17em;
    padding-top: .2em;
    padding-bottom: .2em;
}

.people-search-col.col{
    display: flex;
    flex-direction: column;
    gap:1.5em;
}
.selected-options-list span{
    font-size: .85rem;
    font-weight: 600;
    color: #888888;
}