/* ============================================================
   PROFESSIONS
   ============================================================ */

.profession-head {
    gap: 15px;
}


/* ============================================================
   HEADER
   ============================================================ */

.profession-head-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}



/* ============================================================
   SEARCH
   ============================================================ */

.profession-search {

    position:
        relative;

    width:
        100%;
}


.profession-search input {

    width:
        100%;

    height:
        44px;

    padding:
        0 14px 0 40px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    outline:
        none;

    background:
        var(--surface);

    color:
        var(--text);

    font-size:
        13px;

    box-sizing:
        border-box;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}


.profession-search input:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px var(--primary-soft);
}


.profession-search input::placeholder {

    color:
        var(--text-faint);
}


.search-icon {

    position:
        absolute;

    left:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        var(--text-faint);

    font-size:
        20px;

    pointer-events:
        none;
}


/* ============================================================
   QUICK TAGS
   ============================================================ */

.profession-tags {

    display:
        flex;
        flex-wrap: wrap;

    gap:
        7px;

    overflow-y:
        auto;

    max-height: 200px;

    scrollbar-width:
        none;
}


.profession-tags::-webkit-scrollbar {
    display:
        none;
}


.proTag {

    padding:
        2px 7px;

    border-radius:
        5px;

    background:
        var(--surface-2);

    color:
        var(--text-soft);

    cursor:
        pointer;

    font-size:
        10px;

    white-space:
        nowrap;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}


.profession-tag:hover {

    border-color:
        var(--primary);

    background:
        var(--primary-soft);

    color:
        var(--primary);
}


/* ============================================================
   PROFESSION LIST
   ============================================================ */

.profession-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


/* ============================================================
   PROFESSION ITEM
   ============================================================ */

.profession-item {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    width:
        100%;

    padding:
        10px;

    border:
        1px solid var(--border);

    border-radius:
        16px;

    background:
        var(--surface);

    box-shadow:
        var(--card-shadow);

    cursor:
        pointer;

    transition:
        border-color var(--transition),
        background var(--transition),
        transform var(--transition);
}


.profession-item:hover {

    border-color:
        var(--primary);

    background:
        var(--surface-2);

    transform:
        translateY(-1px);
}


/* ============================================================
   IMAGE
   ============================================================ */

.profession-image {

    width:
        72px;

    height:
        72px;

    flex:
        0 0 72px;

    overflow:
        hidden;

    border-radius:
        12px;

    background:
        var(--surface-2);
}


.profession-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


/* ============================================================
   INFO
   ============================================================ */

.profession-info {

    flex:
        1;

    min-width:
        0;
}


.profession-info h2 {

    margin:
        0 0 7px;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        750;

    line-height:
        1.3;

    text-overflow:
        ellipsis;
}


.profession-availability {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--text-faint);

    font-size:
        10px;

    font-weight:
        600;
}


.availability-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        var(--success);
}


/* ============================================================
   ARROW
   ============================================================ */

.profession-arrow {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--surface-2);

    color:
        var(--primary);

    cursor:
        pointer;

    font-size:
        17px;

    transition:
        background var(--transition),
        transform var(--transition);
}


.profession-item:hover .profession-arrow {

    background:
        var(--primary-soft);

    transform:
        translateX(2px);
}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 360px) {

    .profession-image {

        width:
            62px;

        height:
            62px;

        flex-basis:
            62px;
    }

    .profession-item {
        gap:
            10px;
    }

    .profession-info h2 {
        font-size:
            13px;
    }
}