.trainers-section {
    background: linear-gradient(180deg, #fdfbf7 0%, #f7efde 100%);
    @include svg("trainers");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    padding-bottom: 0 !important;

    .trainer-card .trainer-avatar img {
        border-color: #fcf8f0 !important;
    }
}

.trainer-card {
    background-color: var(--white);
    border-radius: var(--br-16);
    padding: 16px;
    border: 1px solid var(--border-color);
    margin-top: 40px;

    .trainer-avatar {
        position: relative;

        img {
            border: 10px solid var(--bg-light-2);
            margin: -60px auto 20px;
            position: relative;
            z-index: 1;
        }

        &::before {
            content: "";
            position: absolute;
            top: -17px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 57px;
            border-left: 1px solid var(--border-color);
            border-right: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            border-radius: 0 0 50px 50px; // Only bottom corners rounded
            z-index: 1;
        }
    }

    .trainer-name {
        margin-bottom: 5px;
        font-size: 1rem;
    }

    .trainer-description {
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .trainer-specialty {
        display: inline-block;
        background-color: var(--bg-light-6);
        margin-top: 10px;
        margin-bottom: 16px;
        padding: 4px 16px;
        border-radius: var(--br-8);
        color: var(--primary-color);
    }

    .trainer-price-large {
        background-color: var(--bg-light-9);
        padding: 8px 4px;
        border-radius: var(--br-8);
    }

    .trainer-rate {
        margin-left: 4px;
    }

    .trainer-extra {
        margin: 0 0 20px;
        padding: 0 24px;
        display: grid;
        gap: 4px;
        list-style-type: none;
        text-align: left;
        font-size: 0.8125rem;

        .uk-icon {
            margin-right: 6px;
        }
    }
}

.profile-status {
    background-color: var(--bg-light-11);
    padding: 4px 8px;
    border-radius: var(--br-8);
    color: var(--primary-color);
    font-size: 0.75rem;
}
