.edit-own-profile-block{
    width: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffa800;
    margin-top: 20px;
    border-radius: 10px;
}

.edit-own-profile-block.hidden{
    display: none;
}

.edit-own-profile-container{
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 11px 20px;
    min-height: 54px;
}

.edit-own-profile-container p{ 
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 157%;
    text-align: left; 
    color: #fff;
}

.edit-own-profile-button{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 114%;
    text-align: center;
    color: #ffa800;
    background: #fff;
    border-radius: 4px;
    padding: 8px 16px;
    min-width: 207px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    outline: none;
    cursor: pointer;
}

.main-container.part2{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

.edit-own-profile-container{
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 157%;
    text-align: center;
    color: #fff;
}

.edit-own-profile-button{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 114%;
    text-align: center;
    text-decoration: none;
    color: #ffa800;
    background: #fff;
    border-radius: 4px;
    padding: 8px 16px;
    min-width: 207px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    outline: none;
}

.freelancer-info-block{
    margin-top: 50px;
    width: 100%;
    cursor: default;
}

.freelancer-info-container{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 140px;
}

.freelancer-main-info{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 30px;
}

.profile-actions-container{
    position: absolute;
    z-index: 2;
    top: 0;
    right: -110px;
    display: flex;
    gap: 8px;
}

.profile-actions-container .like-container,
.profile-actions-container .service-report-button,
.profile-actions-container .share-icon-container{
    display: flex;
    width: 38px;
    height: 38px;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fff;
    color: #74767e;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.profile-actions-container .like-container:hover{
    border-color: #ff6b6b;
    color: #ff4d4f;
}

.profile-actions-container .like-container.is-active{
    border-color: #ffb3b3;
    background: #fff5f5;
    color: #ff4d4f;
}

.profile-actions-container .like-container.is-active svg path{
    fill: currentColor;
}

.profile-actions-container .service-report-button:hover,
.profile-actions-container .share-icon-container:hover{
    border-color: #b9d8ff;
    background: #f6faff;
    color: #0a77ff;
}

.profile-actions-container button:focus-visible{
    outline: 2px solid rgba(10, 119, 255, .25);
    outline-offset: 2px;
}

.profile-actions-container .share-icon-container:focus-visible{
    outline: 2px solid rgba(10, 119, 255, .25);
    outline-offset: 2px;
}

.profile-report-modal-open{
    overflow: hidden;
}

.profile-report-modal-overlay{
    position: fixed;
    z-index: 10001;
    inset: 0;
    display: flex;
    overflow-y: auto;
    padding: 20px;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px);
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease, visibility .2s ease;
}

.profile-report-modal-overlay.hidden{
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.profile-report-modal{
    position: relative;
    width: min(100%, 460px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 22px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(10, 13, 18, .16);
}

.profile-report-modal:focus{
    outline: none;
}

.profile-report-modal__close{
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 18px;
    display: flex;
    width: 32px;
    height: 32px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: #f5f5f5;
    color: #667085;
    cursor: pointer;
}

.profile-report-form{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-report-modal .verification-auth-modal__header{
    display: flex;
    padding: 0 30px;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.profile-report-modal .verification-auth-modal__icon{
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    color: #0a77ff;
    box-shadow: 0 1px 2px rgba(10, 13, 18, .05);
}

.profile-report-modal .verification-auth-modal__header h3{
    margin: 0;
    color: #181d27;
    font-size: 19px;
    font-weight: 600;
}

.profile-report-modal .verification-auth-modal__header p{
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.45;
}

.profile-report-reasons{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-report-reason{
    display: flex;
    margin: 0;
    padding: 11px 12px;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.profile-report-reason:has(input:checked){
    border-color: #b9d8ff;
    background: #f6faff;
}

.profile-report-reason input{
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: 0 0 auto;
    accent-color: #0a77ff;
}

.profile-report-reason span{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-report-reason strong{
    color: #181d27;
    font-size: 14px;
    font-weight: 600;
}

.profile-report-reason small{
    color: #667085;
    font-size: 12px;
    line-height: 1.4;
}

.profile-report-comment{
    display: flex;
    margin: 0;
    flex-direction: column;
    gap: 6px;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
}

.profile-report-comment[hidden]{
    display: none;
}

.profile-report-comment textarea{
    width: 100%;
    min-height: 82px;
    padding: 10px 12px;
    resize: vertical;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    color: #181d27;
    font: inherit;
    font-weight: 400;
}

.profile-report-modal .verification-auth-modal__continue{
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: #0a77ff;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 767px){
    .profile-actions-container{
        position: static;
        width: 100%;
        justify-content: flex-end;
        order: -1;
    }

    .profile-report-modal-overlay{
        padding: 12px;
        align-items: flex-end;
    }

    .profile-report-modal{
        max-height: calc(100vh - 24px);
        padding: 20px 16px;
        border-radius: 16px;
    }
}

.freelancer-info-content1{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.freelancer-avatar-container{
    width: 168px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.freelancer-avatar-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    display: inline-block;
    border-radius: inherit;
}

.freelancer-avatar-container--plus{
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 50%;
    box-sizing: border-box;
    outline: 3px solid #d9a514;
    outline-offset: 0;
    background: transparent;
    box-shadow: none;
}

.freelancer-avatar-container--plus .freelancer-avatar-img{
    border: 0;
}

.plus-verification-badge{
    display: block;
    flex: 0 0 auto;
    filter: none;
}

.verified-user--plus > .plus-verification-badge{
    width: 20px;
    height: 20px;
    filter: none;
}

.verified-user--plus .about-verified .plus-verification-badge{
    width: 20px;
    height: 22.86px;
}

.freelancer-info-content1 .freelancer-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 10px; 
}

.freelancer-info-content1 .freelancer-name{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-family: var(--font4);
    font-weight: 700;
    font-size: 23px;
    line-height: 134%;
    color: #222325;
    margin: 0;
    padding: 0;
}

.freelancer-name-string{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.freelancer-info-content1 .freelancer-name-string img{
    width: 20px;
}

.freelancer-info-content1 .freelancer-username{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 15px;
    line-height: 173%;
    color: #74767e;
    text-align: left;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.freelancer-info-content1 .freelancer-position{
    font-family: var(--font4);
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #222325;
    text-align: left;
    margin: 0;
    padding: 0;
}

.freelancer-info-content1 .freelancer-trophies-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0px;
}

.freelancer-info-content1 .freelancer-trophies-container .tooltip-container{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, filter 0.18s ease;
    will-change: transform;
}

.freelancer-trophies-container .trophy-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; 
    height: 40px; 
    color: #0177ff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #0177ff;
}

.freelancer-info-content1 .freelancer-trophies-container img{
    width: 40px;
    aspect-ratio: 1/1;
    margin-right: 10px;
}

.freelancer-info-content1 .freelancer-trophies-container .tooltip-container:hover{
    transform: translateY(-3px);
    filter: drop-shadow(0 8px 16px rgba(17, 24, 39, 0.10));
}

.about-freelancer-container{
    max-width: 770px;
}

.about-freelancer-container h2{
    font-family: var(--font4);
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    color: #222325;
    text-align: left;
}

.about-freelancer-container p{
    font-family: var(--font4);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #404145;
}

.about-freelancer-container .show-full-text{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: #177de5;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.freelancer-skills{
    text-align: left;
}

.freelancer-skills span{
    font-family: var(--font4);
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    text-align: center;
    color: #222325;
    border: 1px solid #e4e5e7;
    border-radius: 9999px;
    padding: 9px 0px;
    background: #fff;
    padding: 5px 25px;
    margin: 5px;
    display: inline-block;
}

.freelancer-success-details{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 15px;
    border: 1px solid #e4e5e7;
    height: 100%;
    border-radius: 8px;
    gap: 20px;
}

.profile-resume-trigger{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding: 21px;
    border-radius: 8px;
    border: 1px solid #dadbdd;
    min-height: 60px;
    gap: 5px;
    cursor: pointer;
}

.profile-resume-trigger:focus-visible{
    outline: 2px solid #1f75cb;
    outline-offset: 2px;
}

.profile-resume-trigger__text{
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    text-align: right;
    color: #111;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.profile-resume-hidden-badge{background:#f1f3f5;border-radius:999px;color:#737b85;font-size:10px;font-weight:700;padding:3px 7px}
body.profile-resume-open{overflow:hidden}
.profile-resume-modal{align-items:center;background:rgba(21,27,35,.52);display:flex;inset:0;justify-content:center;padding:24px;position:fixed;z-index:10050}
.profile-resume-modal.hidden{display:none}
.profile-resume-modal__dialog{background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(17,24,39,.2);max-height:min(900px,calc(100vh - 48px));max-width:860px;overflow-y:auto;position:relative;width:100%}
.profile-resume-modal__close{align-items:center;background:#f3f5f7;border:0;border-radius:50%;cursor:pointer;display:flex;height:38px;justify-content:center;position:absolute;right:18px;top:18px;width:38px;z-index:2}
.profile-resume-modal__close img{height:15px;width:15px}.profile-resume-sheet{padding:32px}
.profile-resume-sheet__header{align-items:center;border-bottom:1px solid #e8ebee;display:grid;gap:15px;grid-template-columns:68px 1fr auto;padding:0 50px 24px 0}
.profile-resume-sheet__header>img{border-radius:50%;height:68px;object-fit:cover;width:68px}.profile-resume-sheet__header span{color:#7b838d;font-size:12px}.profile-resume-sheet__header h2{color:#202124;font-size:27px;font-weight:800;line-height:1.2;margin:4px 0}.profile-resume-sheet__header p{color:#636b75;font-size:13px;margin:0}
.profile-resume-sheet__header>a{background:#eff8f1;border-radius:8px;color:#118f33;font-size:12px;font-weight:800;padding:10px 13px}
.profile-resume-sheet__header>a,
.profile-resume-sheet__header>a:hover,
.profile-resume-sheet__header>a:focus,
.profile-resume-sheet__header>a:active{
    text-decoration:none;
}
.profile-resume-facts{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0}.profile-resume-facts>div{background:#f7f8fa;border-radius:9px;display:flex;flex-direction:column;gap:4px;padding:12px}.profile-resume-facts span{color:#858d96;font-size:10px;text-transform:uppercase}.profile-resume-facts strong{font-size:13px}
.profile-resume-section{border-top:1px solid #edf0f2;padding:20px 0 0;margin-top:20px}.profile-resume-section h3{font-size:17px;font-weight:800;margin:0 0 12px}.profile-resume-section>p{color:#505861;font-size:13px;line-height:1.7;margin:0}
.profile-resume-skills{display:flex;flex-wrap:wrap;gap:7px}.profile-resume-skills span{background:#eef6ff;border-radius:999px;color:#176eaf;font-size:12px;font-weight:700;padding:7px 10px}
.profile-resume-timeline,.profile-resume-education{display:grid;gap:14px}.profile-resume-timeline article,.profile-resume-education article{display:grid;gap:14px;grid-template-columns:130px 1fr}.profile-resume-timeline article>span,.profile-resume-education article>span{color:#858d96;font-size:12px}.profile-resume-timeline h4,.profile-resume-education h4{font-size:14px;margin:0 0 3px}.profile-resume-timeline strong{color:#626a73;font-size:12px}.profile-resume-timeline p,.profile-resume-education p{color:#626a73;font-size:12px;line-height:1.6;margin:7px 0 0}
.profile-resume-languages{display:flex;flex-wrap:wrap;gap:8px}.profile-resume-languages>span{background:#f7f8fa;border-radius:8px;color:#68717b;font-size:12px;padding:9px 11px}.profile-resume-languages strong{color:#30363d}
@media(max-width:700px){.profile-resume-modal{align-items:flex-end;padding:0}.profile-resume-modal__dialog{border-radius:16px 16px 0 0;max-height:94vh}.profile-resume-sheet{padding:22px 16px}.profile-resume-modal__close{right:14px;top:14px}.profile-resume-sheet__header{align-items:start;grid-template-columns:52px 1fr;padding:0 42px 18px 0}.profile-resume-sheet__header>img{height:52px;width:52px}.profile-resume-sheet__header h2{font-size:21px}.profile-resume-sheet__header>a{grid-column:1/-1;text-align:center}.profile-resume-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-resume-timeline article,.profile-resume-education article{gap:5px;grid-template-columns:1fr}}


.freelancer-rating-wrapper{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.freelancer-rating-combo{
    height: 100%;
}

.freelancer-rating{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-top: 20px;
} 

.freelancer-rating h4{
    font-family: var(--font8);
    font-weight: 600;
    font-size: 17px;
    line-height: 148%;
    text-align: center;
    color: #000;
    text-align: left;
    margin: 0;
    padding: 0;
}

.freelancer-rating-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.freelancer-rating-content img{
    width: 15px; 
}

.freelancer-rating-content p{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 175%;
    color: #b5b6ba;
    margin: 0;
    padding: 0;
}

.freelancer-rating-content .rating-num{
    color: #fe7a32;
    font-weight: 700;
}

.freelancer-level-popover{
    margin-top: 10px;
}

.freelancer-level-popover .user-level{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #111;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    white-space: nowrap;
}

.freelancer-level-popover .user-level__value{
    margin-right: 7px;
    width: 55px;
}

.freelancer-level-popover .user-level__img{
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 18px;
    margin-top: -2px;
}

.freelancer-level-popover .user-level__img--1{
    background-image: url('/img/icons/user-level-rising-star.svg');
}

.freelancer-level-popover .user-level__img--2{
    background-image: url('/img/icons/user-level-expert.svg');
}

.freelancer-level-popover .user-level__img--3{
    background-image: url('/img/icons/user-level-top-rated.svg');
}

.freelancer-rating-data-container{
    padding: 13px 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    align-items: flex-start;
    justify-content: flex-start;
    border-bottom: 1px solid #e4e5e7;
    border-top: 1px solid #e4e5e7;
    margin-top: 13px;
    margin-bottom: 13px;
    width: 100%;
}

.freelancer-rating-data{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #404145;
    width: 100%;
}

.freelancer-rating-data .quantity{
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 139%;
    text-align: right;
    color: #04b70a;
}

.freelancer-rating-data .quantity small{
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.freelancer-rating-data--ecological .label{
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

.ecological-contribution-tooltip{
    align-items: center;
    color: #7a828a;
    cursor: help;
    display: inline-flex;
    flex: 0 0 auto;
    outline: none;
    position: relative;
}

.ecological-contribution-tooltip > svg{
    display: block;
    height: 16px;
    width: 16px;
}

.ecological-contribution-tooltip__bubble{
    background: #101828;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    bottom: calc(100% + 10px);
    box-shadow: 0 16px 38px rgba(16, 24, 40, .22);
    color: #d0d5dd;
    display: grid;
    font-size: 12px;
    font-weight: 400;
    gap: 6px;
    left: 50%;
    line-height: 1.45;
    opacity: 0;
    padding: 12px 13px;
    pointer-events: none;
    position: absolute;
    text-align: left;
    transform: translate(-50%, 6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    visibility: hidden;
    width: min(320px, calc(100vw - 40px));
    z-index: 50;
}

.ecological-contribution-tooltip__bubble::after{
    background: #101828;
    bottom: -5px;
    content: "";
    height: 10px;
    left: calc(50% - 5px);
    position: absolute;
    transform: rotate(45deg);
    width: 10px;
}

.ecological-contribution-tooltip__bubble strong{
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.ecological-contribution-tooltip:hover,
.ecological-contribution-tooltip:focus-visible{
    color: #347fc1;
}

.ecological-contribution-tooltip:hover .ecological-contribution-tooltip__bubble,
.ecological-contribution-tooltip:focus .ecological-contribution-tooltip__bubble,
.ecological-contribution-tooltip:focus-within .ecological-contribution-tooltip__bubble{
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
}

.freelancer-rating-data .percentage{
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 13px;
    line-height: 185%;
    text-align: right;
    color: #62646a;
}


.block-freelancer{
    width: 100%;
}

.block-freelancer .toggle-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.block-freelancer .toggle-label {
   font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #62646a;
}

.block-freelancer .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 28px;
}

.block-freelancer .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.block-freelancer .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: .4s;
}

.block-freelancer .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.block-freelancer input:checked + .slider {
  background-color: #e2545d; /* Красный цвет, как на картинке */
}

.block-freelancer input:checked + .slider:before {
  transform: translateX(32px);
}

.write-message-button{
    font-family: var(--font4);
    font-weight: 700;
    font-size: 16px;
    line-height: 162%;
    text-align: center;
    color: #fff;
    padding: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 6px;
    width: 100%;
    height: 48px;
    background: #23c366;
    border: 0;
    cursor: pointer;
}

.write-message-button:hover{
    background: #1fad5b;
}

/*end of aside content-block*/

/*freelancer portfolio block*/
.freelancer-portfolio-block{
    margin-top: 20px;
}

.freelancer-portfolio-header h2{
    margin: 0;
    padding: 0;
    font-family: var(--font4);
    font-weight: 700;
    font-size: 24px;
    line-height: 130%;
    color: #404145;
    margin-bottom: 30px;
}

.freelancer-portfolio-nav{
    text-align: left;
}

.freelancer-portfolio-nav-elem{
    padding: 8px 20px;
    min-width: 100px;
    display: inline-block;
    margin: 5px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-height: 32px;
    font-family: var(--font5);
    font-weight: 600;
    font-size: 12px;
    line-height: 133%;
    text-align: center;
    color: #64748b;
    cursor: pointer;
}

.freelancer-portfolio-nav-elem.active{
    background: #e2f3ff;
    font-family: var(--font5);
    font-weight: 600;
    font-size: 12px;
    line-height: 133%;
    text-align: center;
    color: #0062ff;
    border: 1px solid #0062ff;
}

.freelancer-portfolio-container{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin-top: 20px;
}

.portfolio-load-more-block{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.portfolio-load-more-block.hidden{
    display: none;
}

.portfolio-load-more-block .kw-button{
    min-width: 100px;
    min-height: 32px;
    height: auto;
    padding: 8px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: none;
    font-family: var(--font5);
    font-weight: 600;
    font-size: 12px;
    line-height: 133%;
    text-align: center;
    color: #64748b;
    cursor: pointer;
}

.portfolio-load-more-block .kw-button:hover,
.portfolio-load-more-block .kw-button:focus-visible{
    background: #e2f3ff;
    border-color: #0062ff;
    color: #0062ff;
}

.portfolio-load-more-block.is-loading .kw-button{
    opacity: .72;
    pointer-events: none;
}

.add-portfolio-button{
    width: 100%;
    aspect-ratio: 3.3/2.2;
    border: 1px solid #e4e5e7;
    border-radius: 8px;
    background: #fbfbfb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 13px;
    cursor: pointer;
    order: -1;
}


.add-portfolio-button:hover{
    background: #ebebeb;
}

.add-portfolio-button img{
    width: 62px;
    aspect-ratio: 1/1;
}

.add-portfolio-button p{
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    color: #64a543;
    margin: 0;
    padding: 0;
}

.portfolio-elem{
    width: 100%;
    aspect-ratio: 3.3/2.2;
    overflow: hidden;
    border: 1px solid #e4e5e7;
    border-radius: 8px;
    background: #fbfbfb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative; 
}

.portfolio-pinned-badge{
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 28px;
    padding: 6px 10px;
    border: 0;
    border-radius: 10%;
    background: #fff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(34, 35, 37, 0.12);
}

.portfolio-pinned-badge img{
    width: 18px;
    height: 18px;
    display: block;
}

.portfolio-elem:hover .portfolio-pinned-badge,
.portfolio-elem:focus-within .portfolio-pinned-badge{
    display: flex;
}

.portfolio-pinned-badge.pinned img{
    filter: drop-shadow(0 0 6px rgba(255, 180, 0, 0.8));
    transform: rotate(-20deg);
}

.portfolio-pinned-badge:disabled{
    opacity: 0.65;
    cursor: default;
}

.portfolio-elem img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    display: inline-block;
}

.portfolio-elem .portfolio-pinned-badge img{
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.portfolio-elem-description{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding-top: 23px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 81%);
    display: none;
}

.portfolio-elem:hover .portfolio-elem-description{
    display: flex;
}

.portfolio-elem-category{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: #fff;
    text-align: left;
}

.portfolio-elem-subcategory{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: #fff;
    text-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.4);
}

.portfolio-elem-subcategory .seen-count{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 12px;
    line-height: 183%;
    color: #fff;
    gap: 5px;
}

.portfolio-elem-subcategory .seen-count img{
    width: 15px;
}

.portfolio-viewer-open{
    overflow: hidden;
}

.portfolio-viewer-modal{
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(34, 35, 37, 0.72);
    backdrop-filter: blur(6px);
    padding: 32px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-viewer-modal.hidden{
    display: none;
}

.portfolio-viewer-dialog{
    width: 100%;
    max-width: 1160px;
    min-height: 520px;
    position: relative;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(34, 35, 37, 0.24);
    padding: 32px 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-viewer-body{
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 32px;
    align-items: center;
}

.portfolio-viewer-media{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.portfolio-viewer-main-media{
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #f5f7fa;
    aspect-ratio: 660/440;
}

.portfolio-viewer-image{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.portfolio-viewer-thumbs{
    display: flex;
    gap: 10px;
    width: 100%;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 35, 37, .24) transparent;
}

.portfolio-viewer-thumbs.hidden{
    display: none;
}

.portfolio-viewer-thumbs::-webkit-scrollbar{
    height: 4px;
}

.portfolio-viewer-thumbs::-webkit-scrollbar-track{
    background: transparent;
}

.portfolio-viewer-thumbs::-webkit-scrollbar-thumb{
    background: rgba(34, 35, 37, .22);
    border-radius: 99px;
}

.portfolio-viewer-thumb{
    flex: 0 0 84px;
    width: 84px;
    height: 62px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    background: #f5f7fa;
    overflow: hidden;
    cursor: pointer;
    opacity: .72;
    transition: border-color .18s ease, opacity .18s ease, transform .18s ease;
}

.portfolio-viewer-thumb:hover,
.portfolio-viewer-thumb.is-active{
    opacity: 1;
    border-color: #04b70a;
}

.portfolio-viewer-thumb:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px rgba(4, 183, 10, .18);
}

.portfolio-viewer-thumb img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-viewer-content{
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
}

.portfolio-viewer-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}

.portfolio-viewer-subcategory,
.portfolio-viewer-date{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    line-height: 154%;
    color: #7b7f8a;
}

.portfolio-viewer-subcategory{
    border-radius: 999px;
    background: #f0f4ff;
    color: #4977f4;
    padding: 5px 12px;
}

.portfolio-viewer-title{
    margin: 0;
    font-family: var(--font4);
    font-weight: 700;
    font-size: 30px;
    line-height: 120%;
    color: #222325;
}

.portfolio-viewer-description{
    margin: 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 162%;
    color: #4f545f;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.portfolio-viewer-close{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: #f4f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.portfolio-viewer-close img{
    width: 18px;
    height: 18px;
}

.portfolio-viewer-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(34, 35, 37, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.portfolio-viewer-prev{
    left: 12px;
}

.portfolio-viewer-next{
    right: 12px;
}

.portfolio-viewer-nav img{
    width: 20px;
    height: 20px;
}

.portfolio-viewer-nav.is-disabled,
.portfolio-viewer-nav:disabled{
    opacity: 0.45;
    cursor: default;
}

.portfolio-elem[role="button"]{
    outline: none;
}

.portfolio-elem[role="button"]:focus-visible{
    box-shadow: 0 0 0 3px rgba(73, 119, 244, 0.22);
}
/*end of freelancer portfolio block*/

/*Ads block*/
.my-services-block{
    margin-top: 50px;
    margin-bottom: 50px;
}

.my-services-block h2{
    font-family: var(--font4);
    font-weight: 700;
    font-size: 24px;
    line-height: 130%;
    color: #404145;
    margin: 0;
    padding: 0;
    margin-bottom: 30px;
}
.my-services-container{
    width: 100%;
    position: relative;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4,1fr);
}

.my-services-container .profile-service-hidden{
    display: none;
}

.profile-services-empty{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 112px;
    padding: 20px;
    border: 1px solid #e5eaf0;
    border-radius: 16px;
    background: #fff;
    font-family: "Inter", var(--font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.profile-services-empty__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    background: rgba(4, 183, 10, .08);
    color: #04a51c;
}

.profile-services-empty__icon svg{
    width: 25px;
    height: 25px;
}

.profile-services-empty__content{
    min-width: 0;
}

.profile-services-empty__content h3{
    margin: 0;
    padding: 0;
    font-family: "Inter", var(--font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 140%;
    color: #1f2937;
}

.profile-services-empty__content p{
    max-width: 560px;
    margin: 5px 0 0;
    padding: 0;
    font-family: "Inter", var(--font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 155%;
    color: #667085;
}

.show-more-services-block{
    margin-top: 18px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.show-more-services{
    gap: 8px;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 9px 15px 9px 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    color: var(--public-profile-text, #404145);
    background: var(--public-profile-subtle, #f3f5f7);
    box-shadow: inset 0 0 0 1px rgba(103, 112, 124, .08);
    font-family: Inter, var(--font-family), sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    appearance: none;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.show-more-services svg{
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: var(--public-profile-muted, #747c88);
    transition: color .18s ease, transform .18s ease;
}

.show-more-services:hover{
    color: var(--public-profile-blue, #0188ff);
    background: var(--public-profile-subtle-hover, #eceff3);
    box-shadow: inset 0 0 0 1px rgba(1, 136, 255, .12);
    transform: translateY(-1px);
}

.show-more-services:hover svg{
    color: currentColor;
    transform: translateY(2px);
}

.show-more-services:focus-visible{
    outline: 3px solid rgba(1, 136, 255, .2);
    outline-offset: 2px;
}

.show-more-services:active{
    transform: translateY(0);
}

.service-card-block{
    width: 100%;
    display: grid;
    grid-auto-flow: column; /* Элементы размещаются в одной строке */
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    margin-top: 20px;
    margin-bottom: 15px;
    position: relative;
    gap: 10px; 
}

.ad-container{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #e4e5e7;
    background: #fff;
    text-decoration: none;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.ad-container:hover{
    box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.15);
}

.ad-container .ad-part1{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    justify-content: space-between;
}

.ad-container .ad-banner{
    width: 100%;
    aspect-ratio: 2.6/1.73;
    overflow: hidden;
}

.ad-container .ad-banner img{
    width: 100%;
    height: 100%;
    display: inline-block;
    position: relative;
}

.ad-container .ad-banner .white-like-icon{
    width: 26px;
    height: 26px;
    cursor: pointer;
    color: #fff;
}

.ad-container .ad-banner .white-like-button{
    position: absolute;
    top: 15px;
    right: 15px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    z-index: 100;
    display: none;
    line-height: 0;
    cursor: pointer;
    color: #fff;
}

.ad-container .ad-banner .white-like-button .white-like-icon{
    position: static;
    padding: 6px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
}

.ad-container:hover .ad-banner .white-like-button{ 
    display: inline-block;    
}

/*.ad-container .ad-banner .white-like-icon:hover{
    background-color: red;
}*/

.ad-container .ad-banner.liked .white-like-icon{
    background-color: #ffebeb;
    color: #ef4444;
}


.ad-container h3{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 137%;
    color: #222325;
    text-align: left;
    margin: 0;
    padding: 5px 15px;
    min-height: 50px;
}

.ad-container .freelancer-container{
    padding: 5px 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    margin-bottom: 10px;
}

.freelancer-container .freelancer-avatar{
    width: 24px;
    height: 24px;
    position: relative;
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.freelancer-container .freelancer-avatar .freelancer-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: inline-block;
    position: relative;
    border-radius: 100%;
}

.freelancer-container .freelancer-avatar .freelancer-status{
    width: 14px;
    position: absolute;
    bottom: -7px;
}


.freelancer-container .freelancer-avatar .freelancer-status.hidden{
    display: none;
}

.freelancer-container .freelancer-username{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 129%;
    color: #222325;
    padding: 0;
    margin: 0;
}

.freelancer-container img.verified-freelancer{
    width: 12.5px;
}


.freelancer-container img.verified-freelancer.hidden{
    display: none;
}


.tooltip-container,
.user-offline-container{
    position: relative;
    cursor: help;
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    opacity: 0; 
    position: absolute;
    z-index: 100;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    background-color: #fff;
    color: #000;
    text-align: left;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 13px;
    white-space: normal;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
}

.freelancer-trophies-container .achievement-tooltip {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    opacity: 1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: visibility 0.18s ease, top 0.18s ease;
}

.special-tooltip-container .tooltip-text{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
}

.special-tooltip-container .tooltip-text .description-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}


.verified-user{
    position: relative;
}

.about-verified{
    position: absolute;
    left: 0;
    border-radius: 0 8px 8px 8px;
    padding: 10px;
    width: 269px;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
    z-index: 100;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.12);
    background: #fff;
    display: none;
}

.verified-user:hover .about-verified{
    display: flex;
}

.is-user-online{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.is-user-online .user-offline{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: var(--font20);
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
    color: #667085;
    border: 1px solid #d3d3d3;
    border-radius: 30px;
    padding: 3px 7px;
    min-height: 26px;
}

.is-user-online .user-online{
    font-family: var(--font20);
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
    color: #04b70a;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #04b70a;
    border-radius: 30px;
    padding: 3px 7px;
    min-height: 26px;
}

.is-user-online.offline .user-online{
    display: none;
}

.is-user-online.online .user-offline{
    display: none;
}

.is-user-online img{
    width: 6px !important;
}

.about-verified-img{
    width: 14px;
}

.about-verified-description{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}

.about-verified-description h3{
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12px;
    line-height: 115%;
    letter-spacing: -0.01em;
    color: #2a5885;
}

.about-verified-description p{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 115%;
    color: #333;
    margin: 0;
    padding: 0;
}

.about-verified-description p.special-color{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    color: #2a5885;
    margin: 0;
    padding: 0;
}

.tooltip-text h4{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12px;
    color: #484848;
    margin: 0;
    padding: 0;
    text-align: left;
}

.tooltip-text p{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    color: #333;
    margin: 0;
    padding: 0;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.tooltip-container:hover .tooltip-text,
.user-offline-container:hover .tooltip-text{
    visibility: visible;
    opacity: 1;
    top: 100%;
}

.ad-container .service-data-container{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 15px;
    gap: 10px; 
    border-top: 1px solid #efeff0;
}

.service-rating .rating-stars{
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.service-rating .rating-stars p{
    font-family: var(--font-family);
    font-size: 12px;
    line-height: 175%;
    color: #b5b6ba;
    text-align: left;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.service-rating .rating-stars .yellow-text{
    color: #fe7a32;
    font-weight: 700;
}

.service-rating .rating-text{
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 10px;
    line-height: 200%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fe7a32;
}

.service-price .service-price-text{
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 10px;
    line-height: 200%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: right;
    color: #74767e;
}

.service-price .service-price-num{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 17px;
    line-height: 118%;
    text-align: right;
    color: #04b70a;
}
/*End of ads block*/

/*reviews-about-freelancer-block*/
.main-block.part2{
    margin-bottom: 0;
}

.reviews-about-freelancer-block{
    width: 100%;
    max-width: 930px;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 300px;
}

.reviews-about-freelancer-header{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid #e9eef5;
    border-radius: 14px;
    background: #fff;
}

.reviews-about-freelancer-summary{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reviews-about-freelancer-title-row{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.reviews-about-freelancer-header h2{
    font-family: var(--third-family);
    font-weight: 700;
    font-size: 24px;
    line-height: 125%;
    color: #212121;
    text-align: left;
    margin: 0;
    padding: 0;
}

.reviews-about-freelancer-header .reviews-count{
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f2f4f7;
    color: #535862;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
}

.reviews-about-freelancer-header .reviews-rating-summary{
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
}

.reviews-about-freelancer-header .stars-count{
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
} 

.reviews-about-freelancer-header img{
    width: 18px;
    aspect-ratio: 1/1;
}


.reviews-about-freelancer-header .stars-count img{
    width: 15px;
    height: 16px;
    object-fit: contain;
}

.reviews-about-freelancer-header .stars-estimate{
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    color: #212121;
}

.reviews-about-freelancer-header .question-and-description{
    display: inline-flex;
    flex-shrink: 0;
}

.reviews-header-help .tooltip-question{
    display: block;
    color: #98a2b3;
    cursor: pointer;
    height: 18px;
    width: 18px;
    transition: color .2s ease;
}

.reviews-header-help .tooltip-question:hover,
.reviews-header-help.is-open .tooltip-question{
    color: #23c366;
}

.reviews-header-help .reviews-header-help__tooltip{
    left: -14px;
    max-width: min(400px, calc(100vw - 32px));
    padding: 0;
    top: calc(100% + 12px);
    transform: translateY(4px);
    width: 400px;
    border: 1px solid #e9eef5;
    border-radius: 10px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .14);
    color: #333;
    display: block;
    font-family: var(--font-family);
    z-index: 130;
}

.reviews-header-help .reviews-header-help__tooltip::after{
    display: none;
}

.reviews-header-help .reviews-header-help__tooltip::before{
    content: "";
    position: absolute;
    top: -7px;
    left: 17px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid #e9eef5;
    border-top: 1px solid #e9eef5;
    transform: rotate(45deg);
}

.reviews-header-help:hover .reviews-header-help__tooltip,
.reviews-header-help.is-open .reviews-header-help__tooltip{
    top: calc(100% + 12px);
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

.reviews-header-help__wrapper{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px 18px;
}

.reviews-header-help__title{
    display: flex;
    align-items: center;
    gap: 9px;
    color: #181d27;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 700;
    line-height: 140%;
}

.reviews-header-help__icon{
    flex: 0 0 auto;
    color: #23c366;
    width: 22px;
    height: 22px;
}

.reviews-header-help__list{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0 0 0 20px;
    color: #535862;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
}

.reviews-header-help__list li{
    margin: 0;
    padding-left: 2px;
}

.reviews-about-freelancer-header .reviews-filter-actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.reviews-about-freelancer-header .reviews-filter-action{
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d5d7da;
    border-radius: 10px;
    background: #fff;
    color: #414651;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    padding: 0 14px;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.reviews-about-freelancer-header .reviews-filter-action:hover,
.reviews-about-freelancer-header .reviews-filter-action:focus-visible{
    border-color: #23c366;
    box-shadow: 0 0 0 4px rgba(35, 195, 102, .1);
    color: #138a48;
    outline: none;
}

.reviews-about-freelancer-header .reviews-filter-action[data-target="negative-review"]:hover,
.reviews-about-freelancer-header .reviews-filter-action[data-target="negative-review"]:focus-visible{
    background: #fff5f5;
    border-color: #ffb3b3;
    box-shadow: 0 0 0 4px rgba(255, 77, 79, .12);
    color: #ff4d4f;
}

.reviews-about-freelancer-header .reviews-filter-action.active{
    background: #ecfdf3;
    border-color: #23c366;
    color: #138a48;
}

.reviews-about-freelancer-header .reviews-filter-action[data-target="negative-review"].active{
    background: #fff5f5;
    border-color: #ffb3b3;
    color: #ff4d4f;
}

.reviews-about-freelancer-header .reviews-filter-action-icon{
    flex: 0 0 auto;
    height: 20px;
    width: 20px;
}

.reviews-about-freelancer-header .visually-hidden{
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.review-types-block{
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    border-bottom: 1px solid #eaeaea;
}

.review-types-block .review-type{
    padding: 10px;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 186%;
    color: #111;
    gap: 5px;
    cursor: pointer;
}


.reviews-freelancer-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.review-freelancer-content{
    padding-top: 30px;
    padding-bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    border-top: 1px solid #ededed;
}

.review-freelancer-content-empty{
    border-top: 0;
    margin-top: 20px;
    min-height: 260px;
    padding: 0;
}

.reviews-empty-state{
    width: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px;
    border: 1px dashed #d5d7da;
    border-radius: 16px;
    background: #fbfdfc;
    text-align: left;
}

.reviews-empty-state__icon{
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #ecfdf3;
    color: #23c366;
}

.reviews-empty-state__content{
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 420px;
}

.reviews-empty-state .reviewer-review-text{
    color: #181d27;
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 600;
    line-height: 140%;
}

.reviews-empty-state p{
    margin: 0;
    color: #667085;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
}

.review-freelancer-content .review-header{
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
    color: #111;
    text-align: left;
    margin-bottom: 10px;
}

.reviewer-review{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.reviewer-review .reviewer-status{
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 5px;
}

.reviewer-review .reviewer-status .reviewer-star-status-count{
    font-family: var(--third-family);
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    color: #212121;
}

.reviewer-review .reviewer-status .yellow-star-icon{
    width: 16px;
}

.reviewer-review .reviewer-status .fiwork-review-badge-image{
    display: block;
    width: auto;
    height: 18px;
    max-width: 100%;
}

.reviewer-review .reviewer-status .verified-status{
    background: #e8f6ef;
    border-radius: 8px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    color: #15a863;
    padding: 5px;
}


.reviewer-review .reviewer-status .verified-status.hidden{
    display: none;
}

.reviewer-review .reviewer-review-text,
.freelancer-response-container .freelancer-response-text{
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #323232;
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.reviewer-review .response-functions-block{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}


.reviewer-review .reviewer-review-response-functions{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}

.reviewer-review .reviewer-review-response-functions.hidden{
    display: none;
}

.response-functions-block .write-response-block{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
    background: #fff;
    border-radius: 8px;
    width: 100%;
    padding: 10px;
    border: 1px solid #ededed;
    display: none;
    margin-top: 2px;
}

.response-functions-block.open .write-response-block{
    display: flex;
}

.reviewer-review .write-response-block.hidden{
    display: none;
}

.reviewer-review .write-response-block .write-response-textarea{
    width: 100%;
    height: 100px;
    resize: none;
    border: none;
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #908f8f;
    background: transparent;
}

.reviewer-review .write-response-block .send-button{
    background: #07e;
    border-radius: 8px;
    width: 172px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--third-family);
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    text-align: center;
    color: #fff;
    border: none;
    cursor: pointer;
}

.reviewer-review .write-response-block .write-response-textarea:focus {
    border: none;
    outline: none; 
}


.reviewer-review .reviewer-review-response-functions .open-close-response-option{
    font-family: var(--third-family);
    font-weight: 700;
    font-size: 12px;
    line-height: 133%;
    color: #323232;
    background: #ededed;
    border: 1px solid #ededed;
    border-radius: 8px;
    height: 30px;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.response-functions-block .close-response-option{
    display: none;
}

.response-functions-block.open .close-response-option{
    display: inline;
}

.response-functions-block.open .open-response-option{
    display: none;
}


.reviewer-review .reviewer-review-response-functions .there-is-response{
    border-radius: 12px;
    min-height: 24px;
    padding: 5px 10px;
    background: #e6f1fd;
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    color: #474747;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}



.reviewer-review .reviewer-review-response-functions .there-is-response{
    visibility: hidden;
}

.reviewer-review .reviewer-review-response-functions .there-is-response.hidden{
    display: none;
}

.reviewer-review .reviewer-review-response-functions .there-is-response:not(.hidden){
    visibility: visible;
}

.reviewer-block, .freelancer-response-block{
    width: 100%;
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 15px;
}

.review-order-meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 12px;
}

.review-order-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f2f4f7;
    font-family: var(--third-family);
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    color: #697586;
}

.review-order-title{
    font-family: var(--third-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    color: #212121;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.review-order-title:hover,
.review-order-title:focus,
.review-order-title:active,
.review-order-title:visited{
    color: #212121;
    text-decoration: none;
}

.freelancer-response-wrapper{
    margin-top: 10px;
    width: 100%;
}

.freelancer-response-wrapper .freelancer-response-header{
    font-family: var(--third-family);
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    color: #212121;
    margin-top: 15px;
    margin-bottom: 15px;
}

.freelancer-response-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding-left: 16px;
    padding-top: 6px;
    border-left: 1px solid #e5e5e5;
    width: 100%;
}

.reviewer-img-container, .freelancer-response-img-container{
    width: 50px;
    aspect-ratio: 1/1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    text-align: center;
    color: #fff;
    background: #07e;
}

.reviewer-img-container img, .freelancer-response-img-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    display: inline-block;
}


.reviewer-feedback, .freelancer-feedback{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.reviewer-info, .freelancer-response-info{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.reviewer-info .reviewer-username, .freelancer-response-info .freelancer-response-username{
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 125%;
    color: #000;
    margin: 0;
    padding: 0;
}

.fiwork-review-user-link{
    text-decoration: none;
    color: inherit;
}

.fiwork-review-user-link:hover,
.fiwork-review-user-link:focus,
.fiwork-review-user-link:active{
    text-decoration: none;
    color: inherit;
}

.reviewer-feedback .review-date,
.freelancer-response-block .review-date{
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    color: #666;
}

.freelancer-response-parent{
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: #177de5;
}

.reviewer-feedback .review-text, .freelancer-feedback .freelancer-response-text{
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: #111;
    margin: 0;
    padding: 0;
}

.reply-to-review-block{
    margin-top: 20px;
    padding-left: 80px;
}

.reply-to-review-block .reply-to-review{
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: #177de5;
    cursor: pointer;
    display: inline-block;
    width: auto;
    background: transparent;
    border: 0;
    padding: 0;
}

.response-functions-block .open-close-response-option button{
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0;
    cursor: pointer;
}

.response-functions-block .open-close-response-option .fiwork-review-action-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.response-functions-block .open-close-response-option .fiwork-review-action-link:hover,
.response-functions-block .open-close-response-option .fiwork-review-action-link:focus,
.response-functions-block .open-close-response-option .fiwork-review-action-link:active,
.response-functions-block .open-close-response-option .fiwork-review-action-link:visited{
    color: inherit;
    text-decoration: none;
}

.fiwork-review-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
}

.fiwork-review-badge.positive-review{
    color: #047857;
    background: #d1fae5;
}

.fiwork-review-badge.negative-review{
    color: #b91c1c;
    background: #fee2e2;
}

.fiwork-inline-reply-form.hidden{
    display: none !important;
}

.fiwork-inline-reply-form:not(.hidden){
    display: flex !important;
}

.blue-checkmark-icon{
    width: 14px;
    height: 14px;
}

@media (max-width: 767px){
    .reviews-about-freelancer-header{
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .reviews-about-freelancer-summary,
    .reviews-about-freelancer-header .reviews-filter-actions{
        width: 100%;
    }

    .reviews-about-freelancer-header .reviews-filter-action{
        flex: 1 1 0;
        min-width: 0;
    }

    .reviews-about-freelancer-title-row{
        flex-wrap: wrap;
    }

    .reviews-empty-state{
        flex-direction: column;
        min-height: 200px;
        padding: 24px 18px;
        text-align: center;
    }

    .reviews-empty-state__content{
        align-items: center;
    }

    .review-freelancer-content{
        margin-top: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .reviewer-review .reviewer-review-response-functions{
        flex-direction: column;
        align-items: flex-start;
    }

    .reply-to-review-block{
        padding-left: 0;
    }
}

.show-more-reviews-block{
    margin-top: 20px;
    text-align: left;
    width: 100%;
    
}

.show-more-reviews-block .show-more-reviews{
    gap: 5px;
    width: 100%;
    cursor: pointer;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 8px 12px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
}

.show-more-reviews-block .show-more-reviews img{
    width: 12px;
}

/*Add work modal block*/
/*add-work-modal-block*/
.add-work-modal-block{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);   
    backdrop-filter: blur(8px);
    z-index: 120;
}

.add-work-modal-container{
    width: 720px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    max-height: 90%;
}

.add-work-modal-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    padding-top: 30px;
    padding-bottom: 15px;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.05), 0 1px 8px 0 rgba(0, 0, 0, 0.13);
    background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%);
    min-height: 72px;
    width: 100%;
}

.add-work-modal-header h3{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 22px;
    line-height: 127%;
    color: #111;
    margin: 0;
    padding: 0;
}

.add-work-modal-header .edit-portfolio-h3{
    display: none;
}

.add-work-modal-header.done .edit-portfolio-h3{
    display: block;
}

.add-work-modal-header.done .present-your-services{
    display: none;
}

.add-work-modal-header img{
    width: 32px;
    cursor: pointer;
}

.add-work-modal-wrapper{
    width: 100%;
    padding: 24px;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
    max-height: 100%;
    overflow-y: auto;
}

.add-work-modal-wrapper .add-work-modal-description{
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: #333;
}

.add-work-name-container{
    padding: 15px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    background: #fff;
    width: 100%;
}

.add-work-name-label-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 5px;
}

.add-work-name-label-container label{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #111;
    margin: 0;
    padding: 0;
}

.add-work-name-label-container span{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: #8a8a8a;
}

.add-work-name-container .add-work-name-input{
    width: 100%;
    border: 1px solid #a5a5a5;
    border-radius: 4px;
    padding: 10px 36px 10px 12px;
    min-height: 40px;
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    color: #8a8a8a;
    margin-top: 8px;
}

.add-work-name-container .add-work-name-counter{
    width: 100%;
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: #8a8a8a;
}

.load-works-container, .load-cover-container{
    width: 100%;
    padding: 15px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.load-works-container .load-works-header, .load-cover-container .load-cover-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    margin-bottom: 15px;
    gap: 10px;
    width: 100%;
}

.load-works-container .load-works-header h3, .load-cover-container .load-cover-header h3{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #111;
    margin: 0;
    padding: 0;
}

.load-works-container .load-works-header span, .load-cover-container .load-cover-header span{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12px;
    line-height: 133%;
    color: #f15b5b;
}

.load-works-container .load-works-header span.done{ 
    color: #04b70a;
}

.load-works-container .load-works-description{
    margin-bottom: 5px;
    border-radius: 8px;
    padding: 8px 8px 13px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: #333;
    background: #f1f7fd;
}

.load-works-container .load-works-description .load-works-container img{
    width: 32px;
}

.load-works-container  p, .load-cover-container p{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: #333;
    margin: 0;
    padding: 0;
    margin-top: 10px;
}

.load-cover-container p{
    margin: 0;
}

.add-work-modal-block .add-works-container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    width: 100%;
    margin-top: 15px;
}

.add-work-modal-block .add-work-elem{
    width: 100%;
    aspect-ratio: 1.9/1.3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #a5a5a5;
    border-radius: 4px;
    padding: 12px;
    cursor: pointer;
    gap: 10px;
    background: #fafafa;
    position: relative;
}

.add-work-modal-block .add-work-elem.hidden{
    display: none;
}

.add-work-modal-block .add-work-elem img{
    width: 24%;
    aspect-ratio: 1/1;
}

.add-work-modal-block .add-work-elem span{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 157%;
    text-align: center;
    color: #8a8a8a;
}

.add-work-modal-block .submit-form-button-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}

.add-work-modal-block .submit-form-button{
    border: 1px solid #04b70a;
    border-radius: 6px;
    padding: 19px;
    min-width: 160px;
    min-height: 48px;
    background: #04b70a;
    opacity: 0.5;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 71%;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.add-work-modal-block .submit-form-button:hover{
    opacity: 1;
}



.add-work-modal-block .add-work-elem .upload-work-input{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 100;
}

.add-work-modal-block .preview-work-img-container{
    width: 100%;
    aspect-ratio: 1.9/1.3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #a5a5a5;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.add-work-modal-block .preview-work-img-container.template{
    display: none;
}

.add-work-modal-block .preview-work-img-container .delete-icon{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 33px;
    padding: 5px 10px;
    background: rgba(255,255,255,0.7);
    z-index: 100;
    border-radius: 50%;
    cursor: pointer;
}

.add-work-modal-block .preview-work-img-container .resize-icon{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 33px;
    padding: 5px 10px;
    background: rgba(255,255,255,0.7);
    z-index: 100;
    border-radius: 50%;
    cursor: pointer;
}


.add-work-modal-block .preview-work-img-container .upload-work-preview{
    width: 100%;
    height: 100%;
    position: relative;
    object-fit: cover;
    z-index: 10;
}

.upload-work-modal-block .preview-work-img-container .upload-work-shadow-left{
    background: #111;
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 100%;
    z-index: 11;
}


.upload-work-modal-block .preview-work-img-container .upload-work-shadow-right{
    background: #111;
    opacity: 0.5;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 100%;
    z-index: 11;
}


.add-work-modal-wrapper::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.add-work-modal-wrapper:hover::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

.add-work-modal-wrapper:hover::-webkit-scrollbar-thumb{
  background-color: #ddd;
}


.add-work-modal-wrapper:hover::-webkit-scrollbar-thumb{
    background-color: #ccc;
}

.add-work-modal-wrapper:hover::-webkit-scrollbar-track{
  background: transparent;
}

.add-work-modal-wrapper::-webkit-scrollbar-track{
  display: none; 
}

.add-work-modal-block.hidden{
    display: none;
}

.add-work-modal-block .loaded-cover-block{
    width: 100%;
    display: grid;
    grid-template-columns: 188px 1fr;
    gap: 30px;
    padding-right: 10px;
    margin-top: 15px;
}


.loaded-cover-block .loaded-cover-desc{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border: 1px solid #ddd;
    background: #fff;
}

.loaded-cover-block .loaded-cover-desc .img-container{
    width: 100%;
    aspect-ratio: 1.9/1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.loaded-cover-block .loaded-cover-desc .img-container img{
    width: 100%;
    height: 100%;
    display: inline-block;
    object-fit: cover;
    position: relative;
}

.loaded-cover-block .loaded-cover-desc-content{
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.loaded-cover-block .loaded-cover-desc-content h3{
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 108%;
    color: #333;
    text-align: left;
}

.loaded-cover-block .loaded-cover-desc-content .part2{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.loaded-cover-block .loaded-cover-desc-content .work-section{
    width: 100%;
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid #ddd;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 108%;
    color: #8a8a8a;
}

.loaded-cover-block .loaded-cover-desc-content .work-visits{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.work-visits .like-count, .work-visits .visit-count{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.work-visits span{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12px;
    line-height: 125%;
    color: #333;
    margin: 0;
    padding: 0;
}

.work-visits img{
    width: 14px;
}

.loaded-cover-block .loaded-cover-resize{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-radio: 4/2.7;
    overflow: hidden;
}


.loaded-cover-block .loaded-cover-resize .overlay-container{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.loaded-cover-block .loaded-cover-resize .overlay-container img{
    width: 100%;
    height: 100%;
    position: relative;
    object-fit: cover;
    display: inline-block;
}

.loaded-cover-resize .cover-container{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 11;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loaded-cover-resize .select-img-part-container{
    width: 100%;
    height: 100%;
}

.loaded-cover-resize .select-img-part-container img{
    object-fit: contain;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
}

.add-work-modal-block .attach-work-to-portfolio-container{
    width: 100%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    background: #fff;
}

.add-work-modal-block .attach-work-to-portfolio-container label{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #111;
    margin: 0;
    padding: 0;
}

.add-work-modal-block .attach-work-to-portfolio-container select{
    width: 100%;
    background: #fff;
    border: 1px solid #a5a5a5;
    border-radius: 4px;
    padding: 9px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: #111;
} 

.add-work-modal-block select{
    outline: none;
}


.add-work-modal-block .add-work-details-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 15px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    background: #fff;
}

.add-work-modal-block .add-work-details-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.add-work-modal-block .add-work-details-header label{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #111;
}

.add-work-modal-block .add-work-details-header .required-to-do{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 12px;
    line-height: 133%;
    color: #f15b5b;
}

.add-work-modal-block .add-work-details-container .add-work-details-controls{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
}

.add-work-modal-block .add-work-details-controls select{
    background: #fff;
    border: 1px solid #a5a5a5;
    border-radius: 4px;
    padding: 10px;
    min-height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: #111;
}

.add-work-modal-block .add-work-details-checkbox-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.add-work-modal-block .add-work-details-checkbox-container .platform-label{
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 14px;
    line-height: 143%;
    color: #333;
}

.add-work-modal-block .add-work-details-checkboxes{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
}

.add-work-modal-block .add-work-details-checkboxes .checkbox-elem{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
}

.add-work-modal-block .checkbox-elem label{
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 136%;
    color: #333;
}



.add-work-modal-block #select-subcategory.hidden{
    display: none;
}


.create-fiwork-step-stage{
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
    margin-top: 10px;
}

.create-fiwork-step-stage.hidden{
    display: none;
}

.create-fiwork-step-stage .step-stage-name{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 133%;
    color: #111;
}

.create-fiwork-step-stage .step-stage-name .error-description{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: #f15b5b;
    margin: 0;
    padding: 0;
}


.create-fiwork-step-stage .step-stage-name .error-description.hidden{
    display: none
}

.create-fiwork-step-stage .step-stage-form{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
}

.create-fiwork-step-stage .step-stage-form.two-cols{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    width: 500px;
    gap: 15px;
}

.create-fiwork-step-stage .add-own-variant{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #177de5;
    cursor: pointer;
    margin: 0;
    padding: 0;
    margin-top: -5px;
}

.create-fiwork-step-stage .step-stage-form.two-cols .step-stage-form-col{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}


.create-fiwork-step-enter-name .step-stage-form .textarea-container{
    width: 100%;
    position: relative;
}

.create-fiwork-step-enter-name .step-stage-form textarea{
    width: 100%;
    border: 1px solid #a5a5a5;
    border-radius: 3px;
    padding: 11px 10px;
    height: 100px;
    min-height: 30px;
    background: #fff;
    resize: none;
    font-family: var(--font-family);
    font-style: italic;
    font-weight: 400;
    font-size: 32px;
    line-height: 123%;
    color: #111;
}

.create-fiwork-step-enter-name .step-stage-form textarea::placeholder{
    color: #808080;
}

.create-fiwork-step-enter-name .step-stage-form .word-interval{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: #8a8a8a;
    margin-top: 5px;
}

.create-fiwork-step-select-section .step-stage-form select{
    border: 1px solid #a5a5a5;
    border-radius: 4px;
    padding: 0 12px;
    width: 260px;
    height: 40px;
    max-width: 100%;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}


.create-fiwork-step-select-section #select-subcategory.hidden{
    display: none;
}


.create-fiwork-step-select-section .step-stage-form .similar-to-selection{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
    margin-top: 15px;
}


.create-fiwork-step-select-section .step-stage-form .similar-to-selection.hidden{
    display: none;
}



.create-fiwork-step-select-section .step-stage-form .similar-to-selection label{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: #111;
    margin: 0;
    padding: 0;
}

.create-fiwork-step-select-section .step-stage-form .similar-to-selection-row{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: #457edb;
    text-decoration: none;
    cursor: pointer;
}

.create-fiwork-step-select-section .step-stage-form .select-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

/*end of add-work-modal-block*/

@media (max-width: 1260px){
    .freelancer-info-container{
        gap: 20px;
    }
}

footer{
    margin-top: 0 !important;
}
/*end of reviews-about-freelancer-block*/

@media (max-width: 1100px){
    .my-services-container{
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width: 920px){
    .freelancer-avatar-container{
        width: 100px;
    }
    
    .freelancer-info-content1 .freelancer-trophies-container{
        display: inline-block; 
    }
    
    
    .freelancer-info-content1 .freelancer-trophies-container img{
        display: inline-block;
        margin-right: 10px;
    }
    
    .freelancer-portfolio-container{
        grid-template-columns: repeat(3,1fr);
    }
    
}

@media(max-width: 800px){
    .my-services-container{
        grid-template-columns: repeat(2,1fr);
    }

    .profile-services-empty{
        align-items: flex-start;
        gap: 14px;
        min-height: auto;
        padding: 16px;
        border-radius: 14px;
    }

    .profile-services-empty__icon{
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 12px;
    }

    .profile-services-empty__icon svg{
        width: 22px;
        height: 22px;
    }

    .profile-services-empty__content h3{
        font-size: 16px;
        line-height: 138%;
    }

    .profile-services-empty__content p{
        font-size: 13px;
        line-height: 150%;
    }
    
}

@media (max-width: 768px){
    /*.main-container{
        padding-left: 20px;
        padding-right: 20px;
    }*/
    
    .freelancer-info-container{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .write-message-button{
        margin-top: 20px;
    }
    
    
    .freelancer-info-content1{
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 20px;
    }

    .portfolio-viewer-dialog{
        padding: 72px 20px 24px;
        min-height: auto;
    }

    .portfolio-viewer-body{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .portfolio-viewer-title{
        font-size: 24px;
    }

    .portfolio-viewer-description{
        font-size: 15px;
    }

    .portfolio-viewer-thumbs{
        gap: 8px;
    }

    .portfolio-viewer-thumb{
        flex-basis: 74px;
        width: 74px;
        height: 54px;
        border-radius: 10px;
    }

    .portfolio-viewer-nav{
        width: 44px;
        height: 44px;
        top: auto;
        bottom: 24px;
        transform: none;
    }

    .portfolio-viewer-prev{
        left: 20px;
    }

    .portfolio-viewer-next{
        right: 20px;
    }
}

@media (max-width: 676px){
    .about-freelancer-container .project-to-do-description.is-mobile-collapsed{
        max-height: 168px;
        overflow: hidden;
        position: relative;
    }

    .about-freelancer-container .project-to-do-description.is-mobile-collapsed::after{
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 54px;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 86%);
    }

    .about-freelancer-container .profile-about-toggle{
        display: inline-flex;
        margin-top: 8px;
        margin-bottom: 18px;
    }

    .reviews-about-freelancer-block{
        padding-top: 10px;
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
        padding-right: 0;
        padding-left: 0;
    }

    .my-services-block{
        margin-bottom: 10px;
    }

    .reviewer-block, .freelancer-response-block{
        grid-template-columns: 30px 1fr;
        gap: 15px;
    }
    
    
    .reply-to-review-block{
        margin-top: 20px;
        padding-left: 45px;
    }
    
    
    .freelancer-portfolio-container{
        grid-template-columns: repeat(2,1fr);
    }
    
    .tooltip-text {
        display: none;
    }

    .reviews-header-help .reviews-header-help__tooltip{
        left: 16px;
        right: 16px;
        display: block;
        max-width: calc(100vw - 32px);
        position: fixed;
        top: 132px;
        transform: translateY(4px);
        width: auto;
    }

    .reviews-header-help:hover .reviews-header-help__tooltip{
        opacity: 0;
        transform: translateY(4px);
        visibility: hidden;
    }

    .reviews-header-help.is-open .reviews-header-help__tooltip{
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
    }

    .reviews-header-help .reviews-header-help__tooltip::before{
        display: none;
    }
    
    .tooltip-text::after{
        display: none;
    }
}

@media (max-width: 576px){
    .edit-own-profile-container{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
    }
}

@media (max-width: 500px){
    .freelancer-portfolio-container{
        gap: 10px; 
    }
    
    
    .add-portfolio-button img{
        width: 40px;
        aspect-ratio: 1/1;
    }
    
    .add-portfolio-button p{
        font-size: 12px;
    }

    .portfolio-viewer-modal{
        padding: 16px;
    }

    .portfolio-viewer-dialog{
        border-radius: 18px;
        padding: 64px 16px 88px;
    }

    .portfolio-viewer-meta{
        gap: 8px;
    }

    .portfolio-viewer-title{
        font-size: 20px;
    }

    .portfolio-viewer-subcategory,
    .portfolio-viewer-date{
        font-size: 12px;
    }

    .portfolio-viewer-description{
        font-size: 14px;
    }
}

@media(max-width: 400px){
    .freelancer-info-content1{
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .profile-services-empty{
        flex-direction: column;
        gap: 12px;
        padding: 15px;
    }

    .profile-services-empty__content h3,
    .profile-services-empty__content p{
        text-align: left;
    }
}

/* Portfolio viewer modal UX refresh */
.portfolio-viewer-modal{
    padding: clamp(18px, 3vw, 34px);
    background: rgba(17, 24, 39, .64);
}

.portfolio-viewer-dialog{
    max-width: min(980px, 100%);
    min-height: 0;
    max-height: calc(100dvh - 68px);
    padding: 28px 64px;
    border-radius: 24px;
    align-items: stretch;
    overflow: hidden;
}

.portfolio-viewer-body{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 14px;
}

.portfolio-viewer-media{
    max-width: 100%;
}

.portfolio-viewer-main-media{
    border-radius: 18px;
    aspect-ratio: 16/10;
}

.portfolio-viewer-close{
    top: 18px;
    right: 18px;
    background: #f3f5f7;
    transition: background .18s ease, transform .18s ease;
}

.portfolio-viewer-close:hover{
    background: #e9edf2;
    transform: scale(1.03);
}

.portfolio-viewer-nav{
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.portfolio-viewer-nav:not(:disabled):hover{
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 16px 36px rgba(34, 35, 37, .18);
}

@media (max-width: 900px){
    .portfolio-viewer-dialog{
        max-width: min(680px, 100%);
        padding: 64px 22px 24px;
        overflow-y: auto;
    }

    .portfolio-viewer-body{
        gap: 18px;
    }

    .portfolio-viewer-main-media{
        aspect-ratio: 16/11;
    }

}

@media (max-width: 768px){
    .portfolio-viewer-nav:not(:disabled):hover{
        transform: none;
    }
}

@media (max-width: 676px){
    .portfolio-viewer-modal{
        align-items: flex-end;
        justify-content: center;
        padding: 0;
        backdrop-filter: blur(4px);
    }

    .portfolio-viewer-dialog{
        width: 100%;
        max-width: none;
        max-height: min(92dvh, 760px);
        border-radius: 24px 24px 0 0;
        padding: 34px 16px calc(84px + env(safe-area-inset-bottom));
        display: block;
        box-shadow: 0 -18px 60px rgba(17, 24, 39, .22);
        animation: portfolioViewerSheetUp .24s cubic-bezier(.22,.8,.22,1) both;
        overscroll-behavior: contain;
    }

    .portfolio-viewer-dialog::before{
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: #d5d9df;
        transform: translateX(-50%);
    }

    .portfolio-viewer-close{
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
    }

    .portfolio-viewer-body{
        gap: 14px;
    }

    .portfolio-viewer-main-media{
        border-radius: 16px;
        aspect-ratio: 4/3;
    }

    .portfolio-viewer-thumbs{
        padding-bottom: 4px;
    }

    .portfolio-viewer-thumb{
        flex-basis: 70px;
        width: 70px;
        height: 52px;
        border-radius: 10px;
    }

    .portfolio-viewer-nav{
        top: auto;
        bottom: calc(18px + env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
        transform: none;
        box-shadow: 0 10px 24px rgba(34, 35, 37, .14);
    }

    .portfolio-viewer-prev{
        left: 16px;
    }

    .portfolio-viewer-next{
        right: 16px;
    }
}

@keyframes portfolioViewerSheetUp{
    from{
        opacity: .88;
        transform: translateY(32px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.send-message-modal-block-container,
.message-sent-modal-block-container,
.freelancer-information-modal-block-container{

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: rgba(0,0,0,0.5);

    backdrop-filter: blur(10px);

    z-index: 100;
}

.send-message-modal-block,
.message-sent-modal-block,
.freelancer-information-modal-block{
    padding: 0;
    width: 90%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}

.message-sent-modal-block,
.freelancer-information-modal-block{
    max-width: 460px;
    position: relative;
}

.freelancer-information-modal-block{
    padding: 24px;
}

.freelancer-information-modal-block-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.freelancer-information-modal-block .close-freelancer-information-modal-block{
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}


.send-message-modal-block-header,
.message-sent-modal-block-header{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 24px;
    background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 133%;
    color: #111;
}

.message-sent-modal-block-header{
    padding-bottom: 10px;
}

.message-sent-modal-block-content{
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.message-sent-modal-block-content img{
    width: 72px;
}

.message-sent-modal-block-content p{
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 133%;
    color: #090;
}

.message-sent-modal-block-content a{
    padding: 0;
    margin: 0;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 157%;
    color: #177de5;
}

#messageSentModal{
    opacity: 1;
    visibility: visible;
    transition: opacity .22s ease, visibility .22s ease;
    z-index: 100;
}

#messageSentModal .message-sent-modal-block{
    align-items: center;
    border-radius: 12px;
    box-shadow: 0 8px 8px -4px rgba(10, 13, 18, .04), 0 20px 24px -4px rgba(10, 13, 18, .1);
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 420px;
    opacity: 1;
    overflow: visible;
    padding: 20px;
    position: relative;
    transform: translateY(0);
    transition: transform .24s ease, opacity .24s ease;
    width: calc(100% - 40px);
}

#messageSentModal .message-sent-modal-block:focus{
    outline: none;
}

#messageSentModal .message-sent-modal-block-close{
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    height: 24px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 24px;
    z-index: 2;
}

#messageSentModal .message-sent-modal-block-close img{
    display: block;
    height: 24px;
    width: 24px;
}

#messageSentModal .message-sent-modal-block-header{
    align-items: center;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    padding: 20px 28px 0;
    text-align: center;
}

#messageSentModal .message-sent-modal-block-header h3{
    color: #181d27;
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 600;
    line-height: 156%;
    margin: 0;
    padding: 0;
}

#messageSentModal .message-sent-modal-block-header p{
    color: #535862;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 143%;
    margin: 0;
    padding: 0;
}

#messageSentModal .message-sent-modal-block-content{
    display: flex;
    justify-content: center;
    padding: 0 0 4px;
    width: 100%;
}

#messageSentModal .sent-message-link{
    align-items: center;
    background: #23c366;
    border: 1px solid #23c366;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 600;
    height: 48px;
    justify-content: center;
    line-height: 150%;
    margin: 0;
    padding: 0 20px;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    width: 100%;
}

#messageSentModal .sent-message-link:hover,
#messageSentModal .sent-message-link:focus-visible{
    background: #1fad5b;
    border-color: #1fad5b;
    box-shadow: 0 0 0 4px rgba(35, 195, 102, .16);
}

#messageSentModal .message-sent-modal-check{
    align-items: center;
    background: #ecfdf3;
    border: 1px solid #abefc6;
    border-radius: 50%;
    display: flex;
    height: 64px;
    justify-content: center;
    position: relative;
    width: 64px;
}

#messageSentModal .message-sent-modal-check-mark{
    border-bottom: 4px solid #17b26a;
    border-left: 4px solid #17b26a;
    display: block;
    height: 13px;
    opacity: 0;
    transform: rotate(-45deg) scale(.8);
    transform-origin: center;
    width: 26px;
}

#messageSentModal:not(.hidden) .message-sent-modal-check{
    animation: fiworkSentCheckPulse .48s cubic-bezier(.2, .8, .2, 1) both;
}

#messageSentModal:not(.hidden) .message-sent-modal-check-mark{
    animation: fiworkSentCheckDraw .36s .18s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes fiworkSentCheckPulse{
    0%{
        box-shadow: 0 0 0 0 rgba(23, 178, 106, .22);
        transform: scale(.78);
    }
    70%{
        box-shadow: 0 0 0 12px rgba(23, 178, 106, 0);
        transform: scale(1.05);
    }
    100%{
        box-shadow: 0 0 0 0 rgba(23, 178, 106, 0);
        transform: scale(1);
    }
}

@keyframes fiworkSentCheckDraw{
    0%{
        opacity: 0;
        transform: rotate(-45deg) scale(.62) translate(3px, -2px);
    }
    100%{
        opacity: 1;
        transform: rotate(-45deg) scale(1) translate(0, 0);
    }
}

.send-message-modal-block-header h3,
.message-sent-modal-block-header h3{
    margin: 0;
    padding: 0;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 22px;
    line-height: 127%;
    color: #111;
}

.freelancer-information-modal-block h3{
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 133%;
    text-align: center;
    color: #111;
    margin-bottom: 0;
}

.freelancer-information-modal-block .our-db-info{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    text-align: center;
    color: #333;
    text-align: center;
    width: 100%;
}

.freelancer-information-modal-block .our-db-additional-info{
    font-family: var(--font11);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    text-align: center;
    color: #333;
    text-align: center;
    width: 100%;
}

.freelancer-information-modal-block .buy-freelancer-info{
    margin-top: 16px;
    margin-bottom: 20px;
    border: 1px solid #04b70a;
    border-radius: 6px;
    padding: 19px 17px;
    width: 240px;
    height: 48px;
    min-width: 150px;
    max-width: 240px;
    background: #04b70a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 71%;
    text-align: center;
    color: #fff;
}


.freelancer-information-modal-block .buy-freelancer-info:hover{
    background: #05c81b;
}

.send-message-modal-block-header img,
.message-sent-modal-block-header img{
    width: 40px;
    cursor: pointer;
}

.send-message-modal-block-wrapper{

    display: grid;

    grid-template-columns: 166px 1fr;

    gap: 10px;

    padding: 24px;

}

.send-message-block-freelancer{

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-direction: column;

    gap: 10px;

}

.send-message-block-freelancer .img-container{

    border: 1px solid #f7f7f7;

    border-radius: 100%;

    width: 72px;

    height: 72px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

}

.send-message-block-freelancer .img-container img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: inline-block;

    position: relative;

}

.send-message-block-freelancer .freelancer-info{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding-bottom: 10px;

    border-bottom: 1px solid #e2e2e2;

}

.send-message-block-freelancer .freelancer-info .freelancer-name{

    font-family: var(--second-family);

    font-weight: 400;

    font-size: 14px;

    line-height: 114%;

    color: #8a8a8a;

    margin: 0;

    padding: 0;

}

.send-message-block-freelancer .freelancer-info .working-hours{

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    gap: 5px;

    font-family: var(--second-family);

    font-weight: 600;

    font-size: 12px;

    line-height: 133%;

    color: #8a8a8a;

    margin: 0;

    padding: 0;

}

.send-message-block-freelancer .freelancer-info .question-icon{

    width: 14px;

    height: 14px;

    cursor: pointer;

}

.send-message-block-freelancer .important-to-know{

    width: 100%;

    text-align: left;

    font-family: var(--second-family);

    font-weight: 600;

    font-size: 12px;

    line-height: 133%;

    color: #666;

    margin: 0;

    padding: 0;

}

.send-message-block-freelancer .important-to-know-content{

    font-family: var(--font-family);

    font-weight: 400;

    font-size: 12px;

    line-height: 170%;

    color: #949494;

    text-align: left;

    padding: 0;

    margin: 0;

    width: 100%;

    text-align: left;

}

.freelancer-response-info{

    width: 100%;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

}

.freelancer-response-info p{

    font-family: var(--second-family);

    font-weight: 400;

    font-size: 12px;

    line-height: 133%;

    color: #8a8a8a;

    margin: 0;

    padding: 0;

}

.freelancer-response-info p span{

    font-family: var(--second-family);

    font-weight: 600;

    font-size: 12px;

    line-height: 133%;

    color: #8a8a8a;

    margin: 0;

    padding: 0;

}

.send-message-block-textarea{

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 10px;

    width: 100%;

}

.send-message-block-textarea form{

    width: 100%;

}

.freelancer-response-info .vertical-line{

    height: 100%;

    border-right: 1px solid #bbb;

}

.send-message-modal-block-textarea{

    padding: 7px 10px 7px 12px;

    height: 216px;

    font-family: var(--second-family);

    font-weight: 400;

    font-size: 14px;

    line-height: 171%;

    color: #000;

    resize: none;

    border: 1px solid #a5a5a5;

    border-radius: 4px;

    width: 100%;

}

.send-modal-block-message-button-container{

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 10px;

}

.add-file-area-container{

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

}

.add-file-area{

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

    gap: 5px;

    cursor: pointer;

}

.add-file-area span{

    margin: 0;

    padding: 0;

    font-family: var(--second-family);

    font-weight: 600;

    font-size: 14px;

    line-height: 157%;

    color: #177de5;

}

.add-file-area-container p{

    font-family: var(--second-family);

    font-weight: 400;

    font-size: 12px;

    line-height: 133%;

    color: #8a8a8a;

    margin: 0;

    padding: 0;

    text-align: left;

}

.blue-attach-icon{

    width: 24px;

}

.submit-send-message-modal-form{

    border-radius: 6px;

    border: none;

    padding: 10px;

    width: 100%;

    min-height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: var(--second-family);

    font-weight: 600;

    font-size: 14px;

    line-height: 157%;

    text-align: center;

    color: #fff;

    background: #04b70a;

    cursor: pointer;

}

.submit-send-message-modal-form:hover{

    opacity: 0.9;

}

.send-message-modal-block-container.hidden,
.message-sent-modal-block-container.hidden, 
.freelancer-information-modal-block-container.hidden{
    display: none;
}
/*end modal-blocks*/
.attached-files{
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fafafa;
}

.attached-files-title{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
    color: #111;
}

.attached-files-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 160px;
    overflow: auto;
}

.attached-file-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #eee;
}

.attached-file-left{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.attached-file-name{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 13px;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}

.attached-file-meta{
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    color: #666;
}

.attached-file-remove{
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 8px;
}

.attached-file-remove:hover{
    background: #f1f1f1;
}
.submit-send-message-modal-form{display:inline-flex;align-items:center;gap:10px}
.submit-send-message-modal-form.is-loading{opacity:.85;pointer-events:none}
.submit-send-message-modal-form .btn-loader{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.15);border-top-color:rgba(0,0,0,.65);animation:btnSpin .8s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* Shared portfolio work modal on profile page */
body.portfolio-work-modal-open{
    overflow: hidden;
}

.portfolio-loader{
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
}

.portfolio-loader.hidden{
    display: none;
}

.portfolio-loader__box{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.portfolio-loader__spinner{
    width: 22px;
    height: 22px;
    border: 3px solid rgba(0, 0, 0, .15);
    border-top-color: rgba(0, 0, 0, .65);
    border-radius: 50%;
    animation: profilePortfolioSpin .9s linear infinite;
}

@keyframes profilePortfolioSpin{
    to{
        transform: rotate(360deg);
    }
}

.add-work-modal-block{
    padding: 24px;
    background: rgba(15, 23, 42, .56);
    font-family: "Inter", var(--font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.add-work-modal-block *{
    box-sizing: border-box;
}

.add-work-modal-block:not(.hidden){
    animation: profilePortfolioModalFadeIn .18s ease both;
}

.add-work-modal-container{
    width: min(920px, calc(100vw - 48px));
    max-width: none;
    max-height: min(90dvh, 880px);
    border-radius: 24px;
    background: #f8fafc;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .28);
    transition: transform .28s cubic-bezier(.22,.8,.22,1), opacity .22s ease;
}

.add-work-modal-block.hidden .add-work-modal-container{
    transform: translateY(18px) scale(.98);
    opacity: 0;
}

.add-work-modal-handle{
    display: none;
}

.add-work-modal-header{
    min-height: auto;
    padding: 18px 22px 14px;
    align-items: flex-start;
    gap: 18px;
    border-bottom: 1px solid #edf0f4;
    background: #fff;
    box-shadow: none;
}

.add-work-modal-title{
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.add-work-modal-header h3{
    margin: 0;
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 22px;
    line-height: 127%;
    color: #111827;
}

.add-work-modal-title span{
    max-width: 560px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 145%;
    color: #6b7280;
}

.add-work-modal-close{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 0;
    border-radius: 50%;
    background: #f3f4f6;
    color: #374151;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.add-work-modal-close:hover{
    background: #e5e7eb;
    color: #111827;
}

.add-work-modal-close svg{
    width: 20px;
    height: 20px;
}

.add-work-modal-wrapper{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    max-height: calc(min(90dvh, 880px) - 78px);
    padding: 16px 22px 22px;
}

.add-work-modal-wrapper .add-work-modal-description,
.load-works-container,
.load-cover-container,
.add-work-modal-block .submit-form-button-container,
.portfolio-loader{
    grid-column: 1 / -1;
}

.add-work-name-container,
.add-work-modal-block .add-work-details-container{
    grid-column: 1 / -1;
}

.add-work-name-container,
.add-work-modal-block .add-work-details-container,
.load-works-container,
.load-cover-container{
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}

.add-work-modal-wrapper .add-work-modal-description{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e7edf5;
    border-radius: 14px;
    background: #eef6ff;
    color: #405167;
    font-size: 13px;
    line-height: 150%;
}

.add-work-name-label-container,
.add-work-modal-block .add-work-details-header,
.load-works-container .load-works-header,
.load-cover-container .load-cover-header{
    align-items: center;
    margin: 0 0 12px;
}

.add-work-name-label-container label,
.add-work-modal-block .add-work-details-header label,
.load-works-container .load-works-header h3,
.load-cover-container .load-cover-header h3{
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 15px;
    line-height: 140%;
    color: #111827;
}

.add-work-name-label-container span,
.add-work-modal-block .add-work-details-header .required-to-do,
.load-works-container .load-works-header span,
.load-cover-container .load-cover-header span{
    padding: 4px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    color: #6b7280;
}

.add-work-modal-block .add-work-details-header .required-to-do,
.load-cover-container .load-cover-header span{
    background: #fff1f2;
    color: #e11d48;
}

.load-works-container .load-works-header span.done{
    background: #ecfdf3;
    color: #059669;
}

.add-work-name-container .add-work-name-input,
.add-work-modal-block .add-work-details-controls select,
.add-work-modal-block #portfolio-category-children select,
.add-work-modal-block .attach-work-to-portfolio-container select{
    width: 100%;
    min-height: 46px;
    padding: 0 38px 0 14px;
    border: 1px solid #d6dbe3 !important;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    color: #111827;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.add-work-name-container .add-work-name-input:focus,
.add-work-modal-block .add-work-details-controls select:focus,
.add-work-modal-block #portfolio-category-children select:focus,
.add-work-modal-block .attach-work-to-portfolio-container select:focus{
    border-color: #04b70a !important;
    box-shadow: 0 0 0 3px rgba(4, 183, 10, .1) !important;
    outline: none;
}

.add-work-name-container .add-work-name-counter{
    margin-top: 7px;
    font-family: var(--second-family);
    color: #8b95a1;
}

.add-work-modal-block .add-work-details-container{
    align-items: stretch;
    gap: 12px;
}

.add-work-modal-block .add-work-details-container .add-work-details-controls,
.add-work-modal-block #portfolio-category-children{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.portfolio-category-hint{
    width: 100%;
    margin-top: 0;
    padding: 9px 11px;
    border-radius: 12px;
    background: #f7faf8;
    color: #4f6f58;
    font-family: var(--font-family);
    font-size: 12px;
    line-height: 145%;
}

.load-works-container p,
.load-cover-container p{
    margin: 0 0 12px;
    color: #667085;
    line-height: 150%;
}

.add-work-modal-block .add-works-container{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 0;
}

.add-work-modal-block .add-work-elem,
.add-work-modal-block .preview-work-img-container{
    min-height: 112px;
}

.add-work-modal-block .add-work-elem{
    border: 1px dashed #c9d4e2;
    border-radius: 16px;
    background: #f9fafb;
    gap: 9px;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.add-work-modal-block .add-work-elem:hover{
    border-color: #04b70a;
    background: #f3fff5;
    transform: translateY(-1px);
}

.add-work-modal-block .add-work-elem img{
    width: 32px;
    height: 32px;
}

.add-work-modal-block .add-work-elem span{
    max-width: 150px;
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 13px;
    line-height: 135%;
    color: #4b5563;
}

.add-work-modal-block .preview-work-img-container,
.loaded-cover-block .loaded-cover-desc{
    border-color: #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
}

.add-work-modal-block .preview-work-img-container{
    transition: transform .18s ease, opacity .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.add-work-modal-block .preview-work-img-container .delete-icon,
.add-work-modal-block .preview-work-img-container .resize-icon{
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

.add-work-modal-block .preview-work-img-container .resize-icon{
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}

.add-work-modal-block .preview-work-img-container .resize-icon:active{
    cursor: grabbing;
}

.add-work-modal-block .preview-work-img-container.is-dragging{
    opacity: .62;
    transform: scale(.98);
    border-color: #04b70a;
    box-shadow: 0 10px 24px rgba(4, 183, 10, .14);
}

.add-work-modal-block .preview-work-img-container.is-drag-over{
    border-color: rgba(4, 183, 10, .55);
}

.add-work-modal-block .loaded-cover-block{
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    padding-right: 0;
}

.add-work-modal-block .loaded-cover-block.hidden{
    display: none;
}

.loaded-cover-block .loaded-cover-desc-content{
    gap: 18px;
}

.loaded-cover-block .loaded-cover-resize{
    min-height: 300px;
    border-radius: 16px;
    background: #111827;
}

.add-work-modal-block .submit-form-button-container{
    justify-content: flex-end;
    margin-top: 2px;
    padding-top: 2px;
}

.add-work-modal-block .submit-form-button{
    min-width: 190px;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 14px;
    background: #04b70a;
    opacity: 1;
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    transition: transform .16s ease, background .16s ease;
}

.add-work-modal-block .submit-form-button:hover{
    background: #05a90a;
    transform: translateY(-1px);
}

.add-portfolio-button{
    appearance: none;
    padding: 0;
    font: inherit;
    color: inherit;
}

@keyframes profilePortfolioModalFadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

@media (max-width: 900px){
    .add-work-modal-wrapper{
        grid-template-columns: 1fr;
    }

    .add-work-name-container,
    .add-work-modal-block .add-work-details-container,
    .load-works-container,
    .load-cover-container,
    .add-work-modal-wrapper .add-work-modal-description,
    .add-work-modal-block .submit-form-button-container,
    .portfolio-loader{
        grid-column: 1;
    }

    .add-work-modal-block .add-works-container{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px){
    .add-work-modal-block{
        align-items: flex-end;
        justify-content: center;
        padding: 0;
        background: rgba(15, 23, 42, .52);
        backdrop-filter: blur(10px);
        z-index: 240;
    }

    .add-work-modal-container{
        width: 100%;
        max-width: none;
        max-height: min(92dvh, 760px);
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -20px 70px rgba(15, 23, 42, .24);
        transform: translateY(0);
    }

    .add-work-modal-block.hidden .add-work-modal-container{
        transform: translateY(110%);
        opacity: 1;
    }

    .add-work-modal-handle{
        display: block;
        width: 42px;
        height: 4px;
        flex: 0 0 auto;
        margin: 10px auto 0;
        border-radius: 999px;
        background: #d1d5db;
    }

    .add-work-modal-header{
        padding: 12px 16px 14px;
        gap: 12px;
    }

    .add-work-modal-header h3{
        font-size: 19px;
        line-height: 126%;
    }

    .add-work-modal-title span{
        font-size: 12px;
        line-height: 140%;
    }

    .add-work-modal-close{
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .add-work-modal-wrapper{
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-height: calc(min(92dvh, 760px) - 92px);
        padding: 12px 14px calc(118px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-padding-bottom: calc(118px + env(safe-area-inset-bottom));
    }

    .add-work-modal-wrapper .add-work-modal-description{
        padding: 10px 12px;
        border-radius: 14px;
        font-size: 12px;
    }

    .add-work-name-container,
    .add-work-modal-block .add-work-details-container,
    .load-works-container,
    .load-cover-container{
        padding: 14px;
        border-radius: 16px;
    }

    .add-work-name-label-container,
    .add-work-modal-block .add-work-details-header,
    .load-works-container .load-works-header,
    .load-cover-container .load-cover-header{
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
    }

    .add-work-name-container .add-work-name-input,
    .add-work-modal-block .add-work-details-controls select,
    .add-work-modal-block #portfolio-category-children select,
    .add-work-modal-block .attach-work-to-portfolio-container select{
        min-height: 48px;
        font-size: 16px;
    }

    .add-work-modal-block .add-work-details-container .add-work-details-controls,
    .add-work-modal-block #portfolio-category-children{
        grid-template-columns: 1fr;
        width: 100%;
    }

    .portfolio-category-hint{
        padding: 8px 10px;
        font-size: 12px;
    }

    .add-work-modal-block .add-works-container{
        grid-template-columns: 1fr;
    }

    .add-work-modal-block .add-work-elem{
        min-height: 104px;
        aspect-ratio: auto;
    }

    .add-work-modal-block .loaded-cover-block{
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .loaded-cover-block .loaded-cover-resize{
        min-height: 240px;
    }

    .add-work-modal-block .submit-form-button-container{
        position: static;
        bottom: auto;
        z-index: auto;
        margin-top: 0;
        padding: 4px 0 0;
        background: transparent;
    }

    .add-work-modal-block .submit-form-button{
        width: 100%;
        min-height: 52px;
        border-radius: 16px;
        font-size: 15px;
    }
}

/* Compact portfolio editor, aligned with the balance dialog. */
.add-work-modal-block{
    padding: 20px;
    background: rgba(17, 24, 39, .48);
    z-index: 10020;
}

.add-work-modal-container{
    width: min(680px, calc(100vw - 40px));
    max-width: none;
    max-height: min(88dvh, 760px);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(17, 24, 39, .16);
}

.add-work-modal-header{
    flex: 0 0 auto;
    min-height: 0;
    padding: 22px 28px 14px;
    align-items: center;
    border: 0;
}

.add-work-modal-header h3{
    font-size: 20px;
    line-height: 1.25;
}

.add-work-modal-close{
    width: 34px;
    height: 34px;
    flex-basis: 34px;
}

.add-work-modal-wrapper{
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    padding: 10px 28px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.add-work-name-container,
.add-work-modal-block .add-work-details-container,
.load-works-container,
.load-cover-container{
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.load-works-container,
.load-cover-container{
    grid-column: auto;
}

.add-work-name-label-container,
.add-work-modal-block .add-work-details-header,
.load-works-container .load-works-header,
.load-cover-container .load-cover-header{
    margin: 0 0 7px;
    align-items: center;
}

.add-work-name-label-container label,
.add-work-modal-block .add-work-details-header label,
.load-works-container .load-works-header h3,
.load-cover-container .load-cover-header h3{
    font-size: 13px;
    font-weight: 600;
}

.add-work-name-label-container span,
.add-work-modal-block .add-work-details-header .optional-to-do,
.load-works-container .load-works-header span,
.load-cover-container .load-cover-header span{
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 11px;
    font-weight: 400;
}

.add-work-name-container .add-work-name-input,
.add-work-modal-block .add-work-details-controls select,
.add-work-modal-block #portfolio-category-children select{
    min-height: 42px;
    padding-left: 12px;
    border-color: #e2e5e9 !important;
    border-radius: 10px;
    background-color: #f7f8fa;
    box-shadow: none;
}

.add-work-modal-block .add-work-details-container .add-work-details-controls,
.add-work-modal-block #portfolio-category-children{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.portfolio-category-hint{
    padding: 0;
    margin-top: 4px;
    background: transparent;
    color: #7b8490;
}

.load-works-container p,
.load-cover-container p{
    margin: 0 0 9px;
    font-size: 11px;
    line-height: 1.4;
}

.add-work-modal-block .add-works-container{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.load-cover-container .add-works-container{
    grid-template-columns: 1fr;
}

.add-work-modal-block .add-work-elem,
.add-work-modal-block .preview-work-img-container{
    min-height: 94px;
    aspect-ratio: auto;
    border-radius: 12px;
}

.add-work-modal-block .add-work-elem{
    gap: 5px;
    background: #f7f8fa;
}

.add-work-modal-block .add-work-elem img{
    width: 24px;
    height: 24px;
}

.add-work-modal-block .add-work-elem span{
    font-size: 12px;
    font-weight: 500;
}

.add-work-modal-block .loaded-cover-block{
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
    padding: 0;
}

.loaded-cover-block .loaded-cover-resize{
    min-height: 190px;
}

.add-work-modal-block .submit-form-button-container{
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 14px 28px 20px;
    border-top: 1px solid #edf0f3;
    background: #fff;
}

.add-work-modal-cancel,
.add-work-modal-block .submit-form-button{
    min-width: 112px;
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    font-family: var(--second-family);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.add-work-modal-cancel{
    color: #344054;
    background: #f2f4f7;
}

.add-work-modal-cancel:hover{
    background: #e9edf2;
}

.add-work-modal-block .submit-form-button{
    background: #0188ff;
}

.add-work-modal-block .submit-form-button:hover{
    background: #0074d9;
    transform: none;
}

@media (max-width: 700px){
    .add-work-modal-block{
        padding: 0;
    }

    .add-work-modal-container{
        width: 100%;
        max-height: min(92dvh, 760px);
        border-radius: 20px 20px 0 0;
    }

    .add-work-modal-header{
        padding: 16px 18px 12px;
    }

    .add-work-modal-wrapper{
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 8px 18px 18px;
    }

    .load-works-container,
    .load-cover-container{
        grid-column: 1;
    }

    .add-work-modal-block .add-works-container{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .load-cover-container .add-works-container{
        grid-template-columns: 1fr;
    }

    .add-work-modal-block .submit-form-button-container{
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    }

    .add-work-modal-block .submit-form-button{
        width: auto;
        min-height: 42px;
        font-size: 13px;
    }
}

.profile-content-tabs {
    width: 100%;
    margin-top: 26px;
    overflow: hidden;
    border-bottom: 1px solid #e6e8ec;
}

.profile-content-tabs .company-profile-tabs__list {
    min-width: max-content;
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scrollbar-width: none;
}

.profile-content-tabs .company-profile-tabs__list::-webkit-scrollbar {
    display: none;
}

.profile-content-tabs .company-profile-tabs__item {
    min-height: 48px;
    padding: 0 1px;
    display: inline-flex;
    align-items: center;
    position: relative;
    border: 0;
    color: #6b7280;
    background: transparent;
    text-decoration: none;
    font: 650 15px "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease;
}

.profile-content-tabs .company-profile-tabs__item::after {
    height: 3px;
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    border-radius: 3px 3px 0 0;
    background: #177de5;
    content: "";
    opacity: 0;
    transform: scaleX(.45);
    transition: opacity .18s ease, transform .18s ease;
}

.profile-content-tabs .company-profile-tabs__item:hover,
.profile-content-tabs .company-profile-tabs__item:focus-visible,
.profile-content-tabs .company-profile-tabs__item.is-active {
    color: #111827;
}

.profile-content-tabs .company-profile-tabs__item:focus-visible {
    border-radius: 6px;
    outline: 2px solid rgba(23, 125, 229, .25);
    outline-offset: -2px;
}

.profile-content-tabs .company-profile-tabs__item.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.profile-rating-digest {
    width: 100%;
    height: auto;
    padding: 8px;
    display: grid;
    align-content: start;
    gap: 8px;
    overflow: visible;
    border: 1px solid #e7e8eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.profile-rating-digest .freelancer-success-details {
    padding: 14px;
    gap: 16px;
    border: 0;
    border-radius: 10px;
    background: #fff;
}

.profile-rating-digest .freelancer-rating {
    margin-top: 0;
}

.profile-rating-digest .freelancer-rating-data-container {
    margin: 4px 0;
    padding: 14px 0;
    gap: 12px;
    border-color: #ececef;
}

.profile-rating-digest .freelancer-rating-data {
    font-size: 14px;
}

.profile-rating-digest .freelancer-rating-data .quantity {
    font-size: 16px;
}

.profile-rating-digest .block-freelancer {
    margin-top: 12px;
}

.profile-rating-digest .write-message-button {
    min-height: 44px;
    border-radius: 10px;
}

.profile-resume-digest {
    width: 100%;
    min-height: 62px;
    margin-top: 16px;
    padding: 13px 15px 13px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: visible;
    border: 1px solid #e7e8eb;
    border-radius: 14px;
    color: #202124;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.profile-resume-digest:hover {
    border-color: #d8dadd;
    background: #fafafa;
    transform: translateY(-1px);
}

.profile-resume-digest .profile-resume-trigger__text {
    min-width: 0;
    color: #202124;
    font-family: var(--second-family);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.profile-resume-digest .dashboard-blog-digest__title-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #5d6268;
    background: #f0f1f2;
}

.profile-resume-digest .dashboard-blog-digest__title-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.profile-resume-digest .array-right {
    width: 14px;
    opacity: .68;
}

/* Public profile: the main column follows the calm card language of the blog feed. */
.profile-community-main {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.profile-community-main > .freelancer-main-info {
    position: relative;
    min-width: 0;
    padding: 24px;
    gap: 24px;
    overflow: visible;
    border: 1px solid #e7e8eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.profile-community-main__owner-action {
    position: absolute;
    z-index: 3;
    top: 24px;
    right: 24px;
}

.profile-community-main__edit {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #e2e3e5;
    border-radius: 11px;
    color: #2c2c2c;
    background: #f7f7f8;
    font: 700 13px/1 Inter, Arial, sans-serif;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.profile-community-main__edit:hover {
    border-color: #d5d6d8;
    color: #202124;
    background: #efeff1;
    transform: translateY(-1px);
}

.profile-community-main .profile-actions-container {
    top: 24px;
    right: 24px;
}

.profile-community-main .freelancer-info-content1 {
    width: 100%;
    min-width: 0;
    padding-right: 190px;
}

.profile-community-main .freelancer-avatar-container {
    width: 132px;
    flex: 0 0 132px;
    border: 1px solid #ececee;
}

.profile-community-main .freelancer-info-content1 .freelancer-info {
    min-width: 0;
    padding-top: 4px;
}

.profile-community-main .freelancer-info-content1 .freelancer-trophies-container {
    max-width: 100%;
    min-height: 50px;
    margin-top: 4px;
    padding: 5px 7px;
    gap: 2px;
    flex-wrap: wrap;
    border: 1px solid #ececee;
    border-radius: 13px;
    background: #f7f7f8;
}

.profile-community-main .freelancer-info-content1 .freelancer-trophies-container img {
    width: 36px;
    height: 36px;
    margin: 0;
    object-fit: contain;
}

.profile-community-main .profile-content-tabs {
    width: 100%;
    margin-top: 2px;
}

.profile-community-main .profile-content-tabs {
    position: relative;
    overflow: visible;
    border-bottom: 0;
    overflow-anchor: none;
}

.profile-community-main .profile-content-tabs .company-profile-tabs__list {
    min-width: 0;
    height: 49px;
    align-items: stretch;
    border-bottom: 1px solid #e6e8ec;
}

.profile-community-main .profile-content-tabs .company-profile-tabs__item {
    height: 48px;
    min-height: 48px;
    padding: 0 1px;
    align-self: stretch;
    line-height: 48px;
    vertical-align: top;
    transform: none;
}

.profile-community-main .profile-content-tabs .company-profile-tabs__item::after {
    bottom: 0;
    z-index: 1;
}

.profile-community-main .profile-content-tabs .company-profile-tabs__item.is-active {
    transform: none;
}

.profile-community-main .about-freelancer-container {
    width: 100%;
    max-width: none;
}

.profile-portfolio-digest {
    width: calc(100% - 364px);
    margin-top: 24px;
    padding: 24px;
    overflow: hidden;
    scroll-margin-top: 24px;
    border: 1px solid #e7e8eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.profile-portfolio-digest .freelancer-portfolio-header {
    min-width: 0;
    padding-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #ececef;
}

.profile-portfolio-digest .freelancer-portfolio-header h2 {
    flex: 0 0 auto;
    margin: 0;
    color: #202124;
    font-family: Inter, Arial, sans-serif;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.3;
}

.profile-portfolio-digest .freelancer-portfolio-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
}

.profile-portfolio-digest .freelancer-portfolio-nav::-webkit-scrollbar {
    display: none;
}

.profile-portfolio-digest .freelancer-portfolio-nav-elem {
    min-width: auto;
    min-height: 34px;
    margin: 0;
    padding: 8px 13px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    border-color: #e4e5e7;
    border-radius: 10px;
    color: #6b7076;
    background: #f7f7f8;
    font: 650 12px/1.3 Inter, Arial, sans-serif;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.profile-portfolio-digest .freelancer-portfolio-nav-elem:hover {
    border-color: #d5d7da;
    color: #202124;
    background: #f0f0f2;
}

.profile-portfolio-digest .freelancer-portfolio-nav-elem.active {
    border-color: #2c2c2c;
    color: #fff;
    background: #2c2c2c;
    font: 650 12px/1.3 Inter, Arial, sans-serif;
}

.profile-portfolio-digest .freelancer-portfolio-container {
    margin-top: 20px;
    gap: 16px;
}

.profile-portfolio-digest .add-portfolio-button {
    gap: 10px;
    border: 1px dashed #cfd2d6;
    border-radius: 12px;
    color: #5f646a;
    background: #fafafa;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.profile-portfolio-digest .add-portfolio-button:hover {
    border-color: #aeb2b7;
    color: #202124;
    background: #f4f4f5;
    transform: translateY(-1px);
}

.profile-portfolio-digest .add-portfolio-button:focus-visible {
    outline: 2px solid rgba(44, 44, 44, .2);
    outline-offset: 2px;
}

.profile-portfolio-digest .add-portfolio-button__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #e1e2e4;
    border-radius: 12px;
    color: #4f5459;
    background: #fff;
}

.profile-portfolio-digest .add-portfolio-button__icon svg {
    width: 24px;
    height: 24px;
}

.profile-portfolio-digest .add-portfolio-button__label {
    color: inherit;
    font: 700 13px/1.3 Inter, Arial, sans-serif;
    text-align: center;
}

.profile-portfolio-digest .portfolio-load-more-block {
    margin: 20px 0 0;
}

.profile-reviews-shell {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.profile-reviews-shell__container {
    width: 100%;
    max-width: 1240px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
}

.profile-details-page,
.profile-main-shell,
.profile-main-shell__container {
    width: 100%;
}

.main-container:has(> .profile-details-page) {
    width: 100%;
    max-width: 1240px;
}

.profile-main-shell {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.profile-main-shell__container {
    max-width: 1240px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.profile-reviews-digest {
    width: calc(100% - 364px);
    max-width: none;
    min-height: 0;
    margin: 24px 0 0;
    padding: 24px;
    overflow: visible;
    scroll-margin-top: 24px;
    border: 1px solid #e7e8eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.profile-reviews-digest .reviews-about-freelancer-header {
    padding: 0 0 18px;
    border: 0;
    border-bottom: 1px solid #ececef;
    border-radius: 0;
    background: transparent;
}

.profile-reviews-digest .reviews-about-freelancer-header h2 {
    color: #202124;
    font-family: Inter, Arial, sans-serif;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.3;
}

.profile-reviews-digest .reviews-about-freelancer-header .reviews-filter-action {
    min-height: 38px;
    border-color: #e4e5e7;
    background: #f7f7f8;
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
}

.profile-reviews-digest .reviews-freelancer-container {
    min-width: 0;
}

.profile-reviews-digest .review-freelancer-content {
    margin-top: 0;
    padding: 22px 0;
}

.profile-reviews-digest .review-freelancer-content:first-child {
    border-top: 0;
}

.profile-reviews-digest .review-freelancer-content:last-child {
    padding-bottom: 0;
}

.profile-reviews-digest .review-freelancer-content-empty {
    padding: 20px 0 0;
}

.profile-reviews-digest .reviewer-review {
    gap: 0;
    padding: 18px;
    border: 1px solid #e4e6e8;
    border-radius: 14px;
    background: #fafafa;
}

.profile-reviews-digest .review-order-meta {
    margin: 0 0 14px;
    padding: 0 0 12px;
    gap: 8px;
    flex-wrap: nowrap;
    border-bottom: 1px solid #e5e6e8;
}

.profile-reviews-digest .review-order-label {
    min-height: 24px;
    padding: 5px 9px;
    border-radius: 7px;
    color: #74787e;
    background: #ececef;
    font-family: Inter, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
}

.profile-reviews-digest .review-order-title {
    min-width: 0;
    flex: 1 1 auto;
    color: #52565b;
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.profile-reviews-digest a.review-order-title:hover {
    color: #202124;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.profile-reviews-digest .reviewer-block {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.profile-reviews-digest .reviewer-img-container {
    width: 42px;
    border: 1px solid #e1e2e4;
}

.profile-reviews-digest .reviewer-feedback {
    min-width: 0;
    gap: 2px;
}

.profile-reviews-digest .reviewer-username {
    color: #202124;
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.profile-reviews-digest .review-date {
    color: #85898e;
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
}

.profile-reviews-digest .reviewer-status {
    width: 28px;
    height: 28px;
    margin-left: auto;
    flex: 0 0 28px;
    margin: 0;
    display: grid;
    place-items: center;
    align-self: center;
}

.profile-reviews-digest .fiwork-review-sentiment-icon {
    width: 24px;
    height: 24px;
    display: block;
}

.profile-reviews-digest .reviewer-review-text {
    max-width: 680px;
    padding: 0 0 3px;
    border: 0;
    border-radius: 0;
    color: #303236;
    background: transparent;
    box-shadow: none;
    font-family: Inter, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

.profile-reviews-digest .reviewer-block + .reviewer-review-text {
    margin-top: 0;
}

.profile-reviews-digest .reviewer-review-response-functions {
    margin-top: 14px;
}

.profile-reviews-digest .reviewer-review-response-functions .there-is-response {
    min-height: 28px;
    padding: 6px 10px;
    display: inline-flex;
    border: 1px solid #dce5ee;
    border-radius: 9px;
    color: #626a73;
    background: #f2f6fa;
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    position: relative;
    z-index: 2;
}

.profile-reviews-digest .reviewer-review-response-functions:has(.there-is-response:not(.hidden)):not(:has(.open-close-response-option)) {
    display: flex;
}

.profile-reviews-digest .freelancer-response-wrapper {
    margin-top: 0;
}

.profile-reviews-digest .freelancer-response-container {
    padding: 13px 14px;
    border: 1px solid #e2e4e7;
    border-radius: 11px;
    background: #fff;
}

.profile-reviews-digest .freelancer-response-block {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
}

.profile-reviews-digest .freelancer-response-img-container {
    width: 38px;
    border: 1px solid #e1e2e4;
}

.profile-reviews-digest .freelancer-response-text {
    margin-top: 7px;
    color: #45494e;
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.profile-reviews-digest .response-functions-block.has-replies {
    position: relative;
    padding-left: 22px;
}

.profile-reviews-digest .profile-review-branch {
    width: 22px;
    position: absolute;
    top: 13px;
    bottom: 25px;
    left: 0;
    pointer-events: none;
}

.profile-reviews-digest .profile-review-branch::before {
    width: 1px;
    position: absolute;
    top: 0;
    bottom: 11px;
    left: 7px;
    background: #cfd4da;
    content: "";
}

.profile-reviews-digest .profile-review-branch__arc {
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 0;
    left: 7px;
    border-bottom: 1px solid #cfd4da;
    border-left: 1px solid #cfd4da;
    border-radius: 0 0 0 10px;
}

@media (max-width: 920px) {
    .profile-community-main {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .profile-community-main .freelancer-info-content1 {
        padding-right: 0;
        padding-top: 52px;
    }

    .profile-portfolio-digest {
        width: calc(100% - 324px);
    }

    .profile-reviews-digest {
        width: calc(100% - 324px);
    }
}

@media (max-width: 768px) {
    .profile-community-main {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .profile-community-main > .freelancer-main-info {
        padding: 18px;
        border-radius: 16px;
    }

    .profile-community-main__owner-action {
        position: static;
        width: 100%;
        order: -1;
    }

    .profile-community-main__edit {
        width: 100%;
    }

    .profile-community-main .profile-actions-container {
        position: static;
        width: 100%;
        justify-content: flex-end;
        order: -1;
    }

    .profile-community-main .freelancer-info-content1 {
        padding-top: 0;
    }

    .profile-portfolio-digest {
        width: 100%;
        padding: 18px;
        border-radius: 16px;
    }

    .profile-reviews-digest {
        width: 100%;
        margin-top: 18px;
        padding: 18px;
        border-radius: 16px;
    }

    .profile-reviews-digest .reviews-about-freelancer-header {
        padding: 0 0 16px;
    }

    .profile-portfolio-digest .freelancer-portfolio-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .profile-portfolio-digest .freelancer-portfolio-nav {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .profile-community-main .freelancer-info-content1 {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 14px;
    }

    .profile-community-main .freelancer-avatar-container {
        width: 76px;
        flex-basis: 76px;
    }

    .profile-portfolio-digest {
        padding: 15px;
    }

    .profile-reviews-digest {
        padding: 15px;
    }

    .profile-portfolio-digest .freelancer-portfolio-header h2 {
        font-size: 18px;
    }

    .profile-reviews-digest .reviews-about-freelancer-header h2 {
        font-size: 18px;
    }

    .profile-portfolio-digest .freelancer-portfolio-container {
        gap: 10px;
    }
}

@media (max-width: 700px) {
    .profile-content-tabs .company-profile-tabs__list { gap: 22px; }
    .profile-content-tabs .company-profile-tabs__item { font-size: 14px; }
    .profile-rating-digest { padding: 7px; }
}

.hidden{display:none !important;}

/* ========================================================================== */
/* Public user and company profiles — shared App surface                       */
/* ========================================================================== */

body.fiwork-public-profile-page {
    --public-profile-canvas: #f4f5f7;
    --public-profile-surface: #fff;
    --public-profile-subtle: #f3f5f7;
    --public-profile-subtle-hover: #eceff3;
    --public-profile-text: #202228;
    --public-profile-muted: #747c88;
    --public-profile-blue: #0188ff;
    --public-profile-blue-soft: #e9f4ff;
    --public-profile-service-card: #f7f7f8;
    --public-profile-service-card-hover: #f2f3f5;
    --public-profile-service-card-border: #e5e7eb;
    --public-profile-card-border: rgba(17, 24, 39, .07);
    --public-profile-radius: 26px;
    background: var(--public-profile-canvas);
}

body.fiwork-public-profile-page .main-block,
body.fiwork-public-profile-page .main-container,
body.fiwork-public-profile-page .profile-details-page,
body.fiwork-public-profile-page .company-profile-page {
    background: transparent !important;
}

body.fiwork-public-profile-page .main-block {
    padding-bottom: 64px;
}

body.fiwork-public-profile-page .main-container:has(> .profile-details-page),
body.fiwork-public-profile-page .main-container:has(> .company-profile-page) {
    width: min(calc(100% - 32px), 1276px);
    max-width: 1276px;
    margin-inline: auto;
    padding: 0;
}

body.fiwork-public-profile-page :is(.profile-details-page, .company-profile-page) {
    width: 100%;
    padding: 32px 0 0;
    color: var(--public-profile-text);
    font-family: Inter, var(--font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.fiwork-public-profile-page .profile-main-shell__container,
body.fiwork-public-profile-page .profile-reviews-shell__container {
    width: 100%;
    max-width: none;
}

body.fiwork-public-profile-page .freelancer-info-block,
body.fiwork-public-profile-page .company-profile-info-block.freelancer-info-block {
    width: 100%;
    margin-top: 0;
}

body.fiwork-public-profile-page .freelancer-info-container,
body.fiwork-public-profile-page .profile-community-main {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
    align-items: start;
}

body.fiwork-public-profile-page .profile-community-main > .freelancer-main-info,
body.fiwork-public-profile-page .company-profile-info-block .freelancer-main-info {
    min-width: 0;
    padding: 30px;
    gap: 26px;
    overflow: visible;
    border: 0;
    border-radius: var(--public-profile-radius);
    background: var(--public-profile-surface);
    box-shadow: none;
}

body.fiwork-public-profile-page .profile-community-main__owner-action,
body.fiwork-public-profile-page .profile-community-main .profile-actions-container {
    top: 30px;
    right: 30px;
}

body.fiwork-public-profile-page .profile-community-main__edit,
body.fiwork-public-profile-page .profile-actions-container :is(.like-container, .service-report-button, .share-icon-container) {
    border: 0;
    color: #68717e;
    background: var(--public-profile-subtle);
    box-shadow: none;
}

body.fiwork-public-profile-page .profile-community-main__edit {
    min-height: 42px;
    padding-inline: 15px;
    border-radius: 12px;
}

body.fiwork-public-profile-page .profile-community-main__edit:hover,
body.fiwork-public-profile-page .profile-actions-container :is(.like-container, .service-report-button, .share-icon-container):hover {
    color: var(--public-profile-blue);
    background: var(--public-profile-blue-soft);
    transform: none;
}

body.fiwork-public-profile-page .profile-community-main .freelancer-info-content1 {
    padding-right: 190px;
    gap: 22px;
}

body.fiwork-public-profile-page .profile-community-main .freelancer-avatar-container,
body.fiwork-public-profile-page .company-profile-heading .company-profile-logo {
    width: 124px;
    height: 124px;
    flex: 0 0 124px;
    aspect-ratio: 1;
    border: 0;
    border-radius: 22px;
    background: var(--public-profile-subtle);
    box-shadow: none;
}

body.fiwork-public-profile-page .freelancer-avatar-container--plus {
    border-radius: 22px;
    outline-width: 2px;
}

body.fiwork-public-profile-page .freelancer-avatar-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.fiwork-public-profile-page .freelancer-info-content1 .freelancer-info {
    min-width: 0;
    padding-top: 2px;
    gap: 7px;
}

body.fiwork-public-profile-page .freelancer-info-content1 .freelancer-name,
body.fiwork-public-profile-page .company-profile-heading .freelancer-name {
    color: var(--public-profile-text);
    font-family: Inter, var(--font-family), sans-serif;
    font-size: 26px;
    font-weight: 750;
    line-height: 1.22;
}

body.fiwork-public-profile-page .freelancer-info-content1 .freelancer-username {
    color: var(--public-profile-muted);
    font-size: 14px;
    line-height: 1.45;
}

body.fiwork-public-profile-page .profile-presence-indicator {
    position: absolute;
    right: 9px;
    bottom: 11px;
    z-index: 4;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 3px solid var(--public-profile-surface, #fff);
    border-radius: 50%;
    background: #aeb5bf;
    box-shadow: none;
    cursor: help;
}

body.fiwork-public-profile-page .profile-presence-indicator.is-online {
    background: #20b965;
}

body.fiwork-public-profile-page .profile-presence-indicator::after {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 160;
    width: max-content;
    max-width: min(280px, calc(100vw - 32px));
    padding: 7px 10px;
    border-radius: 9px;
    color: #fff;
    background: rgba(31, 41, 55, .97);
    content: attr(data-profile-presence-tooltip);
    font-family: Inter, var(--font-family), sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -4px);
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

body.fiwork-public-profile-page .profile-presence-indicator:hover::after,
body.fiwork-public-profile-page .profile-presence-indicator:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

body.fiwork-public-profile-page .profile-presence-indicator:focus-visible {
    outline: 2px solid rgba(1, 136, 255, .28);
    outline-offset: 2px;
}

body.fiwork-public-profile-page .freelancer-info-content1 .freelancer-position {
    max-width: 560px;
    color: #48505b;
    font-family: Inter, var(--font-family), sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

body.fiwork-public-profile-page .profile-community-main .freelancer-info-content1 .freelancer-trophies-container {
    min-height: 44px;
    padding: 4px 6px;
    border: 0;
    border-radius: 12px;
    background: var(--public-profile-subtle);
}

body.fiwork-public-profile-page .profile-community-main .freelancer-info-content1 .freelancer-trophies-container img {
    width: 34px;
    height: 34px;
}

body.fiwork-public-profile-page .profile-content-tabs {
    margin-top: 0;
    padding: 5px;
    border: 0;
    border-radius: 14px;
    background: var(--public-profile-subtle);
}

body.fiwork-public-profile-page .profile-community-main .profile-content-tabs .company-profile-tabs__list {
    height: auto;
    gap: 4px;
    border: 0;
}

body.fiwork-public-profile-page .profile-community-main .profile-content-tabs .company-profile-tabs__item {
    min-height: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    color: var(--public-profile-muted);
    line-height: 40px;
}

body.fiwork-public-profile-page .profile-community-main .profile-content-tabs .company-profile-tabs__item::after {
    display: none;
}

body.fiwork-public-profile-page .profile-community-main .profile-content-tabs .company-profile-tabs__item:hover,
body.fiwork-public-profile-page .profile-community-main .profile-content-tabs .company-profile-tabs__item.is-active {
    color: var(--public-profile-text);
    background: var(--public-profile-surface);
}

body.fiwork-public-profile-page .about-freelancer-container {
    width: 100%;
    max-width: none;
}

body.fiwork-public-profile-page .about-freelancer-container h2 {
    margin: 0 0 10px;
    color: var(--public-profile-text);
    font-family: Inter, var(--font-family), sans-serif;
    font-size: 18px;
    font-weight: 750;
}

body.fiwork-public-profile-page .about-freelancer-container h2:not(:first-child) {
    margin-top: 24px;
}

body.fiwork-public-profile-page .about-freelancer-container p {
    margin: 0;
    color: #515965;
    font-family: Inter, var(--font-family), sans-serif;
    font-size: 15px;
    line-height: 1.65;
}

body.fiwork-public-profile-page .freelancer-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.fiwork-public-profile-page .freelancer-skills span {
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    color: #4d5662;
    background: var(--public-profile-subtle);
    font-family: Inter, var(--font-family), sans-serif;
    font-size: 13px;
    font-weight: 600;
}

body.fiwork-public-profile-page .freelancer-rating-combo {
    height: auto;
}

body.fiwork-public-profile-page .profile-rating-digest,
body.fiwork-public-profile-page .company-profile-side-card {
    padding: 22px;
    border: 0;
    border-radius: 20px;
    background: var(--public-profile-surface);
    box-shadow: none;
}

body.fiwork-public-profile-page .profile-rating-digest .freelancer-rating-data-container {
    border-color: #e7e9ed;
}

body.fiwork-public-profile-page .profile-rating-digest .write-message-button {
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    background: var(--public-profile-blue);
}

body.fiwork-public-profile-page .profile-resume-digest {
    min-height: 62px;
    margin-top: 14px;
    border: 0;
    border-radius: 16px;
    background: var(--public-profile-surface);
    box-shadow: none;
}

body.fiwork-public-profile-page .profile-resume-digest:hover {
    background: var(--public-profile-subtle-hover);
    transform: none;
}

body.fiwork-public-profile-page :is(.profile-portfolio-digest, .profile-reviews-digest, .my-services-block) {
    border: 0;
    border-radius: var(--public-profile-radius);
    background: var(--public-profile-surface);
    box-shadow: none;
}

/* User profile preview: one quiet outline per semantic surface. */
body.fiwork-public-user-profile-page :is(
    .profile-community-main > .freelancer-main-info,
    .profile-rating-digest,
    .profile-resume-digest,
    .profile-portfolio-digest,
    .profile-reviews-digest,
    .my-services-block
) {
    border: 1px solid var(--public-profile-card-border);
}

body.fiwork-public-profile-page .profile-portfolio-digest,
body.fiwork-public-profile-page .profile-reviews-digest {
    width: calc(100% - 354px);
    margin-top: 24px;
    padding: 28px 30px;
}

body.fiwork-public-profile-page .my-services-block {
    width: calc(100% - 354px);
    margin: 24px 0 0;
    padding: 28px 30px 30px;
}

body.fiwork-public-profile-page .profile-portfolio-digest .freelancer-portfolio-header,
body.fiwork-public-profile-page .profile-reviews-digest .reviews-about-freelancer-header {
    padding-bottom: 18px;
    border-color: #e8eaee;
}

body.fiwork-public-profile-page :is(.profile-portfolio-digest .freelancer-portfolio-header h2, .profile-reviews-digest .reviews-about-freelancer-header h2, .my-services-block > h2) {
    margin: 0;
    color: var(--public-profile-text);
    font-family: Inter, var(--font-family), sans-serif;
    font-size: 22px;
    font-weight: 750;
    line-height: 1.3;
}

body.fiwork-public-profile-page .my-services-block > h2 {
    margin-bottom: 0;
}

body.fiwork-public-profile-page .my-services-block > .my-services-swiper {
    padding-top: 38px;
}

body.fiwork-public-profile-page .profile-portfolio-digest .freelancer-portfolio-nav-elem,
body.fiwork-public-profile-page .profile-reviews-digest .reviews-filter-action {
    border: 0;
    background: var(--public-profile-subtle);
}

body.fiwork-public-profile-page .profile-portfolio-digest .freelancer-portfolio-nav-elem.active {
    color: var(--public-profile-blue);
    background: var(--public-profile-blue-soft);
}

body.fiwork-public-profile-page .profile-portfolio-digest .portfolio-elem,
body.fiwork-public-profile-page .my-services-block .ad-container,
body.fiwork-public-profile-page .profile-reviews-digest .reviewer-review {
    border-color: transparent;
    border-radius: 16px;
    background: var(--public-profile-subtle);
    box-shadow: none;
}

body.fiwork-public-profile-page .my-services-block .ad-container {
    height: auto;
    border: 1px solid var(--public-profile-service-card-border);
    background: var(--public-profile-service-card);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.fiwork-public-profile-page .my-services-block .ad-container .ad-part1 {
    flex: 0 0 auto;
    gap: 0;
    justify-content: flex-start;
}

body.fiwork-public-profile-page .my-services-block .ad-container:hover {
    border-color: #d9dce1;
    background: var(--public-profile-service-card-hover);
    box-shadow: 0 10px 24px rgba(23, 29, 37, .08);
    transform: translateY(-2px);
}

body.fiwork-public-profile-page .my-services-block .ad-container h3 {
    width: 100%;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    margin: 9px 0 4px;
    padding: 0 14px;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--public-profile-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-overflow: clip;
}

body.fiwork-public-profile-page .my-services-block .ad-container .freelancer-container {
    margin: 0 0 8px;
    padding: 4px 14px;
}

body.fiwork-public-profile-page .my-services-block .ad-container .service-data-container {
    margin-top: 0;
    padding: 12px 14px;
    border-top-color: var(--public-profile-service-card-border);
    background: transparent;
}

body.fiwork-public-profile-page .my-services-block .ad-container h3 > span {
    max-height: 40px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
}

body.fiwork-public-profile-page .my-services-block .ad-container .freelancer-username,
body.fiwork-public-profile-page .my-services-block .ad-container :is(.rating-stars p, .service-price-text) {
    color: var(--public-profile-muted);
}

body.fiwork-public-profile-page .my-services-block .ad-container .freelancer-username {
    font-weight: 500;
}

body.fiwork-public-profile-page .my-services-container {
    align-items: start;
    gap: 14px;
}

@media (max-width: 920px) {
    body.fiwork-public-profile-page .freelancer-info-container,
    body.fiwork-public-profile-page .profile-community-main {
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 18px;
    }

    body.fiwork-public-profile-page .profile-portfolio-digest,
    body.fiwork-public-profile-page .profile-reviews-digest,
    body.fiwork-public-profile-page .my-services-block {
        width: calc(100% - 308px);
    }

    body.fiwork-public-profile-page .profile-community-main .freelancer-info-content1 {
        padding-top: 52px;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    body.fiwork-public-profile-page .main-block {
        padding-bottom: 32px;
    }

    body.fiwork-public-profile-page .main-container:has(> .profile-details-page),
    body.fiwork-public-profile-page .main-container:has(> .company-profile-page) {
        width: min(calc(100% - 20px), 1276px);
    }

    body.fiwork-public-profile-page :is(.profile-details-page, .company-profile-page) {
        padding-top: 16px;
    }

    body.fiwork-public-profile-page .freelancer-info-container,
    body.fiwork-public-profile-page .profile-community-main {
        grid-template-columns: 1fr;
    }

    body.fiwork-public-profile-page .profile-community-main > .freelancer-main-info,
    body.fiwork-public-profile-page .company-profile-info-block .freelancer-main-info,
    body.fiwork-public-profile-page :is(.profile-portfolio-digest, .profile-reviews-digest, .my-services-block) {
        width: 100%;
        padding: 20px;
        border-radius: 20px;
    }

    body.fiwork-public-profile-page .profile-community-main__owner-action,
    body.fiwork-public-profile-page .profile-community-main .profile-actions-container {
        position: static;
    }

    body.fiwork-public-profile-page .profile-community-main .freelancer-info-content1 {
        padding: 0;
    }

    body.fiwork-public-profile-page .profile-community-main .freelancer-avatar-container,
    body.fiwork-public-profile-page .company-profile-heading .company-profile-logo {
        width: 92px;
        height: 92px;
        flex-basis: 92px;
        border-radius: 18px;
    }

    body.fiwork-public-profile-page .freelancer-info-content1 .freelancer-name,
    body.fiwork-public-profile-page .company-profile-heading .freelancer-name {
        font-size: 22px;
    }

    body.fiwork-public-profile-page .profile-rating-digest,
    body.fiwork-public-profile-page .company-profile-side-card {
        border-radius: 18px;
    }

    body.fiwork-public-profile-page .my-services-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.fiwork-public-profile-page .my-services-block > h2 {
        margin-bottom: 0;
    }

    body.fiwork-public-profile-page .my-services-block > .my-services-swiper {
        padding-top: 28px;
    }
}

@media (max-width: 520px) {
    body.fiwork-public-profile-page .profile-community-main .freelancer-info-content1,
    body.fiwork-public-profile-page .company-profile-heading {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
    }

    body.fiwork-public-profile-page .profile-community-main .freelancer-avatar-container,
    body.fiwork-public-profile-page .company-profile-heading .company-profile-logo {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
        border-radius: 15px;
    }

    body.fiwork-public-profile-page .profile-content-tabs {
        overflow-x: auto;
    }

    body.fiwork-public-profile-page .my-services-container {
        grid-template-columns: 1fr;
    }
}

/* Profile reviews follow the same calm list pattern as service reviews. */
body.fiwork-public-profile-page .profile-reviews-digest {
    padding: 22px 24px 4px;
}

body.fiwork-public-profile-page .profile-reviews-digest .profile-service-reviews__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0 0 10px;
    border: 0;
    background: transparent;
}

.profile-service-reviews__title {
    min-width: 0;
    display: flex;
    align-items: center;
}

body.fiwork-public-profile-page .profile-reviews-digest .profile-service-reviews__title h2 {
    margin: 0;
    color: var(--public-profile-text);
    font-family: "Geologica", Inter, var(--font-family), sans-serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.025em;
}

.profile-service-reviews__mobile-title,
.profile-service-reviews__mobile-toggle {
    display: none;
}

.profile-service-reviews__collapse,
.profile-service-reviews__body {
    width: 100%;
    min-width: 0;
}

.profile-service-reviews__help {
    position: relative;
    order: 2;
    display: inline-flex;
    flex: 0 0 auto;
}

.profile-service-reviews__title {
    order: 1;
}

body.fiwork-public-profile-page .profile-reviews-digest .profile-service-reviews__help .tooltip-question {
    width: 20px;
    height: 20px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #9299a2;
    background: transparent;
}

body.fiwork-public-profile-page .profile-reviews-digest .profile-service-reviews__help .tooltip-question svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.fiwork-public-profile-page .profile-reviews-digest .profile-service-reviews__help .tooltip-question:hover,
body.fiwork-public-profile-page .profile-reviews-digest .profile-service-reviews__help.is-open .tooltip-question {
    color: #198754;
    background: #edf8f2;
}

.profile-service-reviews__summary {
    order: 3;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    margin-left: 0;
    color: #8a929c;
    font: 400 12px/1.3 Inter, Arial, sans-serif;
}

.profile-service-reviews__summary svg {
    width: 18px;
    height: 18px;
    fill: #f5a623;
}

.profile-service-reviews__summary strong {
    color: #30353b;
    font-size: 15px;
    font-weight: 700;
}

body.fiwork-public-profile-page .profile-reviews-digest .profile-service-review-tabs {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 26px;
    margin: 0;
    padding: 0;
    border: 0;
}

body.fiwork-public-profile-page .profile-reviews-digest .profile-service-review-tabs__item {
    position: relative;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 0;
    color: #767d85;
    background: transparent;
    box-shadow: none;
    font: 500 14px/1.35 Inter, Arial, sans-serif;
}

.profile-service-review-tabs__item::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: currentColor;
    content: "";
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .18s ease, transform .18s ease;
}

.profile-service-review-tabs__item b {
    color: inherit;
    font-size: 12px;
    font-weight: 600;
}

.profile-service-review-tabs__item.active::after {
    opacity: 1;
    transform: scaleX(1);
}

body.fiwork-public-profile-page .profile-reviews-digest .profile-service-review-tabs__item--positive.active {
    color: #198754;
}

body.fiwork-public-profile-page .profile-reviews-digest .profile-service-review-tabs__item--negative.active {
    color: #c63e49;
}

body.fiwork-public-profile-page .profile-reviews-digest .reviews-freelancer-container {
    position: relative;
    display: flex;
    align-items: stretch;
    border-top: 1px solid #eceef1;
}

body.fiwork-public-profile-page .profile-reviews-digest .review-freelancer-content {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 26px 0;
    border: 0;
}

body.fiwork-public-profile-page .profile-reviews-digest .review-freelancer-content:not(:last-of-type)::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: #ececef;
    content: "";
}

body.fiwork-public-profile-page .profile-reviews-digest .reviewer-review {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 0 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.fiwork-public-profile-page .profile-reviews-digest .reviewer-block {
    grid-column: 1 / -1;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
}

body.fiwork-public-profile-page .profile-reviews-digest .reviewer-img-container {
    width: 48px;
    height: 48px;
    border: 1px solid #e1e2e4;
    border-radius: 50%;
}

body.fiwork-public-profile-page .profile-reviews-digest .review-order-meta {
    grid-column: 2;
    margin: 5px 0 0;
    padding: 0;
    border: 0;
}

body.fiwork-public-profile-page .profile-reviews-digest .review-order-label {
    min-height: 22px;
    padding: 4px 8px;
    border-radius: 7px;
    color: #8a9199;
    background: var(--public-profile-subtle);
    font-size: 11px;
}

body.fiwork-public-profile-page .profile-reviews-digest .review-order-title {
    color: #85898e;
    font-size: 12px;
    font-weight: 400;
}

body.fiwork-public-profile-page .profile-reviews-digest .reviewer-status {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-left: auto;
}

body.fiwork-public-profile-page .profile-reviews-digest .fiwork-review-sentiment-icon {
    width: 20px;
    height: 20px;
}

body.fiwork-public-profile-page .profile-reviews-digest .reviewer-review-text {
    grid-column: 2;
    max-width: none;
    margin: 12px 0 0;
    padding: 0;
    color: #303236;
    font: 400 15px/1.55 Inter, Arial, sans-serif;
}

body.fiwork-public-profile-page .profile-reviews-digest .response-functions-block {
    grid-column: 2;
    margin-top: 14px;
}

body.fiwork-public-profile-page .profile-reviews-digest .freelancer-response-wrapper {
    margin-top: 20px;
}

body.fiwork-public-profile-page .profile-reviews-digest .freelancer-response-container {
    padding: 0;
    border: 0;
    background: transparent;
}

body.fiwork-public-profile-page .profile-reviews-digest .freelancer-response-block {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
}

body.fiwork-public-profile-page .profile-reviews-digest .freelancer-response-img-container {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

@media (max-width: 768px) {
    body.fiwork-public-profile-page .profile-reviews-digest {
        padding: 19px 16px 4px;
        transition: padding-bottom .28s ease;
    }

    body.fiwork-public-profile-page .profile-reviews-digest:not(.is-expanded) {
        padding-bottom: 0;
    }

    body.fiwork-public-profile-page .profile-reviews-digest .profile-service-reviews__header {
        width: 100%;
        min-height: 48px;
        gap: 8px;
        padding: 0 0 10px;
        cursor: pointer;
    }

    body.fiwork-public-profile-page .profile-reviews-digest:not(.is-expanded) .profile-service-reviews__header {
        padding-bottom: 18px;
    }

    .profile-service-reviews__desktop-title {
        display: none;
    }

    .profile-service-reviews__mobile-title {
        display: inline;
    }

    body.fiwork-public-profile-page .profile-reviews-digest .profile-service-reviews__title h2 {
        overflow: hidden;
        font-size: 18px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .profile-service-reviews__summary {
        gap: 4px;
        margin-left: 0;
        white-space: nowrap;
    }

    .profile-service-reviews__summary span {
        display: none;
    }

    .profile-service-reviews__mobile-toggle {
        order: 4;
        width: 34px;
        height: 34px;
        margin-left: auto;
        padding: 0;
        display: grid;
        flex: 0 0 34px;
        place-items: center;
        border: 0;
        border-radius: 9px;
        color: #9aa1a9;
        background: transparent;
    }

    .profile-service-reviews__mobile-toggle svg {
        width: 24px;
        height: 24px;
        transition: transform .3s cubic-bezier(.22, .72, .25, 1);
    }

    .profile-reviews-digest.is-expanded .profile-service-reviews__mobile-toggle svg {
        transform: rotate(180deg);
    }

    .profile-service-reviews__collapse {
        display: block;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transition: max-height .36s cubic-bezier(.22, .72, .25, 1), opacity .2s ease, visibility 0s linear .36s;
    }

    .profile-reviews-digest.is-expanded .profile-service-reviews__collapse {
        max-height: var(--profile-mobile-reviews-height, 3000px);
        visibility: visible;
        opacity: 1;
        transition: max-height .4s cubic-bezier(.22, .72, .25, 1), opacity .22s ease .05s, visibility 0s;
    }

    body.fiwork-public-profile-page .profile-reviews-digest .profile-service-review-tabs {
        gap: 20px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.fiwork-public-profile-page .profile-reviews-digest .profile-service-review-tabs::-webkit-scrollbar {
        display: none;
    }

    body.fiwork-public-profile-page .profile-reviews-digest .reviewer-review,
    body.fiwork-public-profile-page .profile-reviews-digest .reviewer-block {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 0 12px;
    }

    body.fiwork-public-profile-page .profile-reviews-digest .reviewer-img-container {
        width: 40px;
        height: 40px;
    }
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-flex {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: flex-start;
    gap: 14px;
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-thumb {
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 1px solid #e1e2e4;
    border-radius: 50%;
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-contents {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-contents-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-contents-title {
    margin: 0;
    color: var(--public-profile-text);
    font: 600 15px/1.4 Inter, Arial, sans-serif;
}

body.fiwork-public-profile-page .profile-reviews-digest .service-review-meta {
    min-height: 22px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 10px;
    color: #8a9199;
    font: 400 12px/1.35 Inter, Arial, sans-serif;
}

body.fiwork-public-profile-page .profile-reviews-digest .service-review-face {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-flex;
}

body.fiwork-public-profile-page .profile-reviews-digest .service-review-face svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-contents-time,
body.fiwork-public-profile-page .profile-reviews-digest .service-review-location {
    color: #85898e;
    font: 400 12px/1.4 Inter, Arial, sans-serif;
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-contents-para {
    margin: 12px 0 0 !important;
    color: #303236;
    font: 400 15px/1.55 Inter, Arial, sans-serif;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-contents > .response-functions-block {
    margin-top: 14px;
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-contents .reviewer-review-response-functions {
    min-height: 0;
    margin: 0;
    justify-content: flex-end;
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-contents .open-close-response-option {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #68727d;
    background: transparent;
    font: 500 12px/1.4 Inter, Arial, sans-serif;
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-contents .write-response-block {
    margin-top: 10px;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: var(--public-profile-subtle);
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-contents .freelancer-response-wrapper {
    margin-top: 20px;
}

body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-contents .freelancer-response-container {
    padding: 0;
    border: 0;
    background: transparent;
}

body.fiwork-public-profile-page .profile-reviews-digest .service-review-empty {
    padding: 22px 0;
}

body.fiwork-public-profile-page .profile-reviews-digest .service-review-empty .project-feedback-contents-para {
    margin: 0 !important;
    color: var(--public-profile-muted);
}

body.fiwork-public-profile-page .profile-reviews-digest .pagination {
    margin-top: 18px;
}

@media (max-width: 768px) {
    body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-flex {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
    }

    body.fiwork-public-profile-page .profile-reviews-digest .project-feedback-thumb {
        width: 40px;
        height: 40px;
    }
}

/* Achievements use the same compact tooltip language as service actions. */
body.fiwork-public-profile-page .profile-community-main .freelancer-info-content1 .freelancer-trophies-container {
    width: auto;
    max-width: 100%;
    min-height: 0;
    margin-top: 5px;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.profile-achievement {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    cursor: help;
    appearance: none;
    -webkit-appearance: none;
}

body.fiwork-public-profile-page .profile-community-main .freelancer-info-content1 .freelancer-trophies-container .profile-achievement img {
    width: 38px;
    height: 38px;
    margin: 0;
    display: block;
    object-fit: contain;
    pointer-events: none;
    transition: transform .16s ease, filter .16s ease;
}

.profile-achievement::before,
.profile-achievement::after {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 3px);
    transition: opacity .16s ease, transform .16s ease;
}

.profile-achievement::before {
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid #25282d;
    content: "";
}

.profile-achievement::after {
    width: max-content;
    max-width: min(280px, calc(100vw - 32px));
    bottom: calc(100% + 10px);
    padding: 7px 10px;
    border-radius: 7px;
    color: #fff;
    background: #25282d;
    box-shadow: 0 8px 22px rgba(15, 18, 22, .16);
    content: attr(data-profile-achievement-tooltip);
    font: 500 12px/1.45 Inter, var(--font-family), sans-serif;
    text-align: left;
    white-space: normal;
}

.profile-achievement:hover img,
.profile-achievement:focus-visible img {
    filter: drop-shadow(0 5px 9px rgba(20, 25, 31, .14));
    transform: translateY(-2px);
}

.profile-achievement:hover::before,
.profile-achievement:hover::after,
.profile-achievement:focus-visible::before,
.profile-achievement:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.profile-achievement:focus-visible {
    outline: 2px solid rgba(1, 136, 255, .32);
    outline-offset: 3px;
}

@media (max-width: 520px) {
    .profile-achievement {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    body.fiwork-public-profile-page .profile-community-main .freelancer-info-content1 .freelancer-trophies-container .profile-achievement img {
        width: 34px;
        height: 34px;
    }
}

/* A round portrait separates the identity from the rounded App cards. */
body.fiwork-public-user-profile-page .profile-community-main .freelancer-avatar-container {
    width: 136px;
    height: 136px;
    flex-basis: 136px;
    border-radius: 50%;
}

body.fiwork-public-user-profile-page .profile-community-main .freelancer-avatar-container--plus {
    border-radius: 50%;
}

body.fiwork-public-user-profile-page .profile-presence-indicator {
    right: 11px;
    bottom: 11px;
}

@media (max-width: 768px) {
    body.fiwork-public-user-profile-page .profile-community-main .freelancer-avatar-container {
        width: 100px;
        height: 100px;
        flex-basis: 100px;
    }

    body.fiwork-public-profile-page .profile-presence-indicator {
        right: 8px;
        bottom: 9px;
        width: 16px;
        height: 16px;
        border-width: 3px;
    }

    body.fiwork-public-user-profile-page .profile-presence-indicator {
        right: 8px;
        bottom: 8px;
    }

}

@media (max-width: 520px) {
    body.fiwork-public-user-profile-page .profile-community-main .freelancer-info-content1 {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    body.fiwork-public-user-profile-page .profile-community-main .freelancer-avatar-container {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
    }

    body.fiwork-public-profile-page .profile-presence-indicator {
        right: 6px;
        bottom: 7px;
        width: 14px;
        height: 14px;
        border-width: 2px;
    }

    body.fiwork-public-user-profile-page .profile-presence-indicator {
        right: 6px;
        bottom: 6px;
    }

    body.fiwork-public-profile-page .profile-presence-indicator::after {
        left: 100%;
        transform: translate(-34%, -4px);
    }

    body.fiwork-public-profile-page .profile-presence-indicator:hover::after,
    body.fiwork-public-profile-page .profile-presence-indicator:focus-visible::after {
        transform: translate(-34%, 0);
    }
}

/* Profile loading state ---------------------------------------------------- */
body.fiwork-public-profile-page {
    --public-profile-skeleton-base: #e7ebef;
    --public-profile-skeleton-highlight: #f7f8fa;
}

.public-profile-skeleton {
    width: 100%;
    display: none;
    opacity: 1;
    transition: opacity .22s ease;
}

body.is-profile-loading :is(.profile-details-page, .company-profile-page) > :not(.public-profile-skeleton):not(script) {
    display: none !important;
}

body.is-profile-loading .public-profile-skeleton,
body.is-profile-ready .public-profile-skeleton {
    display: block;
}

body.is-profile-ready :is(.profile-details-page, .company-profile-page) {
    position: relative;
}

body.is-profile-ready .public-profile-skeleton {
    position: absolute;
    inset: 32px 0 auto;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
}

.public-profile-skeleton__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
    align-items: start;
}

.public-profile-skeleton__card {
    min-width: 0;
    padding: 30px;
    border-radius: var(--public-profile-radius);
    background: var(--public-profile-surface);
}

.public-profile-skeleton__main {
    min-height: 430px;
}

.public-profile-skeleton__side {
    min-height: 310px;
}

.public-profile-skeleton__shape {
    display: block;
    overflow: hidden;
    border-radius: 9px;
    background-image: linear-gradient(
        105deg,
        var(--public-profile-skeleton-base) 20%,
        var(--public-profile-skeleton-highlight) 42%,
        var(--public-profile-skeleton-base) 64%
    );
    background-size: 220% 100%;
    animation: public-profile-skeleton-shimmer 1.45s ease-in-out infinite;
}

.public-profile-skeleton__identity {
    display: flex;
    align-items: center;
    gap: 22px;
}

.public-profile-skeleton__avatar {
    width: 136px;
    height: 136px;
    flex: 0 0 136px;
    border-radius: 50%;
}

.public-profile-skeleton__identity-copy {
    width: min(420px, 65%);
    display: grid;
    gap: 13px;
}

.public-profile-skeleton__line {
    width: 100%;
    height: 13px;
}

.public-profile-skeleton__line--name {
    width: 62%;
    height: 25px;
}

.public-profile-skeleton__line--title {
    width: 42%;
    height: 19px;
}

.public-profile-skeleton__line--section {
    width: 160px;
    height: 23px;
}

.public-profile-skeleton__line--meta {
    width: 48%;
}

.public-profile-skeleton__line--medium {
    width: 74%;
}

.public-profile-skeleton__line--short {
    width: 38%;
}

.public-profile-skeleton__tabs {
    margin-top: 28px;
    padding-bottom: 16px;
    display: flex;
    gap: 22px;
    border-bottom: 1px solid var(--public-profile-subtle);
}

.public-profile-skeleton__tabs span {
    width: 68px;
    height: 14px;
}

.public-profile-skeleton__copy {
    margin-top: 28px;
    display: grid;
    gap: 12px;
}

.public-profile-skeleton__pills {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.public-profile-skeleton__pills span {
    width: 96px;
    height: 34px;
    border-radius: 11px;
}

.public-profile-skeleton__side > .public-profile-skeleton__line {
    margin-bottom: 25px;
}

.public-profile-skeleton__side-row {
    padding: 16px 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border-top: 1px solid var(--public-profile-subtle);
}

.public-profile-skeleton__side-row .public-profile-skeleton__line {
    width: 78%;
}

.public-profile-skeleton__dot {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.public-profile-skeleton__services {
    width: calc(100% - 354px);
    margin-top: 24px;
}

.public-profile-skeleton__service-grid {
    margin-top: 38px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.public-profile-skeleton__service-card {
    min-width: 0;
    padding: 12px;
    display: grid;
    gap: 11px;
    border-radius: 16px;
    background: var(--public-profile-subtle);
}

.public-profile-skeleton__media {
    width: 100%;
    aspect-ratio: 2.6 / 1.73;
    border-radius: 12px;
}

.public-profile-skeleton__reviews {
    width: calc(100% - 354px);
    margin-top: 24px;
}

.public-profile-skeleton__review-row {
    margin-top: 26px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
}

.public-profile-skeleton__review-row > div {
    display: grid;
    gap: 10px;
}

.public-profile-skeleton__review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

@keyframes public-profile-skeleton-shimmer {
    from { background-position: 110% 0; }
    to { background-position: -110% 0; }
}

/* Keep service cover text from flashing before the image is decoded. */
body.fiwork-public-profile-page .my-services-block .ad-banner {
    position: relative;
    background: var(--public-profile-skeleton-base);
}

body.fiwork-public-profile-page .my-services-block .ad-banner:not(.is-cover-loaded)::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-image: linear-gradient(
        105deg,
        var(--public-profile-skeleton-base) 20%,
        var(--public-profile-skeleton-highlight) 42%,
        var(--public-profile-skeleton-base) 64%
    );
    background-size: 220% 100%;
    animation: public-profile-skeleton-shimmer 1.45s ease-in-out infinite;
    content: "";
}

body.fiwork-public-profile-page .my-services-block .ad-banner.is-cover-error::before {
    background: var(--public-profile-skeleton-base);
    animation: none;
}

body.fiwork-public-profile-page .my-services-block .profile-service-cover {
    z-index: 1;
    object-fit: cover;
    opacity: 0;
    color: transparent;
    font-size: 0;
    transition: opacity .2s ease;
}

body.fiwork-public-profile-page .my-services-block .profile-service-cover.is-loaded {
    opacity: 1;
}

body.fiwork-public-profile-page .my-services-block .white-like-button {
    z-index: 2;
}

@media (max-width: 920px) {
    .public-profile-skeleton__grid {
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 18px;
    }

    .public-profile-skeleton__reviews {
        width: calc(100% - 308px);
    }

    .public-profile-skeleton__services {
        width: calc(100% - 308px);
    }
}

@media (max-width: 768px) {
    body.is-profile-ready .public-profile-skeleton {
        inset: 16px 0 auto;
    }

    .public-profile-skeleton__grid {
        grid-template-columns: 1fr;
    }

    .public-profile-skeleton__card {
        padding: 20px;
        border-radius: 20px;
    }

    .public-profile-skeleton__main {
        min-height: 390px;
    }

    .public-profile-skeleton__avatar {
        width: 100px;
        height: 100px;
        flex-basis: 100px;
    }

    .public-profile-skeleton__service-grid {
        margin-top: 28px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-profile-skeleton__reviews {
        width: 100%;
    }

    .public-profile-skeleton__services {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .public-profile-skeleton__identity {
        gap: 14px;
    }

    .public-profile-skeleton__avatar {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
    }

    .public-profile-skeleton__identity-copy {
        width: 100%;
    }

    .public-profile-skeleton__tabs {
        gap: 14px;
        overflow: hidden;
    }

    .public-profile-skeleton__tabs span {
        width: 58px;
        flex: 0 0 58px;
    }

    .public-profile-skeleton__service-grid {
        grid-template-columns: 1fr;
    }

    .public-profile-skeleton__service-card:nth-child(n + 3) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-profile-skeleton__shape,
    body.fiwork-public-profile-page .my-services-block .ad-banner:not(.is-cover-loaded)::before {
        animation: none;
    }

    .public-profile-skeleton,
    body.fiwork-public-profile-page .my-services-block .profile-service-cover {
        transition: none;
    }
}

/* A profile is followed in the same way as an author in the feed. */
.profile-actions-container .profile-follow-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 15px;
    flex: 0 0 auto;
    border: 1px solid #cfe2fb;
    border-radius: 11px;
    background: #edf5ff;
    color: #165ca6;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}
.profile-actions-container .profile-follow-button:hover { background: #dcecff; }
.profile-actions-container .profile-follow-button.is-subscribed { color: #4e5967; background: #f2f4f7; border-color: #e3e7eb; }
.profile-actions-container .profile-follow-button.is-subscribed:hover { background: #e9edf1; }
.profile-actions-container .profile-follow-button:disabled { opacity: .65; cursor: wait; }
.profile-actions-container .profile-follow-button:focus-visible { outline: 2px solid #348fff; outline-offset: 2px; }
.profile-followers-count { display: block; margin-top: 5px; color: #7b8592; font-size: 13px; }
.profile-followers-count strong { color: #404b59; font-weight: 650; }

@media (min-width: 769px) {
    .profile-community-main .freelancer-info-content1,
    body.fiwork-public-profile-page .profile-community-main .freelancer-info-content1 { padding-right: 260px; }
}

html[data-theme="dark"] .profile-actions-container .profile-follow-button {
    color: #b5d8ff;
    background: #193756;
    border-color: #315579;
}
html[data-theme="dark"] .profile-actions-container .profile-follow-button:hover { background: #244765; }
html[data-theme="dark"] .profile-actions-container .profile-follow-button.is-subscribed {
    color: #d0d8e2;
    background: #263342;
    border-color: #3a4b5b;
}
html[data-theme="dark"] .profile-followers-count { color: #a4aebb; }
html[data-theme="dark"] .profile-followers-count strong { color: #edf3fa; }