:root {
  --font-family: "Inter", sans-serif;
  --second-family: "Open Sans", sans-serif;
  --third-family: "Manrope", sans-serif;
  --font3: "Plus Jakarta Sans", sans-serif;
  --font4: "Inter", sans-serif;
  --font5: "Lexend", sans-serif;
  --font6: "Helvetica Neue", sans-serif;
  --font7: "Montserrat", sans-serif;
  --font8: "Tajawal", sans-serif;
  --font9: "Inter", sans-serif;
  --font10: "Inter", sans-serif;
  --font11: "Inter", sans-serif;
  --font12: "Nunito", sans-serif;
}

.project-rich-text-link{
    color: #007bfb;
    text-decoration: none;
}

.project-rich-text-link:hover{
    color: #007bfb;
    text-decoration: underline;
}

.service-price .service-price-num,
.service-price-num,
.single-project-content-price,
.my-service-description-sum,
.bookmarks-service-card__price,
.global-search-result-inner-price,
.accordion-header .service-price,
.service-price-block .service-price,
.additional-service-price,
.mobile-popular-service-price,
.basic_discount_charge,
.basic_regular_charge,
.standard_discount_charge,
.standard_regular_charge,
.premium_discount_charge,
.premium_regular_charge{
    font-family: var(--font-family) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.service-price-option-select{
    min-height: 42px;
    border: 1px solid #e3e5ea;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-family: var(--font-family) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    padding: 0 34px 0 12px;
}

.service-price-option-hint{
    display: block;
    margin-top: 7px;
    color: #6b7280;
    font-family: var(--font-family) !important;
    font-size: 12px;
    line-height: 16px;
}

.service-price-option-hint strong{
    color: #111;
    font-weight: 700;
}


*{
    box-sizing: border-box;
    transition-duration: 0.1s;
    transition-property: all;
    transition-timing-function: linear;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

a,
button,
input,
textarea,
select,
label,
[role="button"],
[tabindex],
.btn,
.button,
[onclick]{
    -webkit-tap-highlight-color: transparent;
}

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
label:focus,
[role="button"]:focus,
[tabindex]:focus,
.btn:focus,
.button:focus,
[onclick]:focus{
    outline: none;
    box-shadow: none;
}

header{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    /*padding-left: 20px;
    padding-right: 20px;*/
}


.nav-part1-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e4e5e7;
    height: 81px;
    padding-left: 20px;
    padding-right: 20px;
}

.nav-part1{
    width: 100%;
    max-width: 1240px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.logo-and-search-block{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.logo-and-search-block .header-logo{
    width: 106px;
    height: auto;
    display: block;
    margin-top: 0;
}

.fiwork-brand-logo--dark {
    display: none !important;
}

.beta-container{
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.beta-container .beta-icon{
    width: 37px;
}


.logo-and-search-block .search-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.logo-and-search-block .search-container .header-service-search-form{
    position: relative;
    width: 348px;
    display: flex;
    align-items: center;
}


.logo-and-search-block .search-container .search-service-input{
    border-radius: 5px;
    padding: 12px 10px;
    padding-left: 20px;
    width: 348px;
    height: 45px;
    background: #edeff2;
    font-family: var(--font5);
    font-weight: 400;
    font-size: 16px;
    color: #a2a2a2;
    border: 0;
    padding-right: 119px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.logo-and-search-block .search-button-stick{
    width:1px; 
    height:20px; 
    border:none; 
    background:#ddd;
    border: 1px solid #d6d6d6;
    position: absolute;
    left: 10px;
}

.logo-and-search-block .search-button-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: 32px;
    z-index: 2;
}

.logo-and-search-block .search-button-container.hidden{
    display: none;
}

.logo-and-search-block .search-container img{
    width: 14px;
    cursor: pointer;
}

.logo-and-search-block .search-container .clear-search-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.logo-and-search-block .search-container .search-content-button{
    border-radius: 5px;
    width: 80px;
    height: 32px;
    box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
    background: #04b70a;
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: #fff;
    border: 0;
    cursor: pointer;
}

.header-search-suggestions{
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.12);
    z-index: 80;
    overflow: hidden;
}

.header-search-suggestions.hidden{
    display: none;
}

.header-search-suggestions-title{
    padding: 12px 16px 8px;
    font-family: var(--font6);
    font-weight: 700;
    font-size: 13px;
    line-height: 138%;
    color: #6b7280;
}

.header-search-suggestions-list{
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
}

.header-search-suggestion-link{
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    color: #111827;
    text-decoration: none;
}

.header-search-suggestion-link:hover{
    background: #f8fafc;
    color: #111827;
}

.header-search-suggestion-link mark{
    background: transparent;
    color: #111827;
    font-weight: 700;
    padding: 0;
}

.registration-and-login-block{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.registration-and-login-block .register-button{
    padding: 0px 24px;
    border: 1px solid #2196f3;
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 300%;
    letter-spacing: -0.01em;
    text-transform: capitalize;
    cursor: pointer;
    transition-duration: 0.3s;
    color: #2196f3;
    background: none;
}


.registration-and-login-block .register-button:hover{
    border-color: #0078D7;
    color: #0078D7;
}

.registration-and-login-block .login-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    width: auto;
    height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    background: #2196f3;
    font-family: var(--third-family), var(--font-family), sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #fff;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    transition: background-color .2s ease, transform .2s ease;
}

.registration-and-login-block .login-button:hover{
    background: #0078D7;
    transform: translateY(-1px);
}

.registration-and-login-block .login-button:active{
    transform: translateY(0);
}

.registration-and-login-block .login-button svg{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.header-language-selector{
    position: relative;
    z-index: 20;
    margin: 0;
    font-family: var(--third-family), var(--font-family), sans-serif;
}

.header-language-selector summary::-webkit-details-marker{
    display: none;
}

.header-language-selector__toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 80px;
    height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    color: #24313b;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: color .2s ease, background-color .2s ease;
}

.header-language-selector__toggle:hover,
.header-language-selector[open] .header-language-selector__toggle{
    color: #111a21;
    background: #f1f4f6;
}

.header-language-selector__toggle > svg:first-child{
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.header-language-selector__chevron{
    width: 10px;
    height: 7px;
    flex: 0 0 10px;
    transition: transform .2s ease;
}

.header-language-selector[open] .header-language-selector__chevron{
    transform: rotate(180deg);
}

.header-language-selector__menu{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: 220px;
    max-height: min(360px, calc(100vh - 90px));
    padding: 6px;
    overflow-y: auto;
    border: 1px solid #e5e8eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(25, 39, 55, .14);
}

.header-language-selector__option{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 40px;
    padding: 0 11px;
    border-radius: 9px;
    color: #27323b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
}

.header-language-selector__option strong{
    color: #7a858f;
    font-size: 11px;
    letter-spacing: .04em;
}

.header-language-selector__option:hover,
.header-language-selector__option.is-active{
    color: #137bcf;
    background: #eef7ff;
    text-decoration: none;
}

.header-language-selector__option.is-active strong{
    color: #2196f3;
}

input:hover,
input:focus,
input:active{ 
  outline: none;
  box-shadow: none;
}


/*Style of main navigation*/
.nav-part2-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e4e5e7;
    height: 41px;
    background: #fff;
    padding-left: 20px;
    padding-right: 20px; 
}

.nav-part2{
    width: 100%;
    max-width: 1240px;
    position: relative;
}

.nav-part2 ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    background: #fff;  
    margin: 0;
    padding: 0;
    gap: 10px;
}

.nav-part2 li{
    margin: 0;
    padding: 0;
    display: inline-block;
    list-style: none;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-part2 li:hover {
    border-bottom: 2px solid #177de5;
    transition-duration: 0.1s;
    z-index: 103;
}

.nav-part2 li:hover>a{
    color: #177de5;
    transition-duration: 0.1s;
}

/*Mega menu*/
/* Выпадающее мега-меню */
.mega-menu {
  position: absolute;
  left: 0;
  top: 104%;
  background: #fff;
  border: 1px solid #ddd;
  box-sizing: border-box;
  display: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 102;
  flex-direction: row;
  max-width: min(1240px, calc(100vw - 40px));
  overflow-x: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  width: max-content;
}

.nav-part2 li:hover .mega-menu {
  display: flex;
}

/* Колонки */
.mega-menu-column {
  display: flex;
  flex-direction: column;
  padding: 0;
  padding-left: 30px;
  padding-right: 30px;
  flex-shrink: 0;
}

.mega-menu-column.with-border{
    border-left: 1px solid #ccc;
}

.mega-menu-column h4 {
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 14px;
    line-height: 143%;
    color: #303030;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
    margin-top: 10px;
}


.mega-menu-column h4:first-child {
  margin-top: 0;
}

.nav-part2 .mega-menu-column h4 .mega-menu-section-link {
  color: #303030;
  display: inline-flex;
  font-family: var(--second-family);
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  line-height: 143%;
  margin: 0;
  text-align: left;
}

.nav-part2 .mega-menu-column h4 .mega-menu-section-link:hover {
  color: #0073e6;
}

.nav-part2 .mega-menu-column a {
  text-decoration: none;
  color: #555;
  margin: 5px 0;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
}

.mega-menu-column a:hover {
  color: #0073e6;
}

.nav-part2 a{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #62646a;
    text-decoration: none;
}

.nav-part2 > ul > li > a {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    white-space: nowrap;
}

.nav-part2 > ul > li:not(:first-child) > a {
    padding-left: 0;
}

.nav-part2 > ul > li:not(:first-child) > a::before {
    content: none;
}

.nav-category-icon {
    align-items: center;
    color: #9aa0a6;
    display: inline-flex;
    flex: 0 0 auto;
    height: 18px;
    justify-content: center;
    transition: color 0.15s ease;
    width: 18px;
}

.nav-category-icon svg {
    display: block;
    height: 17px;
    width: 17px;
}

.nav-part2 li:hover > a .nav-category-icon {
    color: #177de5;
}

.submenu-item__wrap-mark {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: 2px;
}

.submenu-item__mark {
    background: #e8f8ef;
    border-radius: 4px;
    color: #0a8f48;
    display: inline-flex;
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    padding: 2px 6px;
}

.submenu-item__popular {
    align-items: center;
    display: inline-flex;
    flex: 0 0 16px;
    height: 16px;
    justify-content: center;
    margin-left: 2px;
    position: relative;
    width: 16px;
}

.submenu-item__popular svg {
    display: block;
}

.submenu-item__popular::before,
.submenu-item__popular::after {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity .12s ease, visibility .12s ease;
    visibility: hidden;
    z-index: 106;
}

.submenu-item__popular::before {
    border-bottom: 5px solid #303030;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    content: "";
    left: 50%;
    top: calc(100% + 3px);
    transform: translateX(-50%);
}

.submenu-item__popular::after {
    background: #303030;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    color: #fff;
    content: attr(data-tooltip);
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    left: 50%;
    line-height: 1.2;
    padding: 7px 9px;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    white-space: nowrap;
}

.submenu-item__popular:hover::before,
.submenu-item__popular:hover::after,
.nav-part2 a:focus .submenu-item__popular::before,
.nav-part2 a:focus .submenu-item__popular::after {
    opacity: 1;
    visibility: visible;
}

/*End of main navigation*/


/*Start of footer*/
footer{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fbfbfb;
    padding-left: 20px;
    padding-right: 20px;
}

.fiwork-site-footer{
    margin-top: 100px !important;
}

.mobile-app-install-modal-open{
    overflow:hidden;
}

.mobile-app-install-modal-overlay{
    align-items:center;
    background:rgba(0, 0, 0, .6);
    backdrop-filter:blur(8px);
    display:flex;
    height:100%;
    justify-content:center;
    left:0;
    overflow:auto;
    padding:20px;
    position:fixed;
    top:0;
    transition:opacity .22s ease, visibility .22s ease;
    visibility:visible;
    width:100%;
    z-index:10050;
}

.mobile-app-install-modal-overlay.hidden{
    opacity:0;
    pointer-events:none;
    visibility:hidden;
}

.mobile-app-install-modal{
    align-items:center;
    background:#fff;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(17, 24, 39, .2);
    display:flex;
    flex-direction:column;
    gap:18px;
    max-width:400px;
    padding:26px 22px 20px;
    position:relative;
    text-align:center;
    transform:translateY(0);
    transition:transform .24s ease, opacity .24s ease;
    width:100%;
}

.mobile-app-install-modal-overlay.hidden .mobile-app-install-modal{
    opacity:0;
    transform:translateY(20px);
}

.mobile-app-install-modal:focus{
    outline:none;
}

.mobile-app-install-modal__close{
    align-items:center;
    background:#f2f4f7;
    border:0;
    border-radius:50%;
    color:#667085;
    cursor:pointer;
    display:flex;
    height:32px;
    justify-content:center;
    padding:0;
    position:absolute;
    right:16px;
    top:16px;
    width:32px;
}

.mobile-app-install-modal__icon{
    align-items:center;
    background:#177de5;
    border:1px solid #177de5;
    border-radius:18px;
    display:flex;
    height:72px;
    justify-content:center;
    width:72px;
}

.mobile-app-install-modal__icon svg{
    display:block;
    height:42px;
    width:42px;
}

.mobile-app-install-modal__content{
    display:grid;
    gap:8px;
}

.mobile-app-install-modal__eyebrow{
    color:#177de5;
    font-family:var(--font-family);
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.mobile-app-install-modal__content h3{
    color:#181d27;
    font-family:var(--font-family);
    font-size:21px;
    font-weight:700;
    line-height:1.3;
    margin:0;
}

.mobile-app-install-modal__content p{
    color:#535862;
    font-family:var(--font-family);
    font-size:14px;
    line-height:1.55;
    margin:0;
}

.mobile-app-install-modal__actions{
    display:grid;
    gap:10px;
    width:100%;
}

.mobile-app-install-modal__install,
.mobile-app-install-modal__later{
    align-items:center;
    border-radius:10px;
    cursor:pointer;
    display:flex;
    font-family:var(--font-family);
    font-size:15px;
    font-weight:700;
    height:48px;
    justify-content:center;
    padding:0 16px;
    text-decoration:none;
    width:100%;
}

.mobile-app-install-modal__install{
    background:#27c366;
    border:1px solid #27c366;
    color:#fff;
}

.mobile-app-install-modal__install:hover,
.mobile-app-install-modal__install:focus-visible{
    background:#1ab95a;
    border-color:#1ab95a;
    color:#fff;
}

.mobile-app-install-modal__later{
    background:#fff;
    border:1px solid #d0d5dd;
    color:#344054;
}

.mobile-app-install-modal__never{
    background:transparent;
    border:0;
    color:#667085;
    cursor:pointer;
    font-family:var(--font-family);
    font-size:13px;
    padding:2px 8px;
    text-decoration:underline;
    text-underline-offset:3px;
}

@media(max-width:767.98px){
    .mobile-app-install-modal-overlay{
        align-items:flex-end;
        padding:0;
    }

    .mobile-app-install-modal{
        border-radius:24px 24px 0 0;
        box-shadow:0 -18px 48px rgba(17, 24, 39, .18);
        max-height:100dvh;
        max-width:none;
        overflow-y:auto;
        padding:26px 20px calc(20px + env(safe-area-inset-bottom));
    }
}

.footer-container{
    width: 100%;
    max-width: 1240px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 60px 0px;
}

.footer-col1{
    display: flex;
    width: 400px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

.footer-col1 .footer-logo{
    width: 106px;
    height: auto;
    display: block;
}

.fiwork-gray-logo{
    width: 106px;
    height: auto;
    display: block;
}

.footer-col1 p{
    font-family: var(--font3);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: #52525b;
    text-align: left;
    margin: 0;
    padding: 0;
}

.footer-col1 .social-sites-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.footer-col1 .social-sites-container .footer-social-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    line-height: 0;
    color: #B5B6BA;
}

.footer-col1 .social-sites-container .footer-social-link--skolkovo{
    width: 72px;
    flex-basis: 72px;
}

.footer-col1 .social-sites-container .footer-social-icon{
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.footer-col1 .social-sites-container .skolkovo-icon{
    width: 72px;
}

.footer-social-icon path{
    transition: fill 0.18s ease;
}

.footer-social-link:hover .twitter-icon{
    --footer-twitter-bg: #2D3036;
}

.footer-social-link:hover .vk-icon{
    --footer-vk-fill: #2787F4;
}

.footer-social-link:hover .dzen-icon{
    --footer-dzen-bg: #2D3036;
}

.footer-social-link:hover .telegram-icon{
    --footer-telegram-bg: #039BE5;
}

.footer-social-link:hover .skolkovo-icon{
    --footer-skolkovo-bg: #B2ED52;
    --footer-skolkovo-mark: #4A5954;
    --footer-skolkovo-text: #4A5954;
}

.footer-nav-col{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-nav-col h3{
    padding: 0;
    margin: 0;
    text-align: left;
    font-family: var(--font3);
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    color: #191d23;
    margin-bottom: 20px;
}

.footer-nav-col a{
    text-decoration: none;
    font-family: var(--font3);
    font-weight: 400;
    font-size: 14px;
    line-height: 286%;
    color: #191d23;
    text-align: left;
}


.footer-container .footer-nav-col a:hover{
    color: #0177ff;
    transition-duration: 0.2s;
}

/*End of footer*/

body.service-details-page .main-container {
    width: 100%;
    max-width: 1240px;
}

body.service-details-page .main-container > .service-details-content {
    display: block;
    width: 100%;
    min-width: 0;
}



/*Fiwork modal-register-container*/
.fiwork-register-modal-container{
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow-x: hidden;
    padding: 20px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.fiwork-register-modal{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
    box-shadow: 0 8px 8px -4px rgba(10, 13, 18, 0.04), 0 20px 24px -4px rgba(10, 13, 18, 0.1);
    background: #fff;
    gap: 20px;
    padding: 20px;
    padding-top: 0;
    position: relative;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.24s ease, opacity 0.24s ease;
} 

.fiwork-register-modal .x-close-icon{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 24px;
    cursor: pointer;
}

.fiwork-register-modal-header{
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fiwork-register-modal-header .featured-icon{
    width: 48px;
    height: auto;
}

.fiwork-register-modal-header h3{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 156%;
    text-align: center;
    color: #181d27;
    margin: 0;
    padding: 0;
}

.fiwork-register-modal-header p{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    text-align: center;
    color: #535862;
    margin: 0;
    padding: 0;
}

.role-switch {
  background: #f5f5f5;
  border-radius: 999px;
  padding: 4px;
  width: 320px;
  max-width: 100%;
  display: grid;
  grid-template-columns: 49% 49%;
  gap: 2%;
  background: #f8f8fc;
  border-radius: 8px;
}

.role-switch input[type="radio"] {
  display: none;
}

.role-switch label {
  padding: 6px;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s;
  font-family: var(--font7);
    font-weight: 500;
    font-size: 13px;
    line-height: 138%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #000;
    border-radius: 8px;
}

.role-switch input[type="radio"]:checked + label {
  background: #fff;
  box-shadow: 0 0 0 1px #ddd;
  font-weight: 600;
  border-radius: 8px;
}

.fiwork-register-modal-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.fiwork-register-modal-form input[type='text']{
    width: 100%;
    border: 1px solid #d5d7da;
    border-radius: 8px;
    padding: 10px 14px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center; 
    max-width: 352px;
}

.fiwork-register-modal-form input[type='email']{
    width: 100%;
    border: 1px solid #d5d7da;
    border-radius: 8px;
    padding: 10px 14px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center; 
    max-width: 352px;
}

.password-wrapper,
.password-wrapper-login{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.password-input{
    width: 100%;
    border: 1px solid #d5d7da !important;
    border-radius: 8px;
    padding: 10px 14px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center; 
    max-width: 352px;
}

.toggle-password,
.toggle-password-login{
    position: absolute;
    right: 40px;
    cursor: pointer;
    user-select: none;
    color: #888;
    font-size: 18px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-password img,
.toggle-password-login img{
    width: 20px;
}

.password-visible-icon{
    display: none;
}

.toggle-password.hidden .password-visible-icon,
.toggle-password-login.hidden .password-visible-icon{
    display: inline-block;
}

.toggle-password.hidden .password-hidden-icon,
.toggle-password-login.hidden .password-hidden-icon{
    display: none;
}


.fiwork-register-modal-form input[type='submit']{
    border: 1px solid #d5d7da;
    border-radius: 8px;
    padding: 10px 14px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #fff;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    background: #04b70a;
    border: 0;
    width: 100%;
    max-width: 352px;
    cursor: pointer;
}

.fiwork-register-modal-form input[type='submit']:hover{
    background: #079e0c;
}

.fiwork-register-modal-form fieldset{
    border: 0px;
    border-top: 1px solid #e9eaeb;
    text-align: center;
    padding: 0;
    margin: 0;
}


.fiwork-register-modal-form fieldset{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-direction: column;
    width: 100%;
    padding: 0; 
    margin: 10px 0;
}


.fiwork-register-modal-form fieldset legend{
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 143%;
    text-align: center;
    color: #535862;
    padding: 0 10px;
}

.fiwork-register-modal-container.hidden{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.fiwork-register-modal-container.hidden .fiwork-register-modal{
    transform: translateY(18px);
    opacity: 0;
}
/*End of fiwork modal-register-container*/

/*Fiwork modal-login-container*/
.fiwork-login-modal-container{
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow-x: hidden; 
    padding: 20px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.fiwork-login-modal-container.hidden{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Кнопка закрытия — полный reset */
.x-close-icon {
    all: unset;              /* 🔥 сбрасывает ВСЁ браузерное */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #717680;          /* цвет крестика */
}

/* hover */
.x-close-icon:hover {
    color: #000;
}

/* доступность: фокус с клавиатуры */
.x-close-icon:focus-visible {
    outline: 2px solid #3475F6;
    outline-offset: 2px;
}

.fiwork-login-modal{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
    box-shadow: 0 8px 8px -4px rgba(10, 13, 18, 0.04), 0 20px 24px -4px rgba(10, 13, 18, 0.1);
    background: #fff;
    padding: 20px;
    padding-top: 0; 
    position: relative;
    gap: 7px;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.24s ease, opacity 0.24s ease;
} 

.fiwork-login-modal-container.hidden .fiwork-login-modal{
    transform: translateY(18px);
    opacity: 0;
}

.fiwork-login-modal .x-close-icon{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 24px;
    cursor: pointer;
}

.fiwork-login-modal-header{
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fiwork-login-modal-header .featured-icon{
    width: 48px;
    height: auto;
}

.fiwork-login-modal-header h3{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 156%;
    text-align: center;
    color: #181d27;
    margin: 0;
    padding: 0;
}

.fiwork-login-modal-header p{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    text-align: center;
    color: #535862;
    margin: 0;
    padding: 0;
}


.fiwork-login-modal-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.fiwork-login-modal-form input[type='text']{
    width: 100%;
    border: 1px solid #d5d7da;
    border-radius: 8px;
    padding: 10px 14px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center; 
    max-width: 352px;
}

.fiwork-login-modal-form button {
    border: 1px solid #d5d7da;
    border-radius: 8px;
    padding: 10px 14px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #fff;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    background: #04b70a;
    border: 0;
    width: 100%;
    max-width: 352px;
    cursor: pointer;
}

.fiwork-login-modal-form button:hover{
    background: #079e0c;
}

.fiwork-login-modal-form label{
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 143%;
    color: #414651;
    text-align: left;
    width: 100%;
}

.remember-me-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0 !important;
}

.remember-me-checkbox{
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 143%;
    color: #414651;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.remember-me-container .forgot-password-link{
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    color: #2b56cc;
    text-decoration: none;
}

.remember-me-container .forgot-password-link:hover{
    color: #0d38ae;
}

.remember-me-container{
    margin-bottom: 20px;
}

.social-sites-enter-links{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.social-sites-enter-links a{
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #B5B6BA;
}

.social-sites-enter-links .footer-social-icon{
    display: block;
    width: 20px;
    height: 20px;
}
/*End of fiwork modal-login-container*/

/*fiwork-footer*/
.fiwork-footer{
    background: #fff;
    border-top: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    width: 100%;
    margin-top: 100px;
}

.fiwork-footer-container{
    width: 100%;
    max-width: 1240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fiwork-footer-container .logo-lang-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #ededed;
    padding-bottom: 20px;
    width: 100%;
}

.fiwork-footer-container .lang-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    cursor: pointer;
    position: relative; 
    width: 150px;
    padding: 10px;
}


.fiwork-footer .select-lang-wrapper{
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 100;
    background-color: #fbfbfb;
    border-radius: 8px;
    display: none;
}

.fiwork-footer .lang-container:hover .select-lang-wrapper{
    display: flex;
}


.fiwork-footer .select-lang-wrapper .lang-option{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    cursor: pointer;
}

.fiwork-footer .select-lang-wrapper .lang-option.selected{
    display: none;
} 

.fiwork-footer-container .flag-icon{
    width: 16px;
    border-radius: 50%;
}

.fiwork-footer-container .chevron-down-icon{
    width: 10px;
}


.fiwork-footer-statistics{
    padding: 30px 0;
    border-bottom: 1px solid #ededed;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 40px;
}

.fiwork-footer-statistics .fiwork-statistics-part1{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
}

.fiwork-statistics-part1 .statistics-block{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; 
}

.fiwork-statistics-elem{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: #a5a5a5;
    gap: 5px;
    white-space: nowrap;
}

.statistics-block .statistics-num{
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    font-family: var(--third-family);
    font-weight: 700;
    font-size: 18px;
    line-height: 111%;
    color: #212121;
}

.statistics-block .statistics-num img{ 
    width: 24px;
}

.statistics-block .statistics-description{
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: #474747;
}

.fiwork-footer-navigation-container{ 
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 10px;
    width: 100%; 
}

.fiwork-footer-navigation{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.fiwork-footer-navigation a{
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: #09f;
    text-decoration: none;
    cursor: pointer;   
}

.fiwork-footer-social-sites{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; 
    gap: 8px;
}

.fiwork-footer-social-sites a{ 
    text-decoration: none;
    cursor: pointer;
    background: #f8f8f8;
    border-radius: 8px;
    padding: 10px 15px;
}

.fiwork-footer .partners-awards-and-apps{
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: space-between;
}

.fiwork-footer .partners-and-awards {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.fiwork-footer .partners-container,
.fiwork-footer .awards-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
}

.fiwork-footer .partners-container h3,
.fiwork-footer .awards-container h3{
    text-align: left;
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: #908f8f;
    margin: 0;
    padding: 0;
}

.fiwork-footer .partners-wrapper,
.fiwork-footer .awards-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.fiwork-footer .partners-wrapper a,
.fiwork-footer .awards-wrapper a{  
    cursor: pointer;
    text-decoration: none; 
}

.fiwork-footer .mobile-apps-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background: #f8f8f8;
    border-radius: 8px;
    height: 100%;
    padding: 15px;
    gap: 15px;
}

.fiwork-footer .mobile-apps-container h3{
    font-family: var(--third-family);
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    color: #323232;
    text-align: left;
    margin: 0;
    padding: 0;
}

.fiwork-footer .qr-and-apps-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.fiwork-footer .qr-container{
    width: 100px;
    aspect-ratio: 1/1;
    padding: 10px;
    text-decoration: none; 
    cursor: pointer; 
    border-radius: 8px; 
    background: #fff; 
}

.fiwork-footer .qr-container img{
    width: 100%; 
}

.fiwork-footer .mobile-app-links{
    display: grid;
    grid-template-columns: 100%;
    gap: 5px;
} 

.fiwork-footer .mobile-app-links a{
    cursor: pointer;
    text-decoration: none;
    min-width: 164px;
    display: flex;
    align-items: center;
    justify-content: center; 
    background: #fff;
    border: 1px solid #ededed; ;
    padding: 10px;
    border-radius: 8px;
}

.fiwork-footer .mobile-apps-description{
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: #ccc;
    margin: 0;
    padding: 0; 
}

/*end of fiwork-footer*/

/*Check-register-modal-container*/
.check-register-modal-container{
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow-x: hidden;
    padding: 20px;
}

.check-register-modal-container.hidden{
    display: none;
}

.check-register-modal{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
    box-shadow: 0 8px 8px -4px rgba(10, 13, 18, 0.04), 0 20px 24px -4px rgba(10, 13, 18, 0.1);
    background: #fff;
    gap: 5px;
    padding: 30px;
    padding-top: 0;
    position: relative;
} 

.check-register-modal .x-close-icon{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 24px;
    cursor: pointer;
}

.check-register-modal-header{
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.check-register-modal-header .featured-icon{
    width: 48px;
    height: auto;
}

.check-register-modal-header h3{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 156%;
    text-align: center;
    color: #181d27;
    margin: 0;
    padding: 0;
    margin-top: 15px;
}

.check-register-modal-header p{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    text-align: center;
    color: #535862;
    margin: 0;
    padding: 0;
}

.check-register-modal-header p .bold-text{  
    font-weight: 600;
}






.check-register-modal-container .control-buttons{
    width: 100%;
    max-width: 356px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 30px;
}

.check-register-modal-container .back-to-register-form-button{
    border: 1px solid #d5d7da;
    border-radius: 8px;
    padding: 10px 18px;
    height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    background: #fff;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #414651;
    cursor: pointer;
}

.check-register-modal-container .back-to-register-form-button:hover{
    background: #eee;
}

.check-register-modal-container .continue-register-button{
    border: 1px solid #04b70a;
    border-radius: 8px;
    padding: 10px 18px;
    width: 100%;
    height: 44px;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    background: #04b70a;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #fff;
    cursor: pointer;
}
.check-register-modal-container .continue-register-button:hover{
    background: #079e0c;
}
/*End of check-register-modal-container*/


/*Check-login-modal-container*/
.check-login-modal-container{
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow-x: hidden;
    padding: 20px;
}

.check-login-modal-container.hidden{
    display: none;
}

.check-login-modal{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
    box-shadow: 0 8px 8px -4px rgba(10, 13, 18, 0.04), 0 20px 24px -4px rgba(10, 13, 18, 0.1);
    background: #fff;
    gap: 5px;
    padding: 30px;
    padding-top: 0;
    position: relative;
} 

.check-login-modal .x-close-icon{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 24px;
    cursor: pointer;
}

.check-login-modal-header{
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.check-login-modal-header .featured-icon{
    width: 48px;
    height: auto;
}

.check-login-modal-header h3{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 156%;
    text-align: center;
    color: #181d27;
    margin: 0;
    padding: 0;
    margin-top: 15px;
}

.check-login-modal-header p{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    text-align: center;
    color: #535862;
    margin: 0;
    padding: 0;
}

.check-login-modal-header p .bold-text{  
    font-weight: 600;
}

.code-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
    max-width: 356px;
}

.code-container .code-input {
    width: 100%;
    aspect-ratio: 1/1;
    border: 2px solid #04b70a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    background: #fff;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 48px;
    line-height: 125%;
    letter-spacing: -0.02em;
    text-align: center;
    color: #04b70a;
}

.code-input:focus {
  border-color: #2e7d32;
}


.resend {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    color: #535862;
}
.resend a {
      color: #007aff;
      text-decoration: underline;
      cursor: pointer;
}
.resend a.disabled {
    pointer-events: none;
    color: #535862;
    opacity: 0.8;
    text-decoration: none;
}

.check-login-modal-container .control-buttons{
    width: 100%;
    max-width: 356px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 30px;
}

.check-login-modal-container .back-to-login-form-button{
    border: 1px solid #d5d7da;
    border-radius: 8px;
    padding: 10px 18px;
    height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    background: #fff;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #414651;
    cursor: pointer;
}

.check-login-modal-container .back-to-login-form-button:hover{
    background: #eee;
}

.check-login-modal-container .continue-login-button{
    border: 1px solid #04b70a;
    border-radius: 8px;
    padding: 10px 18px;
    width: 100%;
    height: 44px;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    background: #04b70a;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #fff;
    cursor: pointer;
}

.check-login-modal-container .continue-login-button:hover{
    background: #079e0c;
}
/*End of check-login-modal-container*/

/*Cookies-policy-container*/
.cookies-policy-wrapper{
    position: fixed;
    z-index: 1000;
    left: 30px;
    bottom: 30px;
    width: min(270px, calc(100vw - 60px));
    display: none;
}

.cookies-policy-container{
    position: relative;
    width: 100%;
    display: block;
    padding: 13px 16px;
    border: 1px solid rgba(31, 49, 76, .1);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(26, 39, 61, .12);
}

.cookies-policy-content{
    min-width: 0;
}

.cookies-policy-container .cookies-policy-title{
    font: 650 15px/1.35 var(--font-family), sans-serif;
    color: #1b2a46;
    text-align: left;
    margin: 0 0 4px;
    padding: 0 24px 0 0;
}

.cookies-policy-container .cookies-policy-close{
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8490a0;
    cursor: pointer;
}

.cookies-policy-container .cookies-policy-close svg{
    width: 15px;
    height: 15px;
}

.cookies-policy-container .cookies-policy-close:hover{
    background: #f1f4f8;
    color: #34445a;
}

.cookies-policy-container .cookies-policy-description{
    font: 400 12px/1.5 var(--font-family), sans-serif;
    color: #647084;
    text-align: left;
    margin: 0;
    padding: 0;
}

.cookies-policy-container a{
    color: #42678f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookies-policy-container .cookies-policy-more{
    display: block;
    width: fit-content;
    margin: 9px auto 0;
    font: 400 11px/1.4 var(--font-family), sans-serif;
    text-align: center;
    text-decoration: none;
}

.cookies-policy-container .cookies-policy-more:hover{
    text-decoration: none;
}

.cookies-policy-actions{
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.cookies-policy-container .cookies-policy-actions button{
    flex: 1;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid #e4e9ef;
    border-radius: 10px;
    background: #f7f9fb;
    color: #34445a;
    font: 550 12px/1.25 var(--font-family), sans-serif;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cookies-policy-container .cookies-policy-actions button:hover{
    background: #eef3f8;
    border-color: #d2dce8;
}

.cookies-policy-container .cookies-policy-actions button:focus-visible,
.cookies-policy-container .cookies-policy-close:focus-visible,
.cookies-policy-container a:focus-visible{
    outline: 2px solid #0088ff;
    outline-offset: 2px;
}

html[data-theme="dark"] .cookies-policy-container{
    background: #1e2a3d;
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .cookies-policy-container .cookies-policy-title{color: #f4f7fb}
html[data-theme="dark"] .cookies-policy-container .cookies-policy-close{color: #aabbd0}
html[data-theme="dark"] .cookies-policy-container .cookies-policy-close:hover{background: rgba(255,255,255,.09);color:#fff}
html[data-theme="dark"] .cookies-policy-container .cookies-policy-description{color: #afbdd0}
html[data-theme="dark"] .cookies-policy-container a{color: #a9cef5}
html[data-theme="dark"] .cookies-policy-container .cookies-policy-actions button{
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .13);
    color: #ecf3fb;
}
html[data-theme="dark"] .cookies-policy-container .cookies-policy-actions button:hover{
    background: rgba(255, 255, 255, .12);
}

@media (max-width: 700px){
    .cookies-policy-container{padding: 14px 16px}
}

@media (max-width: 420px){
    .cookies-policy-wrapper{left: 12px;bottom: 12px;width: calc(100vw - 24px)}
}
/*End of cookies-policy-container*/


.phone-header{
    display: none;
}


.burger-block{
    display: none;
}
    
.burger-block.active{
    display: flex;
}

.mobile-catalog-block{
    display: none;
}

.mobile-catalog-block.active-catalog{ 
    display: block;
}

.mobile{
    display: none;
}


/*user-header*/
.garlands-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.garland-container{
    overflow: hidden;
    margin-left: -1%;
    width: 101%;
}

.garland-container .garlands-img{
    margin-top: -7px;
    cursor: pointer;
    width: 100%;
}


/*form-message-block*/
.form-message-block{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-message-block .form-message{
    width: 100%;
    text-align: center;
    font-family: var(--third-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    margin: 10px 0;
}

.form-message-block .form-message.error{
    color: #f94636;
}

.form-message-block .form-message.success{
    color: #04b70a;
}

.form-message-block .form-message.hidden{
    display: none;
}


/*end of form-message-block*/
@media(max-width: 1600px){
    .garland-container .garlands-img{
        width: auto;
    }
}

.garland-container .garlands-img.gray{
    filter: grayscale(100%);
}

.garland-switch{
    position: absolute;
    top: -30px;
    right: 30px;
    transition-duration: 0.3s;
    transition-property: all;
}

.garlands-container:hover .garland-switch{
    top: 0px;
    transition-duration: 0.3s;
    transition-property: all;
}

.user-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    position: relative;
}

.unread-messages{
    display: inline-block;
    font-size: 12px !important;
    border-radius: 12px;
    background-color: pink;
    color: white;
    background: #ff6163;
    height: min-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 5px;
    line-height: 100%;
}

.user-header .user-header-nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
}

.user-header .user-header-nav a{
    text-decoration: none;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #62646a;
}

.user-header .user-header-nav a:hover{
    border-bottom: 2px solid #2787f5;
    padding: 16px 0px;
    color: #2787f5;
}


.user-header .user-header-nav a.notification{
    cursor: pointer;
    border-bottom: none;
}

.user-header .user-header-nav .notification-list-container{
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    width: 300px;
    max-width: calc(100vw - 20px);
    z-index: 100;
    display: none;
    padding-top: 8px;
}

.user-header .user-header-nav .notification-list{
    background: #f7f7f7;
    padding: 0px 10px;
    border-radius: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: min(420px, calc(100vh - 140px));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    display: block;
}

.user-header .user-header-nav .notification:hover .notification-list-container{
    display: block;
}

.user-header .user-header-nav .notification-list-elem{
    padding: 12px 0px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0;
    background: #f7f7f7;
    border-top: 1px solid #ddd;
    color: #1D2635;
    text-decoration: none;
}

.user-header .user-header-nav .notification-list-elem:first-child{
    border-top: none;
}

.user-header .user-header-nav .notification-list-elem span{
    display: block;
}

.user-header .user-header-nav .notification-list-elem .notification-time{
    margin-top: 4px;
    color: #8b93a1;
    font-size: 12px;
    line-height: 1.25;
}

.user-header .user-header-nav .notification-list-elem:hover{
    background: #fcfcfc;
}

.user-header .user-header-nav .notification-list-elem.active{
    background: #fff;
    color: #1D2635;
}

.user-header .user-header-nav .notification-list-elem a:hover{
    padding: 16px;
}


.user-header .balance{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    cursor: pointer;
    height: 30px;
}

.balance-text{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    font-family: var(--font7);
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    text-align: right;
    color: #05b;
    width: 100px;
    justify-content: space-between;
    z-index: 1;
}

.balance-select-text{
    text-decoration: none;
    cursor: pointer;
    color: #05b;
}

.balance-select-text.hidden{
    display: none;
}

.user-header .vertical-line{
    border-left: 1px solid rgba(5, 5, 5, 0.5);
    width: 0px;
    height: 10px;
}

.user-header .chat{ 
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.user-header .chat .user-dot{
    width: 8px;
    display: none;
}

.user-header .chat.active .user-dot{ 
    display: block;
}

.user-header .user-header-burger{
    cursor: pointer;
}

.user-header .user-header-avatar{
    cursor: pointer;
    position: relative;
    z-index: 10;
} 

.user-header .user-header-avatar .user-header-avatar-link{
    display: block;
    text-decoration: none;
    line-height: 0;
}

.user-header .user-header-avatar .img-container{
    width: 32px;
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start;
    border-radius: 100%;
    overflow: hidden;
}

.user-header .user-header-avatar .img-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: inline-block;
}


.user-header .user-header-avatar .user-avatar-status{
    width: 12px;
    aspect-ratio: 1/1;
    position: absolute;
    bottom: -2px;
    right: -2px;
    border: 2px solid #fff;
    border-radius: 100%;
    background: #ccc;
}

.user-header .user-header-avatar.active .user-avatar-status{
    background: #1dbf73;
}

.user-header-menu-container.hidden{
    display: none;
}

.user-header .balance .current-balance{
    font-family: var(--font-family);
    font-weight: 500;
    font-size:18px;
    line-height: 140%;
    color: #000;
    margin: 0;
    padding: 0;
    z-index: 1;
}

.user-header-menu-container{
    top: 100%;
    padding-top: 12px;
    position: absolute;
    right: 0;
    z-index: 102;
}

.user-header-menu{
    width: 240px;
    backdrop-filter: blur(25px);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: #fff;
    z-index: 100;
    padding: 10px;
}

.user-header-menu .part1{
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid rgba(5, 5, 5, 0.06);
    padding-bottom: 20px;
}

.user-header-menu .part1 .premium-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #aaacb0;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 5px;
    min-height: 22px;
    width: min-content;
}

.user-header-menu .part1 .premium-container .blue-diamond{
    display: none;
}

.user-header-menu .part1 .premium-container.active .blue-diamond{
    display: block;
}

.user-header-menu .part1 .premium-container.active .grey-diamond{
    display: none;
}

.user-header-menu .part1 .premium-container.active{
    background: #f1f7fd;
    color: #3f4041;
}

.user-header-menu .part1 .user-name{
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #121317;
}

.user-header-menu .part1 .user-username{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    cursor: pointer;
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    letter-spacing: 0.02em;
    color: #73798c;
}

.user-header-menu .part1 .user-username img{
    width: 14px;
}


.user-header-menu .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  cursor: pointer;
}

.user-header-menu .switch input {
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
}

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

.user-header-menu .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.user-header-menu .switch input:checked + .slider {
  background-color: #23c366;
}

.user-header-menu .switch input:checked + .slider:before {
  transform: translateX(20px);
}

.user-header-menu .receive-orders{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin-top: 5px;
    display: none;
}

.user-header-menu .receive-orders.active{
    display: flex;
}

.user-header-menu .receive-orders-text{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    font-family: var(--second-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 130%;
    color: #62646a;
}

.user-header-menu .receive-order-text{
    display: none;
}

.user-header-menu .receive-order-text.active{
    display: inline-block;
}

.user-header-menu .receive-orders-text .receive-orders-tooltip-container{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-header-menu .receive-orders-text .receive-orders-tooltip-text{
    top: calc(100% + 10px);
    left: auto;
    right: 0;
    transform: none;
    width: 400px;
    max-width: min(400px, calc(100vw - 32px));
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(17, 24, 39, 0.14);
    border: 1px solid #eef0f4;
    color: #2a2f36;
    z-index: 50;
}

.user-header-menu .receive-orders-text .receive-orders-tooltip-text::after{
    content: "";
    position: absolute;
    bottom: 100%;
    right: 14px;
    margin-left: 0;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.user-header-menu .receive-orders-text .receive-orders-tooltip-text p{
    font-family: var(--font6);
    font-weight: 400;
    font-size: 12px;
    line-height: 145%;
    letter-spacing: -0.01em;
    color: #333;
}

.user-header-menu .receive-orders-text .receive-orders-tooltip-text b{
    font-weight: 700;
    color: #222325;
}

.user-header-menu .part2{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.user-header-menu .part2 .user-type-block{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}

.user-header-menu .part2 .user-type{
    border: 1px solid #ededed;
    border-radius: 8px;
    padding: 12px;
    min-height: 42px;
    font-family: var(--second-family);
    font-weight: 500;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: -0.02em;
    color: #0a0614;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.user-header-menu .part2 .user-type.selected{
    background: #eff6ff;
    border: 1px solid #3b82f6;
}

.user-header-menu-nav{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.user-header .notification .notification-active-icon{
    display: none;
    position: relative;
    width: 22px;
    height: 22px;
    color: #74767e;
}

.user-header .notification.active .notification-active-icon{
    display: inline-block;
}

.user-header .notification .notification-active-icon .lucide{
    display: block;
    width: 22px;
    height: 22px;
}

.user-header .notification .notification-active-icon__dot{
    position: absolute;
    top: -1px;
    right: -1px;
    width: 7px;
    height: 7px;
    border: 1.5px solid #f8f8f9;
    border-radius: 50%;
    background: #ff62ad;
    pointer-events: none;
}

.user-header .notification.active .notification-icon{
    display: none;
}

.user-header-menu-nav a{
     font-family: var(--second-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 229%;
    letter-spacing: 0.02em;
    color: #121317;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    gap: 10px;
    border-radius: 8px;
    width: 100%;
    padding: 8px; 
}

.user-header-menu-nav a:hover{
    background: #f3f6f8;
    border-radius: 8px;
}

.user-header-menu-nav a img{
    width: 16px;
}

/*end of user-header*/

.lang-switch{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #b5b6ba;
    border-radius: 12px;
    padding: 1px;
    margin: 0;
    margin-top: 10px;
}

.lang-switch .seg{
    width: 42px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font5);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #7a7d85;
    border: 0;
    background: none;
    cursor: pointer;
}

.lang-switch .seg.active{
    border: 1px solid #9f9f9f;
    border-radius: 10px;
    width: 42px;
    height: 20px;
    background: #aeaeae;
    color: white;
}

.footer-mobile-menu{
    display: none;
}

.fiw-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    background: linear-gradient(to bottom, rgba(36, 36, 36, 0.1), rgba(36, 36, 36, 0.2));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s, visibility 0.3s;
}

.fiw-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.fiw-modal.is-open .fiw-modal__dialog{
    opacity: 1;
    transform: scale(1);
}

.fiw-modal__backdrop{
    position:absolute;
    inset:0;
    background: transparent;
}

.fiw-modal__dialog{
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 40px);
    overflow: visible;
    margin: 0;
    z-index: 1;
    outline: none;
    transform: scale(.98);
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
}

.fiw-modal__content{
    width: 100%;
}

body.fiw-modal-open{ overflow: hidden; }

body:has(.fiwork-balance-modal.show) > .modal-backdrop{
    opacity: 0 !important;
    background: transparent !important;
}

.fiwork-balance-modal.show{
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(36, 36, 36, 0.1), rgba(36, 36, 36, 0.2));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.fiwork-balance-modal .modal-dialog{
    width: calc(100% - 32px);
    max-width: 480px !important;
    margin: auto;
    opacity: 0;
    transform: scale(.98) !important;
    transition: opacity .3s ease, transform .3s ease !important;
}

.fiwork-balance-modal.show .modal-dialog{
    opacity: 1;
    transform: scale(1) !important;
}

.fiwork-balance-modal .modal-content{
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fiwork-wallet-withdraw-modal{
    position: fixed !important;
    inset: 0 !important;
    z-index: 10060 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: linear-gradient(to bottom, rgba(36, 36, 36, 0.1), rgba(36, 36, 36, 0.2));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.fiwork-wallet-withdraw-modal.show{
    display: flex !important;
}

.fiwork-wallet-withdraw-modal .modal-dialog{
    width: 100%;
    max-width: 440px;
    margin: auto;
}

.fiwork-wallet-withdraw-modal .modal-content{
    background: transparent;
    border: 0;
    box-shadow: none;
}

.fiwork-wallet-withdraw-modal .fill-balance-modal-block-container{
    max-width: 480px;
}

.fiwork-wallet-withdraw-select{
    width: 100%;
    height: 44px;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: #f2f1f0;
    padding: 12px 38px 12px 14px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    color: #181d27;
    box-shadow: none;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.fiwork-wallet-withdraw-select:focus{
    border-color: #4c8bf5;
    background-color: #fff;
    box-shadow: none;
}

.fiwork-withdraw-native-select{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*fill-balance-modal-block-container*/
.fill-balance-modal-block-container{
    width: 100%;
    max-width: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(17, 24, 39, 0.16);
    font-family: var(--font-family);
    overflow: hidden;
    padding: 0;
}

.fill-balance-modal-block-container.hidden{
    display: none;
}

.fill-balance-modal-block{
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    position: relative;
    gap: 0;
}

.fill-balance-modal-block-header{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 76px;
    padding: 36px 56px 20px;
    background: transparent;
    font-family: var(--font-family);
    color: #181d27;
    border-radius: 0;
    position: relative;
    text-align: left;
}

.fiw-wallet-mode-title{
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.fiw-wallet-mode-switch{
    width: 100%;
    max-width: 264px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #f2f4f7;
    margin: 0 auto;
}

.fiw-wallet-mode-switch__option{
    min-width: 0;
    min-height: 36px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #667085;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.fiw-wallet-mode-switch__option:hover{
    color: #181d27;
}

.fiw-wallet-mode-switch__option.is-active{
    background: #fff;
    color: #181d27;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(10, 13, 18, .12), 0 1px 2px rgba(10, 13, 18, .06);
    cursor: default;
}

.fiw-wallet-mode-switch__option:focus-visible{
    outline: 2px solid #3475f6;
    outline-offset: 1px;
}


.fill-balance-modal-block-content{
    padding: 0 36px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}


.fiw-deposit-alternative-note{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f1f6fa;
  color: #415367;
  font-size: 13px;
  line-height: 1.45;
}

.fiw-deposit-alternative-note > span{ flex: 1 1 190px; }

.fiw-deposit-alternative-note button{
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 11px;
  border: 0;
  border-radius: 9px;
  background: #dcecff;
  color: #175f9c;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.fiw-deposit-alternative-note button:hover{ background: #cfe3fa; }
.fiw-deposit-alternative-note button:focus-visible{ outline: 2px solid #1685e7; outline-offset: 2px; }
.fiw-deposit-alternative-note button:disabled{ opacity: .6; cursor: wait; }

.fill-balance-modal-block-content .fill-balance-modal-block-description{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 0 0 4px;
    text-align: center;
}

.fill-balance-modal-block-content .fill-balance-modal-block-description .pound-on-hand{
    width: 65px;
    height: 52px;
    display: block;
    flex: 0 0 auto;
}

.fill-balance-modal-block-content .fill-balance-modal-block-description p{
    max-width: 310px;
    text-align: center;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    color: #535862;
    margin: 0;
    padding: 0;
}

.fill-balance-modal-block-description .fiw-withdraw-finance-link{
    color: #356b9f;
    text-decoration: none;
}

.fill-balance-modal-block-description .fiw-withdraw-finance-link:hover,
.fill-balance-modal-block-description .fiw-withdraw-finance-link:focus-visible{
    color: #24547f;
    text-decoration: none;
}

.fiw-withdraw-method-overlay{
    position: fixed;
    inset: 0;
    z-index: 10080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(6px);
}

.fiw-withdraw-method-overlay[hidden]{
    display: none !important;
}

.fiw-withdraw-method-dialog{
    position: relative;
    box-sizing: border-box;
    width: 440px;
    max-width: 100%;
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    padding: 28px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(17, 24, 39, .22);
    font-family: var(--fiwork-modal-font-family, Inter, sans-serif);
}

.fiw-withdraw-method-dialog h3{
    margin: 0 36px 8px 0;
    color: #222325;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.fiw-withdraw-method-dialog .phone-modal-subtitle{
    margin: 0 0 20px;
    color: #74767e;
    font-size: 14px;
    line-height: 1.45;
}

.fiw-withdraw-method-close{
    position: absolute;
    top: 14px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3f4f6;
    color: #667085;
    font-size: 24px;
    cursor: pointer;
}

.fiw-withdraw-method-fields{
    display: grid;
    gap: 16px;
}

.fiw-withdraw-method-fields label{
    display: grid;
    gap: 8px;
    color: #343943;
    font-size: 14px;
    font-weight: 600;
}

.fiw-withdraw-method-fields :is(input, select){
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 15px;
    border: 1px solid #d8dce3;
    border-radius: 11px;
    outline: none;
    background: #fbfcfd;
    color: #222325;
    font: 400 15px var(--fiwork-modal-font-family, Inter, sans-serif);
}

.fiw-withdraw-method-fields :is(input, select):focus{
    border-color: #007bfb;
    box-shadow: 0 0 0 4px rgba(0, 123, 251, .1);
}

.fiw-withdraw-method-error{
    margin: 12px 0 0;
    color: #c93333;
    font-size: 13px;
}

.fiw-withdraw-method-error[hidden]{
    display: none;
}

.fiw-withdraw-method-actions{
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.fiw-withdraw-method-actions button{
    min-width: 100px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.fiw-withdraw-method-actions button:first-child{
    background: #f3f4f6;
    color: #555;
}

.fiw-withdraw-method-actions button:last-child{
    background: #007bfb;
    color: #fff;
}

.fiw-withdraw-method-actions button:disabled{
    opacity: .65;
    cursor: wait;
}

.fill-balance-modal-block-header h3{
    margin: 0;
    padding: 0;
    font-family: var(--third-family);
    font-weight: 900;
    font-size: 26px;
    line-height: 1.2;
    color: #181d27;
    text-align: left;
}

.fill-balance-modal-block-header .close-modal-grey-icon{
    position: absolute;
    top: 15px;
    right: 15px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(129, 140, 153, 0.1);
    color: #717680;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    cursor: pointer;
    box-shadow: none;
    transition: color .18s ease, background-color .18s ease, transform .3s ease;
}

.fill-balance-modal-block-header .close-modal-grey-icon:hover{
    color: #181d27;
    background: rgba(129, 140, 153, 0.18);
}

.fill-balance-modal-block-header .close-modal-grey-icon:focus-visible{
    outline: 2px solid #3475f6;
    outline-offset: 2px;
}

.fill-balance-modal-block-header .close-modal-grey-icon img{
    width: 12px;
    height: 12px;
    display: block;
    opacity: .72;
    pointer-events: none;
    transition: transform .3s ease;
}

.fill-balance-modal-block-header .close-modal-grey-icon:hover img{
    transform: rotate(90deg);
}

/* Shared modal composition. Use the frontend.ui.modal Blade component so
   feature modals only provide their content and actions. */
.fiwork-ui-modal .fiw-modal__dialog{
    max-width: 440px;
}

.fiwork-ui-modal__container{
    max-width: 440px;
}

.fiwork-ui-modal__header{
    min-height: 0;
    padding: 30px 56px 18px 32px;
}

.fiwork-ui-modal__header h3{
    font-size: 24px;
    font-weight: 800;
}

.fiwork-ui-modal__close svg{
    display: block;
    width: 14px;
    height: 14px;
    pointer-events: none;
    transition: transform .3s ease;
}

.fiwork-ui-modal__close:hover svg{
    transform: rotate(90deg);
}

.fiwork-ui-modal__body{
    padding: 0 32px 32px;
    align-items: stretch;
    gap: 20px;
}

.fiwork-ui-modal__actions{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.fiwork-ui-modal__actions button{
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 13px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, opacity .18s ease;
}

.fiwork-ui-modal__button--secondary{
    color: #414651;
    background: #f2f4f7;
}

.fiwork-ui-modal__button--secondary:hover{
    color: #181d27;
    background: #e9ecf0;
}

.fiwork-ui-modal__button--danger{
    color: #fff;
    background: #d94c5c;
}

.fiwork-ui-modal__button--danger:hover{
    color: #fff;
    background: #c83f4f;
}

.fiwork-ui-modal__actions button:disabled{
    opacity: .62;
    cursor: wait;
}

@media (max-width: 600px){
    .fiwork-ui-modal__header{
        padding: 26px 52px 16px 20px;
    }

    .fiwork-ui-modal__body{
        padding: 0 20px max(24px, env(safe-area-inset-bottom));
    }

    .fiwork-ui-modal__actions{
        flex-direction: column-reverse;
    }

    .fiwork-ui-modal__actions button{
        width: 100%;
    }
}

.fill-balance-modal-form{
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 auto;
}

.fill-balance-modal-form .sum-description{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 146%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    color: #535862;
    width: 100%;
    text-align: left;
}

.fill-balance-modal-form .additional-sum-block.hidden,
.fill-balance-modal-form .result-sum-block.hidden{
    display: none;
}

.fill-balance-modal-form .balance-popup__commission-row{
    padding-top: 2px;
    z-index: 5;
}

.fill-balance-modal-form .balance-popup__commission-tip{
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.fill-balance-modal-form .balance-popup__commission-tip .round-question-icon{
    width: 16px;
    height: 16px;
    display: block;
}

.fill-balance-modal-form .balance-popup__commission-tooltip{
    position: absolute;
    top: auto;
    bottom: calc(100% + 8px);
    left: 0;
    right: auto;
    transform: none;
    width: min(320px, 100%);
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16);
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    color: #374151;
    white-space: normal;
    overflow-wrap: break-word;
    z-index: 130;
}

.fill-balance-modal-form .balance-popup__commission-row.is-tooltip-open .balance-popup__commission-tooltip,
.fill-balance-modal-form .balance-popup__commission-row:has(.balance-popup__commission-tip:focus-visible) .balance-popup__commission-tooltip{
    visibility: visible;
    opacity: 1;
}

@media (hover: hover){
    .fill-balance-modal-form .balance-popup__commission-row:has(.balance-popup__commission-tip:hover) .balance-popup__commission-tooltip{
        visibility: visible;
        opacity: 1;
    }
}

@media (max-width: 767.98px){
    .fill-balance-modal-form .balance-popup__commission-tooltip{
        position: static;
        display: none;
        width: 100%;
        margin-top: 4px;
    }

    .fill-balance-modal-form .balance-popup__commission-row.is-tooltip-open .balance-popup__commission-tooltip,
    .fill-balance-modal-form .balance-popup__commission-row:has(.balance-popup__commission-tip:focus-visible) .balance-popup__commission-tooltip{
        display: block;
    }
}

.fill-balance-modal-form .balance-popup__content-result{
    border-top: 1px solid #edf0f3;
    padding-top: 12px;
}


.fill-balance-modal-form .sum-description-text{
    font-weight: 600;
    color: #333;
}

.fill-balance-modal-form .form-input{
    width: 100%;
    display:  flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    position: relative;
}

.fill-balance-modal-form .form-input label{
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    color: #414651;
    width: auto;
    display: inline-block;
}

.fill-balance-modal-form .balance-popup__label-spacer{
    display: none;
}

.fill-balance-modal-form .form-input .result-sum{
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    width: 100%;
    color: #181d27;
}

.fill-balance-modal-form .result-sum-text{
    font-size: 18px;
    font-weight: 700;
}

.fill-balance-modal-form .form-input .select-payment-method{
    width: 100%;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1;
    background: #f2f1f0;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 12px 14px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.35;
    color: #181d27;
    cursor: pointer;
    position: relative;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.fill-balance-modal-form .form-input .select-payment-method:hover{
    border-color: #4c8bf5;
    background: #fff;
    box-shadow: none;
}

.fill-balance-modal-form .select-payment-list-container{
    position: absolute;
    width: 100%;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    display: none;
}

.fill-balance-modal-form .select-payment-list-container:not(.hidden){
    display: block;
}

.fill-balance-modal-form .select-payment-list-container.hidden{
    display: none;
}

.fill-balance-modal-form .select-payment-list{
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 18px 36px rgba(16, 24, 40, .14);
    background: #fff;
    overflow: hidden;
}

.payment-gateway-wrapper{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.payment-gateway-wrapper .payment-method-elem{
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 12px;
    border: 1px solid #e5eaf0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: #fff;
    color: #202936;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.payment-gateway-wrapper .payment-method-elem:hover{
    border-color: #b9d9f7;
    background: #fbfdff;
}

.payment-gateway-wrapper .payment-method-elem.selected{
    border-color: #177de5;
    background: #f3f8ff;
    box-shadow: 0 8px 20px rgba(23, 125, 229, .1);
}

.payment-method-elem__icon--method{
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #edf6ff;
    color: #177de5;
    font-size: 15px;
}

.payment-method-elem__body{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payment-method-elem__text{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-method-elem__body small{
    font-size: 12px;
    line-height: 1.25;
    color: #7b8794;
}

.payment-method-tiles{
    width: 100%;
    position: relative;
}

.payment-method-tiles__grid,
.payment-method-tiles__grid.hidden{
    display: block !important;
    width: 100%;
}

.payment-method-tiles .payment-gateway-wrapper{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
}

.payment-method-tiles .payment-method-elem{
    position: relative;
    min-width: 0;
    min-height: 112px;
    height: 100%;
    padding: 14px 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid #e4e7eb;
    border-radius: 14px;
    background: #f7f7f6;
    color: #3f4752;
    text-align: center;
    box-shadow: none;
    isolation: isolate;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.payment-method-tiles .payment-method-elem::after{
    content: "✓";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #5d9fd8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    opacity: 0;
    transform: scale(.75);
    transition: opacity .18s ease, transform .18s ease;
}

.payment-method-tiles .payment-method-elem:hover{
    border-color: #cbd6df;
    background: #fbfcfc;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 41, 59, .07);
}

.payment-method-tiles .payment-method-elem:focus-visible{
    outline: 2px solid rgba(76, 139, 245, .5);
    outline-offset: 2px;
}

.payment-method-tiles .payment-method-elem.selected{
    border-color: #8ab9df;
    background: #f2f7fb;
    color: #274c69;
    box-shadow: 0 0 0 2px rgba(93, 159, 216, .13);
}

.payment-method-tiles .payment-method-elem.selected::after{
    opacity: 1;
    transform: scale(1);
}

.payment-method-tiles .payment-method-elem__icon--method{
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 13px;
    background: #eceff2;
    color: #5f6b78;
    font-size: 19px;
}

.payment-method-tiles .payment-method-elem__brand-logo{
    display: block;
    width: 27px;
    height: 27px;
    object-fit: contain;
}

.payment-method-tiles .payment-method-elem__icon--method[data-gateway-brand="steam"]{
    background: #171d25;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.payment-method-tiles .payment-method-elem__icon--method[data-gateway-brand="telegram"]{
    background: #eaf8ff;
}

.payment-method-tiles .payment-method-elem__icon--method[data-gateway-brand="sbp"]{
    background: #fff;
    box-shadow: inset 0 0 0 1px #e7eaf0;
}

.payment-method-tiles .payment-method-elem__icon--method[data-gateway-brand="mobile"]{
    color: #269b63;
    background: #e7f8ef;
}

.payment-method-tiles .payment-method-elem__icon--method[data-gateway-brand="crypto"]{
    color: #f7931a;
    background: #fff2df;
}

.payment-method-tiles .payment-method-elem__icon--method[data-gateway-brand="card"]{
    color: #307fe2;
    background: #eaf3ff;
}

.payment-method-tiles .payment-method-elem__icon--method[data-gateway-brand="foreign-card"]{
    color: #6757d9;
    background: #f0edff;
}

.payment-method-tiles .payment-method-elem__icon--method[data-gateway-brand="bank"]{
    color: #348477;
    background: #e9f6f3;
}

.payment-method-tiles .payment-method-elem__icon--method[data-gateway-brand="paypal"]{
    color: #1674c1;
    background: #e8f3ff;
}

.payment-method-tiles .payment-method-elem__icon--method[data-gateway-brand="wallet"]{
    color: #8064c9;
    background: #f0ecfb;
}

.payment-method-tiles .payment-method-elem__icon--method[data-gateway-brand="manual"]{
    color: #8558c7;
    background: #f3ecff;
}

.payment-method-tiles .payment-method-elem__icon--method[data-gateway-brand="cash-on-delivery"]{
    color: #24945f;
    background: #e7f8ef;
}

.payment-method-tiles .payment-method-elem__icon--method[data-gateway-brand="other"]{
    color: #218a93;
    background: #e8f7f8;
}

.payment-method-tiles .payment-method-elem[data-payment-choice="sbp"] .payment-method-elem__icon--method{
    background: #fff;
    box-shadow: inset 0 0 0 1px #e7eaf0;
}

.payment-method-tiles .payment-method-elem[data-payment-choice="card"] .payment-method-elem__icon--method{
    background: #eaf3ff;
    color: #307fe2;
}

.payment-method-tiles .payment-method-elem[data-payment-choice="foreign_card"] .payment-method-elem__icon--method{
    background: #f0edff;
    color: #6757d9;
}

.payment-method-tiles .payment-method-elem[data-payment-choice="crypto"] .payment-method-elem__icon--method{
    background: #fff2df;
    color: #f7931a;
}

.payment-method-tiles .payment-method-elem[data-payment-choice="manual"] .payment-method-elem__icon--method{
    background: #f3ecff;
    color: #8558c7;
}

.payment-method-tiles .payment-method-elem__body{
    width: 100%;
    align-items: center;
    gap: 3px;
}

.payment-method-tiles .payment-method-elem__text{
    width: 100%;
    color: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
    white-space: normal;
}

.payment-method-tiles .payment-method-elem__body small{
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    color: #818995;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.payment-method-tiles .payment-gateway-extra,
.payment-method-tiles .kinetic_payment_show_hide{
    grid-column: 1 / -1;
    height: auto;
}

@media (max-width: 575px){
    .payment-method-tiles .payment-gateway-wrapper{
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 6px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .payment-method-tiles .payment-gateway-wrapper::-webkit-scrollbar{
        display: none;
    }

    .payment-method-tiles .payment-method-elem{
        flex: 1 0 88px;
        min-width: 88px;
        min-height: 96px;
        padding: 10px 7px;
        border-radius: 12px;
        scroll-snap-align: start;
    }

    .payment-method-tiles .payment-method-elem__icon--method{
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 11px;
        font-size: 17px;
    }

    .payment-method-tiles .payment-method-elem__brand-logo{
        width: 24px;
        height: 24px;
    }

    .payment-method-tiles .payment-method-elem__text{
        font-size: 12px;
    }

    .payment-method-tiles .payment-method-elem__body small{
        display: none;
    }
}

.fill-balance-modal-form .select-payment-list .payment-gateway-wrapper{
    display: block;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
}

.fill-balance-modal-form .select-payment-list .payment-method-elem{
    min-height: 48px;
    padding: 10px;
    border: 0;
    border-radius: 9px;
    box-shadow: none;
}

.fill-balance-modal-form .select-payment-list .payment-method-elem + .payment-method-elem{
    margin-top: 2px;
}

.fill-balance-modal-form .select-payment-list .payment-method-elem.selected{
    color: #177de5;
    background: #f3f8ff;
}

.fill-balance-modal-form .select-payment-list .payment-method-elem__icon--method{
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 9px;
    font-size: 13px;
}

.payment-gateway-extra,
.kinetic_payment_show_hide{
    grid-column: 1 / -1;
}

.fill-balance-modal-form .form-input .select-payment-method .chevron-down-icon{
    display: inline-block;
    width: 14px;
    height: 14px;
    opacity: .7;
    flex-shrink: 0;
}

.fill-balance-modal-form .payment-method-text{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    color: #181d27;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fill-balance-modal-form .form-input .enter-sum{
    width: 100%;
    background: #f2f1f0;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 12px 36px 12px 14px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    color: #181d27;
    box-shadow: none;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.fill-balance-modal-form .form-input .enter-sum::placeholder{
    color: #717680;
}

.fill-balance-modal-form .form-input .enter-sum:focus{
    border-color: #4c8bf5;
    background: #fff;
    box-shadow: none;
}

.fill-balance-modal-form .form-input .enter-sum.has-error{
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12), 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

.fiw-withdraw-limit-message{
    display: none;
    margin: 0;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    line-height: 150%;
    color: #dc2626;
}

.fiw-withdraw-limit-message.is-visible{
    display: block;
}

.fiw-withdraw-amount-meta{
    width: 100%;
    min-height: 18px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.fiw-withdraw-amount-meta .fiw-withdraw-limit-message{
    flex: 1 1 190px;
}

.fiw-withdraw-available{
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: #8a929c;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.fiw-withdraw-available strong{
    color: #4e5968;
    font-size: 13px;
    font-weight: 650;
}

.fill-balance-modal-form .submit-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.fill-balance-modal-form .submit-payment{
    border: 0;
    border-radius: 12px;
    padding: 13px 20px;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 150%;
    color: #fff;
    background: #2196f3;
    opacity: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.fill-balance-modal-form .submit-payment.is-ready{
    background: #2196f3;
}

.fill-balance-modal-form .submit-payment:hover{
    background: #048af8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.fill-balance-modal-form .submit-payment:disabled,
.fill-balance-modal-form .submit-payment.is-disabled{
    color: #8d96a1;
    background: #e2e6ea;
    cursor: not-allowed;
    opacity: 1;
    transform: none;
    box-shadow: none;
}

.fill-balance-modal-form .submit-payment:disabled:hover,
.fill-balance-modal-form .submit-payment.is-disabled:hover{
    background: #e2e6ea;
    transform: none;
    box-shadow: none;
}

.fill-balance-modal-form--withdraw{
    gap: 12px;
}

.gateway-information-wrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gateway-information-wrapper:empty{
    display: none;
}

.fiw-withdraw-field{
    width: 100%;
    height: 44px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #f2f1f0;
    padding: 12px 14px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 143%;
    color: #181d27;
    box-shadow: none;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.fiw-withdraw-field::placeholder{
    color: #717680;
}

.fiw-withdraw-field:focus{
    border-color: #4c8bf5;
    background: #fff;
    box-shadow: none;
}

.fiw-withdraw-search-select{
    position: relative;
    width: 100%;
}

.fiw-withdraw-search-select.is-open{
    z-index: 60;
}

.fiw-withdraw-search-select__button{
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #f2f1f0;
    padding: 12px 14px;
    color: #181d27;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 143%;
    text-align: left;
    box-shadow: none;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.fiw-withdraw-search-select__button:hover,
.fiw-withdraw-search-select__button:focus{
    border-color: #4c8bf5;
    background: #fff;
    box-shadow: none;
}

.fiw-withdraw-search-select.is-invalid .fiw-withdraw-search-select__button{
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12), 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

.fiw-withdraw-search-select__button span:first-child{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fiw-withdraw-search-select__chevron{
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 2px solid #717680;
    border-bottom: 2px solid #717680;
    transform: rotate(45deg);
    margin-top: -4px;
    transition: transform .18s ease, margin-top .18s ease;
}

.fiw-withdraw-search-select__button[aria-expanded="true"] .fiw-withdraw-search-select__chevron{
    transform: rotate(225deg);
    margin-top: 4px;
}

.fiw-withdraw-search-select__dropdown{
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(100% + 6px);
    display: grid;
    gap: 8px;
    max-height: min(310px, calc(100dvh - 120px));
    overflow: hidden;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(17, 24, 39, .14);
}

.fiw-withdraw-search-select__dropdown.hidden{
    display: none;
}

.fiw-withdraw-search-select__search{
    width: 100%;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #f2f1f0;
    padding: 10px 12px;
    color: #181d27;
    font-family: var(--font-family);
    font-size: 14px;
    outline: none;
}

.fiw-withdraw-search-select__search:focus{
    border-color: #4c8bf5;
    background: #fff;
    box-shadow: none;
}

.fiw-withdraw-search-select__list{
    max-height: min(220px, calc(100dvh - 190px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: grid;
    gap: 2px;
    padding-right: 2px;
}

.fiw-withdraw-search-select__option{
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 9px 10px;
    color: #181d27;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 18px;
    text-align: left;
}

.fiw-withdraw-search-select__option:hover,
.fiw-withdraw-search-select__option.is-selected{
    background: #effdf4;
    color: #058a3c;
}

.fiw-withdraw-search-select__option.hidden{
    display: none;
}

.fiw-withdraw-search-select__empty{
    padding: 10px;
    color: #717680;
    font-size: 13px;
    text-align: center;
}

.fiw-withdraw-search-select__empty.hidden{
    display: none;
}

.fiw-active-withdraw-card{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    background: #fff;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.04);
}

.fiw-active-withdraw-card__header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fiw-active-withdraw-card__header div{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fiw-active-withdraw-card__header span,
.fiw-active-withdraw-item span,
.fiw-active-withdraw-details > span{
    color: #717680;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
}

.fiw-active-withdraw-card__header strong{
    color: #181d27;
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 700;
    line-height: 130%;
}

.fiw-active-withdraw-status{
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 4px 10px;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 700;
    line-height: 150%;
}

.fiw-active-withdraw-status.is-pending{
    background: #fff7ed;
    color: #c2410c;
}

.fiw-active-withdraw-status.is-processing{
    background: #eff6ff;
    color: #1d4ed8;
}

.fiw-active-withdraw-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.fiw-active-withdraw-item{
    min-width: 0;
    border: 1px solid #edf0f3;
    border-radius: 10px;
    background: #f9fafb;
    padding: 10px;
}

.fiw-active-withdraw-item strong,
.fiw-active-withdraw-details strong{
    display: block;
    margin-top: 2px;
    color: #181d27;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 700;
    line-height: 146%;
    word-break: break-word;
}

.fiw-active-withdraw-details{
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid #edf0f3;
    padding-top: 12px;
}

.fiw-active-withdraw-details div{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fiw-active-withdraw-details small{
    color: #717680;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
}

.fiw-active-withdraw-details strong{
    margin-top: 0;
    text-align: right;
}

.fiw-active-withdraw-close{
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: #23c366;
    color: #fff;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    cursor: pointer;
    transition: background-color .18s ease;
}

.fiw-active-withdraw-close:hover{
    background: #1faa59;
}

@media (max-width: 575px){
    .fiw-active-withdraw-grid{
        grid-template-columns: 1fr;
    }

    .fiw-active-withdraw-card__header{
        flex-direction: column;
    }

    .fiw-active-withdraw-details div{
        flex-direction: column;
        gap: 2px;
    }

    .fiw-active-withdraw-details strong{
        text-align: left;
    }
}

.fill-balance-modal-form .select-payment-list .payment-method-elem.is-empty{
    opacity: .7;
    cursor: default;
    color: #717680;
}

.fill-balance-modal-form .select-payment-list .payment-method-elem.is-empty:hover{
    background: #fff;
}
/*end of fill-balance-modal-block-container*/




/*tooltip*/
.tooltip-container {
    position: relative; 
    cursor: help; 
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    opacity: 0; 
    position: absolute;
    z-index: 10;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px; 
    background-color: #fefefe;
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.06);
    color: #111;
    text-align: left;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: normal;
    transition: opacity 0.3s, visibility 0.3s;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.tooltip-text h4,
.tooltip-text .description-text{
    font-size: 14px;
    margin: 0;
    padding: 0;
}

#tooltipGraph {
    position: absolute;
    padding: 6px 10px;
    background: #fff;
    color: #111;
    font-size: 12px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: 0.15s;
    z-index: 9999;
    white-space: nowrap;
}

/*end of tooltip style*/


/* Стилизация для скрытия стрелок у input type="number" */
input[type="number"] {
    -moz-appearance: textfield; /* Скрывает стрелки в Firefox */
    appearance: none;          /* Базовое свойство */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;  /* Скрывает стрелки в Chrome, Safari, Edge */
    margin: 0;                 /* Также полезно убрать margin */
}


@media (max-width: 1220px){
    .nav-part ul{
        height: auto;
    }
    
    .nav-part2 li a{
        font-size: 14px;
    }
}

@media (max-width: 1150px){
    .computer-user-header .nav-part1{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .computer-user-header .nav-part1-container{
        height: auto;
        padding-bottom: 10px;
        padding-top: 10px;
    }
    
    .computer-user-header .user-header{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
    }
}


@media (max-width: 1050px){
    .nav-part2 li a{
        font-size: 12px;
        text-align: center;
    }
}

@media (max-width: 1000px){
    .footer-container{
        padding-left: 0;
        padding-right: 0;
    }
    
    
    .fiwork-footer-statistics .fiwork-statistics-part1{
        display: inline-block;
        text-align: left;
    }
    
    .fiwork-footer-statistics .statistics-block{
        display: inline-flex;
        margin: 15px; 
    }
}


@media (max-width: 900px){
    
    .footer-container{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; /* Две колонки равной ширины */
        grid-template-rows: auto auto; /* Две строки с автоматической высотой */
        grid-template-areas: 
            "first first first" /* Первая строка: первый элемент занимает обе колонки */
            "second third fourth"; /* Вторая строка: второй и третий элементы делят поровну */
        gap: 30px;
    }
    
    .footer-col1{
        grid-area: first; 
        width: 100%;
    }
    
    .footer-col2{
        grid-area: second;
    }
    
    .footer-col3{
        grid-area: fourth;
    }
    
}

@media (max-width: 840px){
    .logo-and-search-block .search-container .search-service-input{
        width: 300px;
    }
    
    .additional-apps-text h2{
        font-size: 18px;
    }
}

@media (max-width: 800px){
    .logo-and-search-block .search-container .search-service-input{
        width: 250px;
    }
    
    .registration-and-login-block .register-button{
        width: auto;
        font-size: 14px;
        height: auto;
        padding-left: 10px;
        padding-right: 10px;
    }

    .registration-and-login-block .login-button{
        width: auto;
        font-size: 14px;
        height: auto;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    
    .additional-apps-text h2{
        font-size: 16px;
    }
    FD
    moniPl
    .additional-apps-text p{
        font-size: 12px;
    }
    
    .mega-menu-column {
      display: flex;
      padding-left: 10px;
      padding-right: 10px;
      flex-shrink: 0;
    }
    
    
    .mega-menu-column h4 {
        font-size: 12px;
    }
    
    .mega-menu-column a{
        font-size: 12px;
    }
    
    .fiwork-footer-navigation-container{ 
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        justify-content: flex-start;
    }
}

@media (max-width: 768px){
    .computer-header{
        display: none;
    }
    
    .phone-header{
        display: block;
        margin-bottom: 0px;
        padding: 0;
    }

    body.fiwork-page-inner{
        padding-top: 60px !important;
    }
    
    div.computer-version{
        display: none;
    }
    
    .logo-burger-login-block{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding-left: 20px;
        padding-right: 20px;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 100;
    }

    .phone-header--compact .logo-burger-login-block{
        border-bottom: 1px solid #e6e8ec;
    }

    .phone-header--compact .fiwork-mobile-header-search{
        display: none !important;
    }
    
    .logo-burger-login-block .burger-icon{
        width: 24px;
    }
    
    .logo-burger-login-block .mobile-logo-icon{
        width: 106px;
        height: auto;
        display: block;
    }
    
    
    .mobile-search-block{
        padding: 50px 20px;
        padding-bottom: 10px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .mobile-search-input-container{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        border: 1px solid #f2f1f0;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .mobile-search-input-container input{
        width: 100%;
        padding: 13px 41px 13px 53px;
        height: 48px;
        background: #fff;
        font-family: var(--second-family);
        font-weight: 400;
        font-size: 16px;
        color: #999;
        padding-left: 40px;
        outline: none;
        border: none;
    }
    
    .mobile-search-input-container img{
        position: absolute;
        left: 30px;
        width: 24px;
    } 
    
    .mobile-search-block h3{
        font-family: var(--second-family);
        font-weight: 600;
        font-size: 22px;
        line-height: 127%;
        color: #111;
        padding: 0;
        margin: 0;
        margin-bottom: 15px; 
    }
    
    .mobile-search-block .search-input-submit{
        border-radius: 8px;
        padding: 11px 0px 12px;
        height: 48px;
        min-width: 150px;
        min-height: 48px;
        background: #0177ff;
        font-family: var(--second-family);
        font-weight: 600;
        font-size: 16px;
        line-height: 150%;
        text-align: center;
        color: #fff;
    }
    
    
    .mobile-footer-container.mobile{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    
    .footer-description-text{
        font-family: var(--font3);
        font-weight: 400;
        font-size: 14px;
        line-height: 220%;
        color: #52525b;
        max-width: 240px;
        text-align: left;
        margin: 0;
        padding: 0;
    }
    
    .footer-accordion-nav{
        width: 100%;
    }
    
    .footer-accordion-block{
        width: 100%;
    }
    
    footer{
        padding-top: 25px;
        padding-bottom: 25px;
        margin-top: 50px;
    }
    
    .mobile-additional-apps-block{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        max-width: 180px;
    }
    
    .mobile-additional-apps-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .mobile-additional-apps-links img{
        width: 140px;
    }
    
    .mobile-additional-apps-links{
        display: flex;
        flex-direction: row;
        gap: 8px;
    }
    
    .mobile-additional-apps-container .social-sites-enter-links .lang-switch{
        margin: 0;
    }
    
    .mobile-additional-apps-container .social-sites-enter-links .footer-social-icon{
        width: 20px;
        height: 20px;
    }
    
    .garlands-container{
        top: 60px;
        z-index: 100;
        position: fixed;
    }
    
    .garland-switch{
        display: none;
    }    
    
    .logo-burger-login-block .burger-container{
        z-index: 100;
        background: #fff;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    
    .footer-mobile-menu{
        position: fixed;
        width: 100%;
        padding: 0 30px env(safe-area-inset-bottom);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        background: #fff;
        border-top: 0;
        box-shadow: 0 -3px 64px rgba(177, 187, 205, 0.23);
        bottom: 0;
        left: 0;
        height: calc(78px + env(safe-area-inset-bottom));
        z-index: 120;
        box-sizing: border-box;
    }
    
    .footer-mobile-menu .footer-mobile-elem{
        width: 42px;
        height: 78px;
        padding-top: 16px;
        padding-left: 0;
        padding-right: 0;
        background: transparent;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        border-top: 3px solid transparent;
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: center;
        justify-content: flex-start;
        text-decoration: none;
        cursor: pointer;
        color: #848da3;
        box-sizing: border-box;
    }
    
    .footer-mobile-menu .footer-mobile-icon,
    .footer-mobile-menu .footer-mobile-elem svg{
        width: 24px;
        height: 24px;
        display: block;
    }

    .footer-mobile-menu .footer-mobile-badge-wrap{
        position: relative;
    }

    .footer-mobile-menu .fiwork-header-orders-count,
    .footer-mobile-menu .fiwork-header-count-badge,
    .footer-mobile-menu .fiwork-header-action-count{
        position: absolute;
        top: -8px;
        right: -10px;
        min-width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        border-radius: 999px;
        background: #007bfb;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0;
        box-shadow: 0 0 0 2px #fff;
        pointer-events: none;
        box-sizing: border-box;
    }

    .footer-mobile-menu .footer-mobile-avatar{
        width: 24px;
        height: 24px;
        display: block;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .footer-mobile-menu .footer-mobile-elem .menu-text{
        text-align: center;
        font-family: var(--font-family), Manrope, sans-serif;
        font-weight: 600;
        font-size: 12px;
        line-height: 14px;
        color: currentColor;
        margin: 0;
        padding: 0;
    }
    
    .footer-mobile-menu .footer-mobile-elem.active{
        border-top-color: #0861cf;
        color: #0a77ff;
    }

    .footer-mobile-menu .footer-mobile-elem.active .menu-text{
        font-weight: 700;
    }
    
    body{
        padding-bottom: calc(78px + env(safe-area-inset-bottom));
        padding-top: 60px;
    }
    
    .menu-avatar-container{
        width: 24px;
        aspect-ratio: 1/1;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
    }
    
    .menu-avatar-container img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: inline-block;
        position: relative;
    }
    
        
    .fiwork-footer .partners-awards-and-apps{
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        justify-content: flex-start;
    }
}

/* Тултип Beta */
.beta-wrapper {
    position: relative;
}

.beta-tooltip {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 280px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1000;
    font-family: var(--font-family);
}

@media(max-width: 550px){
    .fill-balance-modal-form .form-input{
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .fiwork-footer .fiwork-footer-statistics{ 
        flex-direction: column; 
        gap: 20px;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .fiwork-footer .fiwork-footer-navigation{ 
        display: inline-block;
        text-align: left;
    }
    
    .fiwork-footer .fiwork-footer-navigation a{
        display: inline-block;
        margin: 10px;
    }
    
        
    .fiwork-footer .partners-wrapper,
    .fiwork-footer .awards-wrapper{
        display: inline-block; 
        text-align: left;
    }
    
    .fiwork-footer .partners-wrapper a, 
    .fiwork-footer .awards-wrapper a{
        display: inline-block;
        margin: 10px;
    }
}

/* Стрелочка */
.beta-tooltip::before {
    content: '';
    position: absolute;
    margin-top: -8px;
    border: 8px solid transparent;
    border-right-color: #fff;
}

/* Показываем при ховере */
.beta-container:hover .beta-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Содержимое тултипа */
.beta-tooltip-header {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
}

.beta-tooltip-text {
    font-size: 13px;
    line-height: 1.4;
    color: #555;
    margin-bottom: 12px;
}

.beta-tooltip-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}


.beta-tooltip-stats span{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: 10px;
}

.beta-green-dot{
    width: 4px;
    aspect-ratio: 1/1;
}

.beta-blue-dot{
    width: 4px;
    aspect-ratio: 1/1;
}

.social-sites-enter-links .social-icon {
    color: #cecece; /* серый */
    transition: color .15s ease, transform .15s ease;
}

.social-sites-enter-links .social-vk:hover .social-icon {
    color: #3475F6;
}

.social-sites-enter-links .social-yandex:hover .social-icon {
    color: #E66A53;
}

.social-sites-enter-links .social-telegram:hover .social-icon {
    color: #55A4DF;
}

/*---------------------------------------
    ## Back Top
---------------------------------------*/
.back-to-top {
  position: fixed;
  right: 30px;
  bottom: 80px;
  width: 40px;
  height: 40px;
  background-color: var(--main-color-one);
  color: #fff;
  text-align: center;
  line-height: 40px;
  border-radius: 50px;
  z-index: 99;
  font-size: 20px;
  cursor: pointer;
  -webkit-box-shadow: none;
  box-shadow: none;
  display: none;
}

@media only screen and (max-width: 767px) {
  .back-to-top {
    display: none !important;
  }
}

.back-to-top.bg-color-two {
  background: var(--secondary-color);
}

.back-to-top.bg-color-three {
  background: var(--main-color-three);
}

.back-to-top.bg-color-four {
  background: var(--main-color-four);
}

.back-to-top.bg-color-five {
  background: var(--main-color-five);
}

.project-title-link {
  color: inherit;
  text-decoration: none;
}

/*-------------------------

/* Мобильная версия — тултип чуть ниже, чтобы не перекрывал пальцем */
@media (max-width: 768px) {
    .beta-container{
        display: none;
    }
}

@media (max-width: 1400px){
    .beta-tooltip {
        position: absolute;
        left: 0;
        transform: translateX(0);
    }
}

@media (max-width: 1200px){
    .user-header .user-header-nav{
        gap: 20px;
    }
}

/*---------------------------------------
    ## Auth Modals
---------------------------------------*/
.overlayGray{
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    z-index: 183;
    background: linear-gradient(to bottom, rgba(36, 36, 36, 0.1), rgba(36, 36, 36, 0.2));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.overlayGray.active{
    opacity: 1;
    pointer-events: all;
}

.overlayGray .hidden{
    display: none !important;
}

.fiwork-auth-captcha-note{
    margin-top: 10px;
    color: #818c99;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fiwork-auth-captcha-note a{
    color: #367fee;
    text-decoration: none;
}

.fiwork-auth-captcha-note a:hover{
    text-decoration: underline;
}

.fiwork-auth-captcha-note--page{
    width: 100%;
    text-align: left;
}

body.fiwork-auth-modal-open{
    overflow: hidden;
}

.overlayGray .modal{
    opacity: 0;
    pointer-events: none;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 18px 48px rgba(17, 24, 39, 0.16);
    position: fixed;
    max-width: 480px;
    width: calc(100% - 32px);
    font-family: var(--font-family);
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.98);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.overlayGray .modal.active{
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);
}

.overlayGray .modal__close{
    position: absolute;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 15px;
    right: 15px;
    cursor: pointer;
    background-color: rgba(129, 140, 153, 0.1);
    border: 0;
    z-index: 3;
}

.overlayGray .closeSvg{
    transition: transform 0.3s;
}

.overlayGray .modal__close:hover .closeSvg{
    transform: rotate(90deg);
}

.overlayGray .modal__login{
    display: flex;
    flex-direction: column;
}

.overlayGray .modal__box{
    padding: 36px;
}

.overlayGray .modal__form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.overlayGray .modal__form-title{
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 20px;
    font-family: var(--third-family);
    color: #0f172a;
}

.overlayGray .modal__form-subTitle{
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 27px;
    color: #475467;
}

.overlayGray .modal__form-input{
    width: 100%;
    background-color: #f2f1f0;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #0a0614;
    margin-bottom: 12px;
    font-family: var(--third-family);
    outline: none;
}

.overlayGray .modal__form-input::placeholder{
    color: #757575;
}

.overlayGray .modal__form-input:focus{
    border-color: #4c8bf5;
    background: #fff;
}

.overlayGray .fiwork-auth-password-field{
    position: relative;
    width: 100%;
}

.overlayGray .fiwork-auth-password-field .modal__form-input{
    margin-bottom: 0;
    padding-right: 48px;
}

.overlayGray .fiwork-auth-password-toggle{
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.overlayGray .fiwork-auth-password-icon{
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.overlayGray .modal__form-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 12px;
    margin-top: 14px;
}

.overlayGray .modal__form-checkbox{
    cursor: pointer;
    width: 18px;
    height: 18px;
    margin: 0;
}

.overlayGray .checkbox__box{
    display: flex;
    gap: 10px;
    align-items: center;
}

.overlayGray .checkbox__box label{
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.overlayGray .modal__login-forgot{
    font-size: 15px;
    font-weight: 500;
    color: #2196f3;
    transition: color 0.3s;
    text-decoration: none;
}

.overlayGray .modal__login-forgot:hover{
    color: #000;
}

.overlayGray .modal__blue-btn{
    background-color: #2196f3;
    outline: none;
    border: none;
    color: #fff;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 26px;
    border-radius: 6px;
    cursor: pointer;
    min-width: 136px;
}

.overlayGray .modal__blue-btn:hover{
    background-color: #048af8;
    border-color: rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.overlayGray .modal__blue-btn:disabled,
.overlayGray .skip-btn:disabled,
.overlayGray .start-btn:disabled{
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.overlayGray .bottomBox{
    background-color: #f2efe9;
}

.overlayGray .bottomBox__title{
    font-size: 15px;
    font-weight: 500;
    color: #0f172a;
}

.overlayGray .bottomBox__social{
    display: flex;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.overlayGray .bottomBox__social-item{
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: 0;
    padding: 0;
}

.overlayGray .bottomBox__social-item img{
    transition: transform 0.3s;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.overlayGray .bottomBox__social-item:hover img{
    transform: scale(1.1);
}

.overlayGray .bottomBox__social-item.is-disabled{
    opacity: 0.55;
    cursor: default;
}

.overlayGray .bottomBox__social-item.is-disabled:hover img{
    transform: none;
}

.overlayGray .btnBox{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.overlayGray .modal__login-regBtn{
    background-color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 10px 16px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    margin: 12px 0;
    transition: all 0.25s ease;
}

.overlayGray .modal__login-regBtn:hover{
    background-color: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.overlayGray .modal__privacy{
    width: 100%;
    color: #999999;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
    transition: color 0.3s;
    text-decoration: none;
}

.overlayGray .modal__privacy:hover{
    color: #3e3e3e;
}

.overlayGray .modal__privacy a{
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.overlayGray .modal__privacy a:hover{
    color: #3e3e3e;
    text-decoration: none;
}

.overlayGray .fiwork-auth-terms{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 6px;
    color: #344054;
    font-size: 13px;
    line-height: 1.5;
}

.overlayGray .fiwork-auth-terms input{
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex-shrink: 0;
}

.overlayGray .fiwork-auth-terms a{
    color: #2196f3;
    text-decoration: none;
}

.overlayGray .fiwork-auth-inline-message,
.overlayGray .fiwork-auth-message-block{
    width: 100%;
}

.overlayGray .fiwork-auth-inline-message{
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 91, 91, 0.08);
    color: #c62828;
    font-size: 13px;
    line-height: 1.5;
}

.overlayGray .fiwork-auth-inline-message.fiwork-reserved-name-warning,
.fiwork-reserved-name-warning{
    font-family: 'Inter', var(--font-family, Arial, sans-serif);
    background: #fff7f7;
    border: 1px solid #ef4444;
    border-left: 4px solid #ef4444;
    border-radius: 10px;
    color: #b91c1c;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 8px 22px rgba(239, 68, 68, 0.08);
}

.overlayGray .fiwork-auth-message-block{
    margin-top: 14px;
}

.overlayGray .fiwork-auth-message-block .form-message.error{
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 91, 91, 0.08);
    color: #c62828;
    font-size: 13px;
    line-height: 1.5;
}

.overlayGray .fiwork-email-verify-modal .modal__form-subTitle{
    overflow-wrap: anywhere;
}

.overlayGray .fiwork-email-code-field{
    display: flex;
    justify-content: center;
    width: 100%;
}

.overlayGray .fiwork-email-code-field .modal__form-input{
    width: 210px;
    max-width: 100%;
    margin: 0 auto 12px;
    border: 2px solid #d8dee8;
    background: #f8fafc;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .38em;
    text-align: center;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.overlayGray .fiwork-email-code-field .modal__form-input::placeholder{
    color: #98a2b3;
    letter-spacing: .18em;
    opacity: 1;
}

.overlayGray .fiwork-email-code-field.is-checking .modal__form-input{
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, .12);
}

.overlayGray .fiwork-email-code-field.is-valid .modal__form-input{
    border-color: #22a447 !important;
    background: #f0fbf3 !important;
    color: #16823a !important;
    box-shadow: 0 0 0 4px rgba(34, 164, 71, .12);
}

.overlayGray .fiwork-email-code-field.is-invalid .modal__form-input{
    border-color: #e5484d !important;
    background: #fff5f5 !important;
    color: #c62f35 !important;
    box-shadow: 0 0 0 4px rgba(229, 72, 77, .1);
}

.overlayGray .fiwork-auth-inline-message.is-success{
    border: 1px solid rgba(22, 163, 74, .22);
    background: rgba(22, 163, 74, .08);
    color: #15803d;
}

.overlayGray .fiwork-email-resend-btn{
    align-self: center;
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2196f3;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.overlayGray .fiwork-email-resend-btn:hover{
    color: #0478d4;
}

.overlayGray .fiwork-email-resend-btn:disabled{
    color: #98a2b3;
    cursor: wait;
}

.overlayGray .role-select{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
    width: 100%;
}

.overlayGray .role-radio{
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(50%);
}

.overlayGray .role-card{
    min-width: 0;
    min-height: 72px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e1e5ea;
    border-radius: 13px;
    cursor: pointer;
    background: #f8f9fb;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
    position: relative;
}

.overlayGray .role-circle{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid #cfcfcf;
    border-radius: 50%;
    display: block;
    margin: 0;
    position: relative;
    background: #fff;
}

.overlayGray .role-content{
    min-width: 0;
    display: grid;
    gap: 3px;
}

.overlayGray .role-title{
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    color: #0a0614;
    font-family: var(--font4);
    line-height: 1.25;
}

.overlayGray .role-subtitle{
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    color: #7b7b7b;
    line-height: 1.35;
    font-family: var(--font5);
}

.overlayGray .role-radio:checked + .role-card{
    border-color: #9bc9f3;
    background: #f1f7fd;
    box-shadow: 0 0 0 1px rgba(76, 139, 245, .05);
}

.overlayGray .role-radio:checked + .role-card .role-circle{
    border-color: #4c8bf5;
}

.overlayGray .role-radio:checked + .role-card .role-circle::after{
    content: "";
    width: 8px;
    height: 8px;
    background: #4c8bf5;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
}

.overlayGray .role-radio:focus-visible + .role-card{
    outline: 3px solid rgba(76, 139, 245, .16);
    outline-offset: 2px;
}

.overlayGray .role-card:hover{
    border-color: #b8c6d5;
    background: #f5f7f9;
}

.overlayGray .profile-setup{
    width: 100%;
    max-width: 380px;
    margin: 32px auto 0;
}

.overlayGray .avatar-box{
    position: relative;
    width: fit-content;
    margin: 0 auto 30px;
    display: block;
    cursor: pointer;
}

.overlayGray .avatar-file-input{
    display: none;
}

.overlayGray .avatar{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #dc6f77;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    font-weight: bold;
    color: white;
    overflow: hidden;
}

.overlayGray .avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.overlayGray .avatar-upload-box{
    position: absolute;
    right: -17px;
    bottom: -17px;
    padding: 12px;
    border-radius: 50%;
    background-color: #fff;
}

.overlayGray .avatar-upload{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.overlayGray .avatar-upload img{
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.overlayGray .avatar-upload .avatar-upload-icon{
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
}

.user-header--modern{
    width: 100%;
    justify-content: flex-end;
}

.user-header--modern .header__user-block{
    display: flex;
    align-items: center;
    gap: 22px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.user-header--modern .header__user-menu{
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.user-header--modern .header__user-menu-item{
    margin: 0;
    padding: 0;
}

.user-header--modern .header__user-menu-link{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 56px;
    color: #62646a;
    text-decoration: none;
    transition: color 0.3s ease;
}

.user-header--modern .header__user-menu-link span{
    font-size: 13px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
}

.user-header--modern .header__user-icon{
    display: block;
}

.user-header--modern .header__user-menu-link .fiwork-header-order-icon-wrap{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.user-header--modern .header__user-menu-link .fiwork-header-orders-count,
.user-header--modern .header__user-menu-link .fiwork-header-count-badge,
.user-header--modern .header__user-menu-link .fiwork-header-action-count{
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #007bfb;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}

.user-header--modern .header__user-path{
    transition: fill 0.3s ease;
}

.user-header--modern .header__user-menu-link:hover{
    color: #177de5;
}

.user-header--modern .header__user-menu-link:hover .header__user-path{
    fill: #177de5;
}

.user-header--modern .message-count{
    position: relative;
}

.user-header--modern .count{
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    min-width: 14px;
    padding: 0 3px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.user-header--modern .newMessage .count{
    display: block;
}

.user-header--modern .newMessage .messageLine{
    display: none;
}

.user-header--modern .newMessage .header__user-path{
    fill: #ff4d4f;
}

.user-header--modern .header__user-notification{
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-header--modern .header__user-notification .navbar-right-item{
    margin: 0;
}

.user-header--modern .header__user-notification .navbar-right-notification{
    position: relative;
}

.user-header--modern .header__user-notification .notification{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.user-header--modern .fiwork-header-notification-trigger{
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    color: #263442;
    background: #f3f6f9;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

.user-header--modern .fiwork-header-notification-trigger .header__user-icon{
    width: 21px;
    height: 21px;
    color: inherit;
    transform: none;
}

.user-header--modern .header__user-notification .notification-list-container{
    position: absolute;
    top: calc(100% + 10px);
    right: -12px;
    left: auto;
    width: 350px;
    max-width: min(350px, calc(100vw - 32px));
    z-index: 1060;
    display: block;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.user-header--modern .header__user-notification .notification-list{
    display: block;
    background: #fff;
    padding: 8px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .14), 0 2px 10px rgba(15, 23, 42, .06);
}

.user-header--modern .header__user-notification .notification::after{
    position: absolute;
    right: 0;
    bottom: -12px;
    left: 0;
    height: 18px;
    content: "";
}

.user-header--modern .header__user-notification .notification:hover .notification-list-container,
.user-header--modern .header__user-notification .notification:focus-within .notification-list-container{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.user-header--modern .header__user-notification .notification-list__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 4px 6px 8px 10px;
    border-bottom: 1px solid #edf0f3;
}

.user-header--modern .header__user-notification .notification-list__heading{
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.user-header--modern .header__user-notification .notification-list__heading strong{
    color: #111827;
    font-family: Inter, "Open Sans", Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}

.user-header--modern .header__user-notification .notification-list__heading > span{
    min-width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    color: #fff;
    background: #0277ff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.user-header--modern .header__user-notification .notification-list__clear{
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    color: #667085;
    background: transparent;
    font-family: Inter, "Open Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease;
}

.user-header--modern .header__user-notification .notification-list__clear svg{
    width: 15px;
    height: 15px;
}

.user-header--modern .header__user-notification .notification-list__clear:hover,
.user-header--modern .header__user-notification .notification-list__clear:focus-visible{
    color: #0277ff;
    background: #eef6ff;
    outline: none;
}

.user-header--modern .header__user-notification .notification-list__clear:focus-visible{
    box-shadow: 0 0 0 2px rgba(2, 119, 255, .2);
}

.user-header--modern .header__user-notification .notification-list__clear.is-loading{
    opacity: .55;
    cursor: wait;
}

.user-header--modern .header__user-notification .notification-list__clear[hidden]{
    display: none;
}

.user-header--modern .header__user-notification .notification-list__body{
    max-height: min(376px, calc(100vh - 170px));
    padding-top: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c9ced6 transparent;
    -webkit-overflow-scrolling: touch;
}

.user-header--modern .header__user-notification .notification-list__body::-webkit-scrollbar{
    width: 6px;
}

.user-header--modern .header__user-notification .notification-list__body::-webkit-scrollbar-thumb{
    border-radius: 999px;
    background: #c9ced6;
}

.user-header--modern .header__user-notification .notification-list-elem{
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 16px;
    gap: 10px;
    align-items: center;
    min-height: 62px;
    padding: 9px 8px;
    color: #151515;
    text-decoration: none;
    border: 0;
    border-radius: 12px;
    transition: color 140ms ease, background-color 140ms ease;
}

.user-header--modern .header__user-notification .notification-list-elem + .notification-list-elem{
    margin-top: 2px;
}

.user-header--modern .header__user-notification .notification-list-elem span{
    display: block;
}

.user-header--modern .header__user-notification .notification-list-elem__icon{
    width: 36px;
    height: 36px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #2688ed;
    background: #edf6ff;
}

.user-header--modern .header__user-notification .notification-list-elem__icon svg{
    width: 18px;
    height: 18px;
}

.user-header--modern .header__user-notification .notification-list-elem__content{
    min-width: 0;
}

.user-header--modern .header__user-notification .notification-list-elem__text{
    display: -webkit-box !important;
    overflow: hidden;
    color: #273142;
    font-family: Inter, "Open Sans", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 17px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.user-header--modern .header__user-notification .notification-list-elem .notification-time{
    margin-top: 3px;
    color: #8b93a1;
    font-family: Inter, "Open Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
}

.user-header--modern .header__user-notification .notification-list-elem__chevron{
    width: 16px;
    height: 16px;
    color: #a3aab4;
    transition: color 140ms ease, transform 140ms ease;
}

.user-header--modern .header__user-notification .notification-list-elem.active{
    background: transparent;
}

.user-header--modern .header__user-notification .notification-list-elem:hover,
.user-header--modern .header__user-notification .notification-list-elem:focus-visible{
    color: #151515;
    background: #f5f8ff;
    outline: none;
}

.user-header--modern .header__user-notification .notification-list-elem:hover
    .notification-list-elem__chevron,
.user-header--modern .header__user-notification .notification-list-elem:focus-visible
    .notification-list-elem__chevron{
    color: #2688ed;
    transform: translateX(2px);
}

.user-header--modern .header__user-notification .notification-list__empty{
    min-height: 146px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 16px;
    text-align: center;
}

.user-header--modern .header__user-notification .notification-list__empty[hidden]{
    display: none;
}

.user-header--modern .header__user-notification .notification-list__empty-icon{
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border-radius: 12px;
    color: #7b8794;
    background: #f1f4f7;
}

.user-header--modern .header__user-notification .notification-list__empty-icon svg{
    width: 19px;
    height: 19px;
}

.user-header--modern .header__user-notification .notification-list__empty strong{
    color: #273142;
    font-size: 13px;
    font-weight: 700;
}

.user-header--modern .header__user-notification .notification-list__empty > span:last-child{
    margin-top: 3px;
    color: #8b93a1;
    font-size: 12px;
}

.user-header--modern .header__user-balance{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.user-header--modern button.header__user-balance{
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.user-header--modern button.header__user-balance:focus-visible{
    outline: 2px solid rgba(1, 119, 255, .32);
    outline-offset: 2px;
}

.user-header--modern .header__user-summ{
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
}

.user-header--modern .header__user-replenish{
    width: 30px;
    height: 30px;
    display: inline-grid;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 50%;
    color: #0055bb;
    background: transparent;
    text-decoration: none;
    pointer-events: none;
}

.user-header--modern .header__user-replenish svg{
    width: 23px;
    height: 23px;
    display: block;
}

.user-header--modern .header__user-logo{
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    position: relative;
    z-index: 10;
    padding-bottom: 12px;
    margin-bottom: -12px;
}

.user-header--modern .header__user-dropdown{
    position: relative;
    display: flex;
    align-items: center;
}

.user-header--modern .header__user-logo .user-header-avatar-link{
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    text-decoration: none;
}

.user-header--modern .header__user-img{
    width: 38px;
    min-width: 38px;
    height: 38px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.user-header--modern .header__user-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-header--modern .header__user-logo .header__user-icon{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: #7b8794;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    will-change: transform;
    transition: color .22s ease, transform .32s cubic-bezier(.22, .61, .36, 1);
}

.user-header--modern .header__user-dropdown.is-menu-open .header__user-logo .header__user-icon,
.user-header--modern .header__user-dropdown:hover .header__user-logo .header__user-icon,
.user-header--modern .header__user-dropdown:focus-within .header__user-logo .header__user-icon{
    color: #0188ff;
    transform: rotate(180deg);
}

.user-header--modern .user-header-menu-container{
    top: calc(100% + 2px);
    right: 0;
    padding-top: 0;
    z-index: 120;
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transform-origin: top right;
    will-change: opacity, transform;
    backface-visibility: hidden;
    transition:
        opacity .14s cubic-bezier(.2, .75, .3, 1),
        transform .14s cubic-bezier(.2, .75, .3, 1),
        visibility 0s linear;
}

.user-header--modern .user-header-menu-container.hidden{
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 4px, 0);
    transition-delay: 0s, 0s, .14s;
}

.user-header--modern .header__user-dropdown:hover .user-header-menu-container.hidden,
.user-header--modern .header__user-dropdown:focus-within .user-header-menu-container.hidden,
.user-header--modern .header__user-dropdown.is-menu-open .user-header-menu-container.hidden{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}

.user-header--modern .user-header-menu{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: translateZ(0);
}

.user-header--modern .user__list{
    position: static;
    display: block;
    padding-top: 0;
    pointer-events: auto;
}

.user-header--modern .user__list-hide{
    overflow: visible;
}

.user-header--modern .user__list-box{
    width: 280px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid #dedfe4;
    background: #fff;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

.user-header--modern .premium-container{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 5px 8px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #3f4041;
    background: #f1f7fd;
}

.user-header--modern .premium-container .blue-diamond{
    display: block;
}

.user-header--modern .premium-container .grey-diamond{
    display: none;
}

.user-header--modern .user-name{
    margin-bottom: 6px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: #121317;
}

.user-header--modern .user-username{
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: #73798c;
    cursor: pointer;
}

.user-header--modern .user-username img{
    width: 14px;
}

.user-header--modern .user__list-roles{
    display: flex;
    gap: 5px;
    margin-bottom: 12px;
    padding: 3px;
    border: 1px solid #dedfe4;
    border-radius: 10px;
}

.user-header--modern .user__list-role{
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    color: #121317;
    background: transparent;
    box-shadow: inset 0 0 0 1px transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.user-header--modern .user__list-role.selected{
    background: #0177ff;
    color: #fff;
    box-shadow: inset 0 0 0 1px #0177ff;
    text-decoration: none;
}

.user-header--modern .user__list-role:not(.selected):hover,
.user-header--modern .user__list-role:not(.selected):focus-visible{
    color: #0177ff;
    background: transparent;
    box-shadow: inset 0 0 0 1px #0177ff;
    text-decoration: none;
}

.user-header--modern .user__list-role:focus-visible{
    outline: none;
}

.user-header--modern .user__list-checkbox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px 12px;
    margin-bottom: 10px;
}

.user-header--modern .user__list-checkbox > span{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    color: #2a2d33;
}

.user-header--modern .user__list-checkbox .receive-order-text{
    display: none;
}

.user-header--modern .user__list-checkbox .receive-order-text.active{
    display: inline-block;
}

.user-header--modern .user__list-checkbox .switch{
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 42px;
    min-width: 42px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.user-header--modern .user__list-checkbox .switch input{
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.user-header--modern .user__list-checkbox .slider{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #d7dce5;
    border: 1px solid #d0d6e2;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.08);
    transition: background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.user-header--modern .user__list-checkbox .slider::before{
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.18);
    transition: transform 0.2s ease;
}

.user-header--modern .user__list-checkbox .switch input:checked + .slider{
    background: #23c366;
    border-color: #23c366;
}

.user-header--modern .user__list-checkbox .switch input:checked + .slider::before{
    transform: translateX(18px);
}

.user-header--modern .user__list-checkbox .switch input:focus-visible + .slider{
    box-shadow: 0 0 0 3px rgba(1, 119, 255, 0.16), inset 0 1px 2px rgba(17, 24, 39, 0.08);
}

.user-header--modern .underlineBorder{
    border-bottom: 1px solid #dedfe4;
}

.user-header--modern .user__list-items{
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-header--modern .user__list-item{
    padding: 0;
    margin: 0;
}

.user-header--modern .user__list-link{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    color: #121317;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.user-header--modern .user__list-link:hover{
    background: #f3f6f8;
    color: #0177ff;
}

.user-header--modern .exit{
    display: block;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #121317;
    font-size: 14px;
    font-weight: 600;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.user-header--modern .exit:hover{
    background: #f3f6f8;
    color: #0177ff;
}

.fiwork-status-modal-overlay{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 24, 39, 0.48);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.fiwork-status-modal-overlay.hidden{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.fiwork-status-modal-overlay .fiwork-status-modal{
    width: 100%;
    max-width: 560px;
    padding: 28px 24px 24px;
    text-align: left;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.fiwork-status-modal-overlay.hidden .fiwork-status-modal{
    opacity: 0;
    transform: translateY(18px);
}

.fiwork-status-modal-overlay .project-import-modal-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.fiwork-status-modal-overlay .project-import-modal-header h3{
    margin: 0;
    max-width: 420px;
    font-family: var(--font6);
    font-weight: 600;
    font-size: 24px;
    line-height: 133%;
    color: #111827;
}

.fiwork-status-modal-overlay .project-import-modal-close{
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    flex-shrink: 0;
}

.fiwork-status-modal-overlay .project-import-modal-close:hover{
    background: #f3f4f6;
    color: #111827;
}

.fiwork-status-modal-overlay .project-import-modal-subtitle{
    margin: 0 0 20px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 157%;
    color: #6b7280;
}

.fiwork-status-modal-overlay .delete-modal-buttons{
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.fiwork-status-modal-overlay .delete-modal-buttons button{
    flex: 1;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: var(--font6);
    font-weight: 600;
    font-size: 14px;
    line-height: 143%;
    cursor: pointer;
}

.fiwork-status-modal-overlay .cancel-project-import-btn{
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
}

.fiwork-status-modal-overlay .work-availability-hide-btn{
    background: #f63d40;
    color: #fff;
}

.fiwork-status-modal-overlay .work-availability-hide-btn:disabled{
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 1400px){
    .user-header--modern .header__user-block{
        gap: 16px;
    }

    .user-header--modern .header__user-menu{
        gap: 18px;
    }
}

.overlayGray .avatar-box:hover .avatar-upload{
    background: #e8e8e8;
}

.overlayGray .profile-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.overlayGray .profile-input,
.overlayGray .profile-select{
    width: 100%;
    border-radius: 12px;
    border: 1px solid #e8ebe6;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    padding: 14px 16px;
    outline: none;
}

.overlayGray .profile-input:focus,
.overlayGray .profile-select:focus{
    border-color: #4c8bf5;
}

.overlayGray .select-wrapper{
    position: relative;
    width: 100%;
}

.overlayGray .profile-select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background: #fff;
    padding-right: 48px;
}

.overlayGray .select-wrapper::after{
    content: "›";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 28px;
    color: #999;
    pointer-events: none;
}

.overlayGray .profile-buttons{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 4px;
}

.overlayGray .skip-btn,
.overlayGray .start-btn{
    width: 100%;
    height: 45px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.overlayGray .skip-btn{
    background: #eceef5;
    color: #222;
}

.overlayGray .start-btn{
    background: #2196f3;
    color: white;
}

.overlayGray .skip-btn:hover{
    background: #d7dbec;
    border-color: rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.overlayGray .start-btn:hover,
.overlayGray .changepass-saccess-btn:hover{
    background-color: #048af8;
    border-color: rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.overlayGray .changepass-saccess{
    text-align: center;
}

.overlayGray .changepass-saccess-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #2196f3;
    outline: none;
    border: none;
    color: #fff;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
    border-radius: 6px;
    cursor: pointer;
    min-width: 136px;
}

@media (max-width: 767px){
    .fiwork-wallet-withdraw-modal{
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .fiwork-wallet-withdraw-modal .modal-dialog{
        width: 100%;
        max-width: 100%;
        min-height: 0;
        margin: 0;
    }

    .fiwork-wallet-withdraw-modal .fill-balance-modal-block-container{
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -18px 48px rgba(17, 24, 39, 0.14);
    }

    .fiwork-balance-modal.show{
        display: flex !important;
        align-items: flex-end;
        padding: 0 !important;
    }

    .fiwork-balance-modal .modal-dialog{
        width: 100%;
        max-width: 100% !important;
        min-height: 0;
        margin: 0;
        align-items: flex-end;
        transform: translateY(24px) !important;
    }

    .fiwork-balance-modal.show .modal-dialog{
        transform: translateY(0) !important;
    }

    .fiwork-balance-modal .modal-content,
    .fiwork-balance-modal form{
        width: 100%;
    }

    .fiw-modal{
        align-items: flex-end;
        padding: 0;
    }

    .fiw-modal__dialog{
        max-width: 100%;
        max-height: 100dvh;
        width: 100%;
        transform: translateY(24px);
    }

    .fiw-modal.is-open .fiw-modal__dialog{
        transform: translateY(0);
    }

    .fill-balance-modal-block-container{
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -18px 48px rgba(17, 24, 39, 0.14);
    }

    .fill-balance-modal-block{
        max-width: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }

    .fill-balance-modal-block-content{
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
        padding: 0 20px max(28px, env(safe-area-inset-bottom));
    }

    .fill-balance-modal-block-header{
        min-height: 72px;
        padding: 28px 52px 16px;
    }

    .fill-balance-modal-block-header h3{
        font-size: 24px;
    }

    .fill-balance-modal-block-header .close-modal-grey-icon{
        top: 15px;
        right: 15px;
    }

    .overlayGray{
        align-items: flex-end;
    }

    .overlayGray .modal{
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        top: auto;
        left: 0;
        bottom: 0;
        transform: translateY(24px);
    }

    .overlayGray .modal.active{
        transform: translateY(0);
    }

    .overlayGray .modal__box{
        padding: 28px 20px;
    }

    .overlayGray .modal__form-title{
        font-size: 24px;
        margin-bottom: 16px;
    }

    .overlayGray .role-select{
        grid-template-columns: 1fr;
    }

    .overlayGray .modal__form-box{
        flex-direction: column;
        align-items: flex-start;
    }

    .overlayGray .profile-setup{
        margin-top: 20px;
    }

    .overlayGray .avatar{
        width: 132px;
        height: 132px;
        font-size: 54px;
    }

    .overlayGray .avatar-upload{
        width: 46px;
        height: 46px;
    }

    .overlayGray .profile-buttons{
        flex-direction: column;
    }

    .overlayGray .skip-btn,
    .overlayGray .start-btn{
        font-size: 16px;
        height: 52px;
    }
}
.fiwork-order-chat-files{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
}

.fiwork-order-chat-files.hidden{
    display:none;
}

.fiwork-order-chat-files-label{
    font-family:var(--font-family);
    font-size:13px;
    line-height:1.4;
    color:#6b7280;
}

.fiwork-order-chat-files-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.fiwork-order-chat-file-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    max-width:100%;
    padding:8px 12px;
    border-radius:999px;
    background:#eef4ff;
    color:#1849a9;
    font-family:var(--font-family);
    font-size:13px;
    line-height:1.3;
    word-break:break-word;
}

.fiwork-order-chat-file-pill-size{
    color:#667085;
    white-space:nowrap;
}

.fiwork-order-chat-file-message{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
}

.fiwork-order-chat-file-message.is-document .fiwork-order-chat-file-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border:1px solid #e4e7ec;
    border-radius:14px;
    background:#f8fafc;
    text-decoration:none;
}

.fiwork-order-chat-file-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:50px;
    height:40px;
    padding:0 10px;
    border-radius:10px;
    background:#dbeafe;
    color:#1d4ed8;
    font-family:var(--font-family);
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
}

.fiwork-order-chat-file-copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.fiwork-order-chat-file-name{
    font-family:var(--font-family);
    font-size:14px;
    line-height:1.4;
    color:#101828;
    text-decoration:none;
    word-break:break-word;
}

.fiwork-order-chat-file-size{
    font-family:var(--font-family);
    font-size:12px;
    line-height:1.4;
    color:#667085;
}

.fiwork-order-chat-file-image-link{
    display:block;
    text-decoration:none;
}

.fiwork-order-chat-file-image{
    display:block;
    width:min(280px, 100%);
    max-width:100%;
    height:auto;
    border-radius:14px;
    border:1px solid #e4e7ec;
    background:#f8fafc;
}

.fiwork-order-chat-video-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-width:min(340px, 100%);
}

.fiwork-order-chat-video{
    display:block;
    width:100%;
    max-height:260px;
    border-radius:14px;
    border:1px solid #e4e7ec;
    background:#101828;
}

.fiwork-order-chat-video-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    max-width:100%;
    color:#101828;
    font-family:var(--font-family);
    font-size:14px;
    line-height:1.4;
    text-decoration:none;
    overflow-wrap:anywhere;
}

.fiwork-order-chat-video-link:hover{
    color:#0f66bf;
}

.fiwork-order-chat-video-link span{
    flex:0 0 auto;
    color:#667085;
    font-size:12px;
}

.fiwork-order-chat-file-meta{
    display:flex;
    flex-direction:column;
    gap:4px;
}

/* Category marketplace: shared by every root route under /categories/{slug}. */
.fi-category-hub,
.fi-category-hub *{
    box-sizing:border-box;
}

body.fiwork-page-category-hub .main-block{
    box-sizing:border-box;
    align-items:flex-start;
    padding:0;
    background:var(--fiwork-page-background, #f5f7fa);
    overflow:visible;
}

body.fiwork-page-category-hub .main-container{
    align-items:stretch;
    justify-content:flex-start;
    width:100%;
    max-width:1276px;
    margin:0;
    padding:0;
    overflow:visible;
    background:transparent;
}

.fi-category-hub{
    --category-app-surface:#fff;
    --category-app-border:rgba(17, 24, 39, .07);
    --category-app-divider:#edf0f3;
    width:100%;
    padding:24px 0 60px;
    color:#152033;
    background:transparent;
    font-family:var(--font-family), Inter, Arial, sans-serif;
}

.fi-category-hub__inner{
    width:100%;
    margin:0 auto;
}

.fi-category-hub__layout{
    display:grid;
    grid-template-columns:288px minmax(0, 1fr);
    align-items:start;
    gap:24px;
}

.fi-category-hub__content{
    min-width:0;
}

.fi-category-hub-list{
    align-self:start;
    position:sticky;
    top:18px;
    height:fit-content;
    min-width:0;
    overflow:hidden;
    border:1px solid var(--category-app-border);
    border-radius:28px;
    background:var(--category-app-surface);
    box-shadow:none;
}

.fi-category-hub-list__head{
    display:flex;
    align-items:center;
    min-height:54px;
    padding:17px 20px;
    border-bottom:1px solid var(--category-app-divider);
}

.fi-category-hub-list__head strong{
    color:#172033;
    font-size:15px;
    font-weight:650;
    line-height:20px;
}

.fi-category-hub-list__nav{
    display:block;
    padding:6px 20px 19px;
}

.fi-category-hub-list__group{
    padding:12px 0 11px;
}

.fi-category-hub-list__group + .fi-category-hub-list__group{
    border-top:1px solid var(--category-app-divider);
}

.fi-category-hub-list__subtitle,
.fi-category-hub-list__link{
    display:flex;
    align-items:flex-start;
    gap:6px;
    width:100%;
    min-width:0;
    color:#627187;
    text-decoration:none;
    overflow-wrap:anywhere;
    transition:color .15s ease;
}

.fi-category-hub-list__subtitle{
    padding:2px 0 6px;
    color:#354157;
    font-size:14px;
    font-weight:600;
    line-height:19px;
}

.fi-category-hub-list__links{
    display:flex;
    flex-direction:column;
    gap:1px;
}

.fi-category-hub-list__link{
    padding:3px 0;
    font-size:13px;
    font-weight:400;
    line-height:18px;
}

.fi-category-hub-list__subtitle > span:first-child,
.fi-category-hub-list__link > span:first-child{
    min-width:0;
}

.fi-category-hub-list__subtitle:hover,
.fi-category-hub-list__subtitle:focus-visible,
.fi-category-hub-list__link:hover,
.fi-category-hub-list__link:focus-visible{
    color:#1584e8;
    outline:0;
}

.fi-category-hub-list :is(.submenu-item__wrap-mark, .submenu-item__popular){
    flex:0 0 auto;
}

.fi-category-directory{
    min-width:0;
    padding:28px 30px 34px;
    border:1px solid var(--category-app-border);
    border-radius:28px;
    background:var(--category-app-surface);
    box-shadow:none;
}



.fi-category-popular__header{
    display:block;
    margin-bottom:18px;
    text-align:left;
}

.fi-category-popular__header h2{
    margin:0;
    color:#172033;
    font-size:22px;
    font-weight:700;
    line-height:29px;
    letter-spacing:-.02em;
}

.fi-category-popular__header p{
    margin:4px 0 0;
    color:#748298;
    font-size:13px;
    font-weight:400;
    line-height:19px;
}

.fi-category-popular__grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}

.fi-category-popular__card{
    position:relative;
    isolation:isolate;
    min-width:0;
    min-height:208px;
    display:block;
    overflow:hidden;
    padding:20px;
    border:0;
    border-radius:18px;
    color:#172033;
    text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease;
}

.fi-category-popular__card--1{
    background:linear-gradient(135deg, #edf5ff 0%, #e2efff 100%);
}

.fi-category-popular__card--2{
    background:linear-gradient(135deg, #f2f3ff 0%, #fcecf5 100%);
}

.fi-category-popular__card--3{
    background:linear-gradient(135deg, #edf7ff 0%, #eaf9f1 100%);
}

.fi-category-popular__card--4{
    background:linear-gradient(135deg, #fff5e9 0%, #f5efff 100%);
}

.fi-category-popular__card--5{
    background:linear-gradient(135deg, #edf9f6 0%, #e8f3ff 100%);
}

.fi-category-popular__card--6{
    background:linear-gradient(135deg, #f3f0ff 0%, #eef7ff 100%);
}

.fi-category-popular__card:hover,
.fi-category-popular__card:focus-visible{
    color:#172033;
    outline:0;
    box-shadow:0 10px 24px rgba(27, 70, 111, .075);
    transform:translateY(-2px);
}

.fi-category-popular__card-copy{
    position:relative;
    z-index:2;
    width:min(100%, 175px);
    display:flex;
    flex-direction:column;
}

.fi-category-popular__card-copy strong{
    color:inherit;
    font-size:17px;
    font-weight:650;
    line-height:22px;
    overflow-wrap:anywhere;
}

.fi-category-popular__visual{
    position:absolute;
    z-index:1;
    right:-14px;
    bottom:-25px;
    width:148px;
    height:148px;
    display:block;
    pointer-events:none;
}

.fi-category-popular__visual > img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    transition:transform .22s ease;
}

.fi-category-popular__card:hover .fi-category-popular__visual > img,
.fi-category-popular__card:focus-visible .fi-category-popular__visual > img{
    transform:translate3d(-2px, -2px, 0) scale(1.025);
}

.fi-category-popular__arrow{
    position:absolute;
    z-index:3;
    right:14px;
    top:14px;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#52677f;
    background:rgba(255, 255, 255, .72);
}

.fi-category-popular__arrow svg{
    width:16px;
    height:16px;
}

.fi-category-popular__assistant{
    margin-top:18px;
}

.fi-category-popular__assistant-toggle{
    width:100%;
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:10px 12px 10px 22px;
    border:0;
    border-radius:18px;
    color:#172033;
    background:#edf2fe;
    font:650 16px/22px var(--font-family);
    text-align:left;
    transition:background-color .18s ease;
}

.fi-category-popular__assistant-toggle:hover,
.fi-category-popular__assistant-toggle:focus-visible,
.fi-category-popular__assistant-toggle[aria-expanded="true"]{
    background:#f1f7fd;
    outline:0;
}

.fi-category-popular__assistant-icon{
    width:50px;
    height:50px;
    display:grid;
    flex:0 0 50px;
    place-items:center;
    border-radius:50%;
    color:#1689ef;
    background:#e4f2ff;
    transition:transform .2s ease;
}

.fi-category-popular__assistant-toggle:hover .fi-category-popular__assistant-icon,
.fi-category-popular__assistant-toggle[aria-expanded="true"] .fi-category-popular__assistant-icon{
    transform:rotate(4deg) scale(1.04);
}

.fi-category-popular__assistant-icon .fi-category-icon{
    width:27px;
    height:27px;
}

.fi-category-popular__assistant-panel{
    padding:14px 0 0;
}

.fi-category-popular__assistant-panel[hidden]{
    display:none;
}

.fi-category-popular__ai-form{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:10px;
}

.fi-category-popular__ai-field{
    min-width:0;
    min-height:52px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 15px;
    border:1px solid #d9e2ec;
    border-radius:14px;
    color:#708197;
    background:#fff;
    transition:border-color .18s ease, box-shadow .18s ease;
}

.fi-category-popular__ai-field:focus-within{
    border-color:#78b8f2;
    box-shadow:0 0 0 3px rgba(33, 150, 243, .1);
}

.fi-category-popular__ai-field svg{
    width:21px;
    height:21px;
    flex:0 0 21px;
}

.fi-category-popular__ai-field input{
    min-width:0;
    width:100%;
    height:50px;
    padding:0;
    border:0;
    outline:0;
    color:#172033;
    background:transparent;
    font:500 14px/20px var(--font-family);
}

.fi-category-popular__ai-field input::placeholder{
    color:#8b98a9;
    opacity:1;
}

.fi-category-popular__ai-submit{
    min-width:132px;
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 19px;
    border:0;
    border-radius:14px;
    color:#fff;
    background:#1689ef;
    box-shadow:none;
    font:650 14px/20px var(--font-family);
    transition:background-color .18s ease, transform .18s ease;
}

.fi-category-popular__ai-submit:hover{
    background:#087de3;
}

.fi-category-popular__ai-submit:focus-visible{
    outline:3px solid rgba(33, 150, 243, .22);
    outline-offset:2px;
}

.fi-category-popular__ai-submit:disabled{
    cursor:progress;
    opacity:.72;
}

.fi-category-popular__ai-submit-icon{
    width:18px;
    height:18px;
    flex:0 0 18px;
}

.fi-category-popular__ai-submit .header-ai-search__loader{
    width:18px;
    height:18px;
    display:none;
    flex:0 0 18px;
    border:2px solid rgba(255, 255, 255, .42);
    border-top-color:#fff;
    border-radius:50%;
    animation:header-ai-search-spin .7s linear infinite;
}

.fi-category-popular__ai-form.is-loading .fi-category-popular__ai-submit-icon{
    display:none;
}

.fi-category-popular__ai-form.is-loading .header-ai-search__loader{
    display:block;
}

.fi-category-icon{
    display:block;
    fill:none;
    color:inherit;
}

.fi-category-tone--blue{--category-accent:#2583e9;--category-soft:#e8f3ff;}
.fi-category-tone--violet{--category-accent:#7657d6;--category-soft:#f0edff;}
.fi-category-tone--orange{--category-accent:#e87831;--category-soft:#fff0e5;}
.fi-category-tone--green{--category-accent:#1b9b68;--category-soft:#e5f7ef;}
.fi-category-tone--rose{--category-accent:#db5277;--category-soft:#ffeaf0;}
.fi-category-tone--cyan{--category-accent:#138ea6;--category-soft:#e4f7fa;}
.fi-category-tone--amber{--category-accent:#b87911;--category-soft:#fff4d8;}
.fi-category-tone--indigo{--category-accent:#5367c7;--category-soft:#eaf0ff;}

@media (max-width:1180px){
    .fi-category-hub__layout{
        grid-template-columns:264px minmax(0, 1fr);
        gap:18px;
    }

    .fi-category-popular__card{
        min-height:198px;
        padding:18px;
    }

    .fi-category-popular__visual{
        right:-20px;
        width:136px;
        height:136px;
    }
}

@media (max-width:1023px){
    body.fiwork-page-category-hub .main-block{
        padding-inline:0;
    }

    .fi-category-hub{
        padding-top:22px;
    }

    .fi-category-hub__layout{
        display:block;
    }

    .fi-category-hub-list{
        display:none;
    }

    .fi-category-directory{
        padding:26px;
    }

    .fi-category-popular__card{
        min-height:208px;
    }

    .fi-category-popular__visual{
        right:-8px;
        width:148px;
        height:148px;
    }
}

@media (max-width:767px){
    body.fiwork-page-category-hub .main-block{
        padding-inline:12px;
    }

    .fi-category-hub{
        padding:14px 0 36px;
    }

    .fi-category-directory{
        padding:20px 16px 26px;
        border-radius:22px;
    }

    .fi-category-popular__header{
        margin-bottom:15px;
    }

    .fi-category-popular__header h2{
        font-size:20px;
        line-height:27px;
    }

    .fi-category-popular__grid{
        display:flex;
        width:calc(100% + 32px);
        margin-inline:-16px;
        padding:0 16px 8px;
        gap:11px;
        overflow-x:auto;
        overflow-y:hidden;
        scrollbar-width:none;
        scroll-snap-type:x proximity;
        overscroll-behavior-inline:contain;
        -webkit-overflow-scrolling:touch;
    }

    .fi-category-popular__grid::-webkit-scrollbar{
        display:none;
    }

    .fi-category-popular__card{
        flex:0 0 235px;
        min-height:190px;
        padding:17px;
        border-radius:16px;
        scroll-snap-align:start;
    }

    .fi-category-popular__card-copy{
        width:150px;
    }

    .fi-category-popular__card-copy strong{
        font-size:15px;
        line-height:20px;
    }

    .fi-category-popular__visual{
        right:-13px;
        bottom:-23px;
        width:132px;
        height:132px;
    }

    .fi-category-popular__assistant{
        margin-top:12px;
    }

    .fi-category-popular__assistant-toggle{
        min-height:66px;
        padding-left:16px;
        border-radius:16px;
        font-size:14px;
        line-height:20px;
    }

    .fi-category-popular__assistant-icon{
        width:46px;
        height:46px;
        flex-basis:46px;
    }

    .fi-category-popular__ai-form{
        grid-template-columns:1fr;
    }

    .fi-category-popular__ai-submit{
        width:100%;
    }

}

.fiwork-suspended-page{
    min-height:calc(100vh - 220px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 16px;
    font-family:'Inter', Arial, sans-serif;
}

.fiwork-suspended-card{
    width:min(100%, 620px);
    padding:34px;
    border:1px solid #eaecf0;
    border-radius:22px;
    background:#fff;
    text-align:center;
}

.fiwork-suspended-icon{
    width:62px;
    height:62px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    border-radius:50%;
    background:#fff1f2;
    color:#e11d48;
    font-size:24px;
}

.fiwork-suspended-card h1{
    margin:0;
    color:#111827;
    font-size:30px;
    line-height:38px;
    font-weight:800;
}

.fiwork-suspended-card > p{
    max-width:500px;
    margin:12px auto 0;
    color:#667085;
    font-size:15px;
    line-height:24px;
}

.fiwork-suspended-details{
    display:grid;
    gap:12px;
    margin-top:24px;
    text-align:left;
}

.fiwork-suspended-details div{
    padding:15px;
    border:1px solid #eaecf0;
    border-radius:14px;
    background:#f8fafc;
}

.fiwork-suspended-details span,
.fiwork-suspended-details strong{
    display:block;
}

.fiwork-suspended-details span{
    color:#667085;
    font-size:12px;
    line-height:16px;
    font-weight:800;
}

.fiwork-suspended-details strong{
    margin-top:7px;
    color:#111827;
    font-size:14px;
    line-height:22px;
    font-weight:800;
    word-break:break-word;
}

.fiwork-suspended-actions{
    display:flex;
    justify-content:center;
    margin-top:24px;
}

.fiwork-suspended-actions a{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 22px;
    border-radius:12px;
    background:#23c366;
    color:#fff;
    font-size:14px;
    line-height:20px;
    font-weight:800;
    text-decoration:none;
}

@media (max-width:575px){
    .fiwork-suspended-card{
        padding:26px 18px;
        border-radius:18px;
    }

    .fiwork-suspended-card h1{
        font-size:24px;
        line-height:32px;
    }

    .fiwork-suspended-actions a{
        width:100%;
    }
}

.earn-choice-modal{
    bottom:0;
    color:#202124;
    display:none;
    font-family:var(--font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    left:0;
    position:fixed;
    right:0;
    top:0;
    z-index:2100;
}

.earn-choice-modal *,
.earn-choice-modal *::before,
.earn-choice-modal *::after{
    box-sizing:border-box;
    font-family:inherit;
}

.earn-choice-modal a,
.earn-choice-modal a:hover,
.earn-choice-modal a:focus,
.earn-choice-modal a:active,
.earn-choice-modal button,
.earn-choice-modal button:hover,
.earn-choice-modal button:focus,
.earn-choice-modal button:active{
    text-decoration:none;
}

.earn-choice-modal.is-open,
.earn-choice-modal.is-closing{
    align-items:center;
    display:flex;
    justify-content:center;
    padding:20px;
}

.earn-choice-modal.is-closing{
    pointer-events:none;
}

.earn-choice-modal-open{
    overflow:hidden;
}

.earn-choice-modal__backdrop{
    background:rgba(15, 23, 42, .56);
    bottom:0;
    left:0;
    opacity:0;
    position:absolute;
    right:0;
    top:0;
    transition:opacity .3s ease;
}

.earn-choice-modal.is-open .earn-choice-modal__backdrop{
    opacity:1;
}

.earn-choice-modal__dialog{
    background:#fff;
    border:1px solid #e3e7ec;
    border-radius:14px;
    max-width:720px;
    opacity:0;
    padding:24px;
    position:relative;
    transform:translateY(18px) scale(.98);
    transition:opacity .3s ease, transform .3s ease;
    width:min(100%, 720px);
    z-index:1;
}

.earn-choice-modal.is-open .earn-choice-modal__dialog{
    opacity:1;
    transform:translateY(0) scale(1);
}

.earn-choice-modal.is-closing .earn-choice-modal__backdrop{
    opacity:0;
}

.earn-choice-modal.is-closing .earn-choice-modal__dialog{
    opacity:0;
    transform:translateY(14px);
}

.earn-choice-modal__close{
    background:#f3f5f7;
    border:0;
    border-radius:50%;
    cursor:pointer;
    height:34px;
    position:absolute;
    right:16px;
    top:16px;
    width:34px;
}

.earn-choice-modal__close::before,
.earn-choice-modal__close::after{
    background:#667085;
    content:"";
    height:15px;
    left:16px;
    position:absolute;
    top:9px;
    width:2px;
}

.earn-choice-modal__close::before{
    transform:rotate(45deg);
}

.earn-choice-modal__close::after{
    transform:rotate(-45deg);
}

.earn-choice-modal__head{
    padding-right:42px;
}

.earn-choice-modal__kicker{
    color:#04a51c;
    display:block;
    font-size:12px;
    font-weight:900;
    letter-spacing:.03em;
    line-height:18px;
    margin-bottom:4px;
    text-transform:uppercase;
}

.earn-choice-modal__head h2{
    color:#202124;
    font-size:28px;
    font-weight:900;
    line-height:34px;
    margin:0 0 6px;
}

.earn-choice-modal__head p{
    color:#667085;
    font-size:14px;
    line-height:22px;
    margin:0;
}

.earn-choice-modal__grid{
    display:grid;
    gap:12px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    margin-top:20px;
}

.earn-choice-option{
    align-items:center;
    background:#f8fafb;
    border:1px solid #e3e7ec;
    border-radius:12px;
    color:#202124;
    display:flex;
    gap:12px;
    min-height:92px;
    padding:14px;
    transition:background .18s ease, border-color .18s ease;
}

.earn-choice-option:hover{
    background:#fff;
    border-color:rgba(4, 165, 28, .38);
    color:#202124;
}

.earn-choice-option__icon{
    align-items:center;
    border-radius:12px;
    display:flex;
    flex:0 0 48px;
    height:48px;
    justify-content:center;
    width:48px;
}

.earn-choice-option__icon svg{
    height:25px;
    width:25px;
}

.earn-choice-option__icon.is-blue{
    background:rgba(7, 156, 255, .12);
    color:#079cff;
}

.earn-choice-option__icon.is-green{
    background:rgba(4, 165, 28, .12);
    color:#04a51c;
}

.earn-choice-option__icon.is-yellow{
    background:rgba(245, 158, 11, .14);
    color:#b66a00;
}

.earn-choice-option__icon.is-red{
    background:rgba(171, 48, 71, .12);
    color:#ab3047;
}

.earn-choice-option strong{
    color:#202124;
    display:block;
    font-size:15px;
    font-weight:900;
    line-height:20px;
    margin-bottom:3px;
}

.earn-choice-option small{
    color:#667085;
    display:block;
    font-size:12px;
    line-height:18px;
}

.earn-choice-remember{
    align-items:center;
    color:#475467;
    cursor:pointer;
    display:inline-flex;
    font-size:13px;
    font-weight:700;
    gap:8px;
    line-height:20px;
    margin:18px 0 0;
}

.earn-choice-remember input{
    accent-color:#04a51c;
    height:16px;
    width:16px;
}

@media (max-width:767.98px){
    .earn-choice-modal.is-open,
    .earn-choice-modal.is-closing{
        align-items:flex-end;
        padding:0;
    }

    .earn-choice-modal__dialog{
        border-radius:16px 16px 0 0;
        max-height:92vh;
        overflow-y:auto;
        padding:20px 16px 18px;
        transform:translateY(100%);
        width:100%;
    }

    .earn-choice-modal.is-open .earn-choice-modal__dialog{
        transform:translateY(0);
    }

    .earn-choice-modal.is-closing .earn-choice-modal__dialog{
        transform:translateY(100%);
    }

    .earn-choice-modal__head h2{
        font-size:24px;
        line-height:30px;
    }

    .earn-choice-modal__grid{
        grid-template-columns:1fr;
    }

    .earn-choice-option{
        min-height:78px;
    }
}

/* Stable two-line titles for service/project cards */
.ad-container:hover,
.ad-container.home-project-card:hover{
    box-shadow:0 5px 14px rgba(17, 24, 39, .08) !important;
}

.ad-container h3{
    box-sizing:border-box !important;
    display:-webkit-box !important;
    height:54px !important;
    line-height:22px !important;
    max-height:54px !important;
    min-height:54px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
}

.ad-container h3 > a{
    color:inherit;
    display:-webkit-box !important;
    line-height:22px !important;
    max-height:44px !important;
    overflow:hidden !important;
    text-decoration:none;
    text-overflow:ellipsis !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
}

/* Unified modal typography */
:root{
    --fiwork-modal-font-family:"Inter", var(--font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.modal,
.modal-content,
.modal-dialog,
.modal-header,
.modal-body,
.modal-footer,
.swal2-container,
.swal2-popup,
.fiw-modal,
.fiw-modal__dialog,
.fiwork-register-modal,
.fiwork-login-modal,
.check-register-modal,
.check-login-modal,
.fill-balance-modal-block,
.fiwork-status-modal,
.earn-choice-modal,
.messenger-modal-block,
.phone-modal-block,
.inbox-conversation-modal,
.portfolio-modal,
.fiwork-portfolio-modal,
.overlayGray .modal,
[class*="modal"]:not(i):not(.fa):not([class*="fa-"]),
[class*="popup"]:not(i):not(.fa):not([class*="fa-"]){
    font-family:var(--fiwork-modal-font-family) !important;
}

.modal :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em,.btn,.form-control,.modal-title,.modal-body,.modal-footer),
.swal2-container :where(.swal2-title,.swal2-html-container,.swal2-input,.swal2-select,.swal2-textarea,.swal2-actions button),
.fiw-modal :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
.fiwork-register-modal :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
.fiwork-login-modal :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
.check-register-modal :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
.check-login-modal :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
.fill-balance-modal-block :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
.fiwork-status-modal :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
.earn-choice-modal :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
.messenger-modal-block :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
.phone-modal-block :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
.inbox-conversation-modal :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
.portfolio-modal :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
.fiwork-portfolio-modal :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
.overlayGray .modal :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
[class*="modal"]:not(i):not(.fa):not([class*="fa-"]) :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em),
[class*="popup"]:not(i):not(.fa):not([class*="fa-"]) :where(h1,h2,h3,h4,h5,h6,p,label,input,textarea,select,button,a,strong,b,small,em){
    font-family:var(--fiwork-modal-font-family) !important;
}

/* Toast notifications are defined in fiwork-toast.css. */

@media (min-width: 768px) {
    .fiwork-header-chat-menu {
        position: relative;
    }

    .fiwork-header-chat-dropdown {
        position: absolute;
        top: calc(100% + 10px);
        right: -12px;
        z-index: 1060;
        display: block;
        width: 330px;
        max-width: min(330px, calc(100vw - 32px));
        padding: 8px;
        background: #fff;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 16px;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14), 0 2px 10px rgba(15, 23, 42, 0.06);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    }

    .fiwork-header-chat-menu::after {
        position: absolute;
        right: 0;
        bottom: -12px;
        left: 0;
        height: 18px;
        content: "";
    }

    .fiwork-header-chat-menu:hover .fiwork-header-chat-dropdown,
    .fiwork-header-chat-menu:focus-within .fiwork-header-chat-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .fiwork-header-chat-dropdown__list {
        max-height: 376px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .fiwork-header-chat-dropdown__item {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) 24px;
        gap: 10px;
        align-items: center;
        min-height: 58px;
        padding: 9px 10px;
        color: #151515;
        text-decoration: none;
        border-radius: 12px;
        transition: background-color 140ms ease, color 140ms ease;
    }

    .fiwork-header-chat-dropdown__item + .fiwork-header-chat-dropdown__item {
        margin-top: 2px;
    }

    .fiwork-header-chat-dropdown__item:hover {
        color: #151515;
        background: #f5f8ff;
    }

    .fiwork-header-chat-dropdown__avatar {
        display: block;
        width: 38px;
        height: 38px;
        overflow: hidden;
        background: #eef3fb;
        border-radius: 50%;
    }

    .fiwork-header-chat-dropdown__avatar img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .fiwork-header-chat-dropdown__body {
        display: block;
        min-width: 0;
    }

    .fiwork-header-chat-dropdown__title,
    .fiwork-header-chat-dropdown__preview {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fiwork-header-chat-dropdown__title {
        font-family: Inter, "Open Sans", Arial, sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        color: #111827;
    }

    .fiwork-header-chat-dropdown__preview {
        margin-top: 2px;
        font-family: Inter, "Open Sans", Arial, sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        color: #6b7280;
    }

    .fiwork-header-chat-dropdown__badge {
        justify-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        font-family: Inter, "Open Sans", Arial, sans-serif;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        background: #007bfb;
        border-radius: 999px;
    }

    .fiwork-header-chat-dropdown__empty {
        padding: 18px 14px;
        font-family: Inter, "Open Sans", Arial, sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        color: #6b7280;
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .fiwork-header-chat-dropdown {
        display: none !important;
    }
}

/* Airy desktop header */
.computer-header--air {
    --header-accent: #0188ff;
    --header-accent-hover: #0079e6;
    --header-action-blue: #005bff;
    --header-text: #20252b;
    --header-muted: #707f8d;
    --header-border: #e7edf3;
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 0;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: relative;
    z-index: 500;
}

.computer-header--air::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: calc(100% - 48px);
    max-width: var(--fiwork-layout-max, 1316px);
    z-index: 0;
    border-radius: 0 0 24px 24px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(17, 24, 39, .055);
    pointer-events: none;
    transform: translateX(-50%);
}

.computer-header--air > * {
    position: relative;
    z-index: 1;
}

.main-block.main-block--category-page {
    align-items: flex-start;
    padding-right: 20px;
    padding-left: 20px;
    overflow: visible;
    background: #f5f5f5;
}

.computer-header--air .nav-part1-container {
    width: 100%;
    max-width: none;
    height: auto;
    padding: 0;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
    z-index: 3;
    overflow: visible;
}

.computer-header--air .nav-part1 {
    width: 100%;
    min-height: 76px;
    padding: 0 24px;
    max-width: var(--fiwork-layout-max, 1316px);
    margin: 0 auto;
    gap: 12px;
    position: relative;
    overflow: visible;
}

.computer-header--air .logo-and-search-block {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 24px;
}

.computer-header--air .site-header__main {
    width: 100%;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.computer-header--air .site-header__container {
    width: calc(100% - 48px);
    max-width: var(--fiwork-layout-max, 1316px);
    margin-right: auto;
    margin-left: auto;
}

.computer-header--air .site-header__main-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 var(--fiwork-layout-max, 1316px);
    overflow: visible;
}

.computer-header--air .logo-container {
    position: relative;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: center;
    line-height: 0;
    text-decoration: none;
}

.computer-header--air .logo-container:hover,
.computer-header--air .logo-container:focus,
.computer-header--air .logo-container:focus-visible {
    text-decoration: none;
}

.computer-header--air .header-logo-stack {
    width: 112px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.computer-header--air .logo-and-search-block .header-logo {
    width: 100%;
    margin-top: 0;
    display: block;
}

.computer-header--air .beta-container {
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    overflow: visible;
}

.computer-header--air .logo-and-search-block .search-container {
    width: auto;
    min-width: 250px;
    flex: 1 1 380px;
}

.computer-header--air .logo-and-search-block .search-container .header-service-search-form {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    height: 48px;
    padding: 0 58px 0 0;
    overflow: visible;
    border: 2px solid #0188ff;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.computer-header--air .logo-and-search-block .search-container .header-service-search-form:focus-within {
    border-color: #0079e6;
    box-shadow: 0 0 0 3px rgba(1, 136, 255, .14);
}

.computer-header--air .header-search-scope {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    height: 34px;
    margin: 3px 4px 3px 3px;
    padding: 0 9px 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    border-radius: 9px;
    color: #536577;
    background: #f2f7fc;
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 75px;
}

.computer-header--air .header-search-control {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
    border: 0;
    border-radius: 0 10px 10px 0;
    color: #8f98a3;
    background: #fff;
    transition: background-color .16s ease;
    flex: 1 1 auto;
}

.computer-header--air .header-search-control:hover {
    background: #fff;
}

.computer-header--air .header-search-control:focus-within {
    background: #fff;
    box-shadow: none;
}

.computer-header--air .logo-and-search-block .search-container .search-service-input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 38px 0 9px;
    border: 0;
    border-radius: 0 10px 10px 0;
    outline: 0;
    color: #20252b;
    background: transparent;
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    appearance: none;
}

.computer-header--air .logo-and-search-block .search-container .search-service-input::placeholder {
    color: #9aa3ad;
    opacity: 1;
}

.computer-header--air .logo-and-search-block .search-container .search-service-input::-webkit-search-cancel-button {
    display: none;
}

.computer-header--air .logo-and-search-block .clear-search-button {
    position: absolute;
    right: 7px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: #858b92;
    transition: color .16s ease, background-color .16s ease;
}

.computer-header--air .logo-and-search-block .clear-search-button.hidden {
    display: none;
}

.computer-header--air .logo-and-search-block .clear-search-button:hover,
.computer-header--air .logo-and-search-block .clear-search-button:focus-visible {
    color: #0188ff;
    background: rgba(1, 136, 255, .1);
}

.computer-header--air .logo-and-search-block .clear-search-button:focus-visible {
    outline: 2px solid rgba(1, 136, 255, .28);
    outline-offset: 1px;
}

.computer-header--air .logo-and-search-block .clear-search-button svg {
    width: 16px;
    height: 16px;
}

.computer-header--air .logo-and-search-block .search-container .search-content-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 70px;
    height: auto;
    padding: 0 0 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0 11px 11px 0;
    color: #fff;
    background: #0188ff;
    box-shadow: none;
    font-family: Inter, Arial, sans-serif;
    transition: opacity .16s ease;
}

.computer-header--air .logo-and-search-block .search-container .search-content-button:hover,
.computer-header--air .logo-and-search-block .search-container .search-content-button:focus-visible {
    background: #0188ff;
    opacity: .88;
}

.computer-header--air .logo-and-search-block .search-container .search-content-button:focus-visible {
    outline: 0;
}

.computer-header--air .logo-and-search-block .search-container .search-content-button:active {
    background: #0079e6;
    opacity: .76;
    transform: none;
}

.computer-header--air .logo-and-search-block .search-container .search-content-button:disabled {
    cursor: progress;
    opacity: .72;
}

.computer-header--air .header-ai-search__loader {
    width: 15px;
    height: 15px;
    display: none;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: header-ai-search-spin .7s linear infinite;
}

.computer-header--air .header-ai-search__button-icon {
    width: 23px;
    height: 23px;
}

.computer-header--air .header-service-search-form.is-loading .header-ai-search__button-icon {
    display: none;
}

.computer-header--air .header-service-search-form.is-loading .header-ai-search__loader {
    display: block;
}

@keyframes header-ai-search-spin {
    to {
        transform: rotate(360deg);
    }
}

.computer-header--air .header-search-suggestions {
    top: calc(100% + 8px);
    left: 0;
    width: calc(100% - 62px);
    border-color: #e2e4e7;
    border-radius: 11px;
    box-shadow: 0 14px 34px rgba(17, 24, 39, .11);
}

.computer-header--air .site-header__actions {
    height: 54px;
    min-width: 0;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    z-index: 4;
    overflow: visible;
}

.computer-header--air .user-header--modern {
    width: auto;
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
    overflow: visible;
}

.computer-header--air .user-header--modern .header__user-block,
.computer-header--air .user-header--modern .header__user-dropdown {
    overflow: visible;
}

.computer-header--air .user-header--modern .header__user-dropdown {
    z-index: 6;
}

.computer-header--air .user-header--modern .user-header-menu-container {
    z-index: 1400;
}

.computer-header--air .user-header--modern .header__user-block {
    gap: 12px;
}

.computer-header--air .user-header--modern .header__user-menu {
    gap: 4px;
}

.computer-header--air .user-header--modern .header__user-menu-link {
    min-width: 64px;
    min-height: 54px;
    padding: 3px 8px 0;
    gap: 2px;
    border: 0;
    border-radius: 8px;
    color: rgba(0, 26, 51, .6);
    transition: color .15s ease, background-color .15s ease;
}

.computer-header--air .user-header--modern .header__user-menu-link span {
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
}

.computer-header--air .user-header--modern .header__user-menu-link:hover {
    color: var(--header-action-blue);
    background: #f2f5f9;
}

.computer-header--air .user-header--modern .header__user-menu-link:hover .header__user-path {
    fill: var(--header-action-blue) !important;
}

.computer-header--air .user-header--modern .header__user-icon {
    width: 24px;
    height: 24px;
    color: rgba(0, 26, 51, .6);
    transition: color .15s ease;
}

.computer-header--air .user-header--modern .header__user-path {
    fill: rgba(0, 26, 51, .6) !important;
    transition: fill .15s ease;
}

.computer-header--air .user-header--modern .newMessage .header__user-path {
    fill: #ff4d4f !important;
}

.computer-header--air .user-header--modern .header__user-menu-link:hover .header__user-icon,
.computer-header--air .user-header--modern .header__user-menu-link:focus-visible .header__user-icon {
    color: var(--header-action-blue);
}

.computer-header--air .user-header--modern .header__user-menu-link:focus-visible {
    color: var(--header-action-blue);
    background: #f2f5f9;
    outline: 2px solid rgba(0, 91, 255, .2);
    outline-offset: 1px;
}

.computer-header--air .user-header--modern .header__user-menu-link:focus-visible .header__user-path {
    fill: var(--header-action-blue) !important;
}

.computer-header--air .user-header--modern .header__user-menu-link .fiwork-header-order-icon-wrap {
    width: 24px;
    height: 24px;
}

.computer-header--air .user-header--modern .header__user-notification {
    width: auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
    color: rgba(0, 26, 51, .6);
    background: transparent;
    transition: color .15s ease;
}

.computer-header--air .user-header--modern .header__user-notification:hover,
.computer-header--air .user-header--modern .header__user-notification:focus-within {
    color: var(--header-action-blue);
    background: transparent;
}

.computer-header--air .user-header--modern .fiwork-header-notification-trigger {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 14px;
    color: #263442;
    background: #f3f6f9;
}

.computer-header--air .user-header--modern .fiwork-header-notification-trigger:hover,
.computer-header--air .user-header--modern .fiwork-header-notification-trigger:focus-visible {
    color: var(--header-action-blue);
    background: #eaf1f8;
}

.computer-header--air .user-header--modern .fiwork-header-notification-trigger .header__user-icon {
    width: 21px;
    height: 21px;
    color: inherit;
}

.computer-header--air .user-header--modern .header__user-balance {
    min-width: 0;
    min-height: 44px;
    padding: 0 7px 0 12px;
    border: 0;
    border-radius: 14px;
    background: #f3f6f9;
}

.computer-header--air .user-header--modern button.header__user-balance:hover {
    background: #eaf1f8;
}

.computer-header--air .user-header--modern .header__user-summ {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.2;
}

.computer-header--air .user-header--modern .header__user-logo {
    min-height: 44px;
    margin: 0;
    padding: 3px 2px;
    gap: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
}

.computer-header--air .user-header--modern .header__user-img {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border: 1px solid rgba(0, 26, 51, .12);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .08);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.computer-header--air .user-header--modern .header__user-logo:hover .header__user-img,
.computer-header--air .user-header--modern .header__user-logo:focus-visible .header__user-img,
.computer-header--air .user-header--modern .header__user-dropdown.is-menu-open .header__user-img {
    border-color: rgba(1, 136, 255, .48);
    box-shadow: 0 0 0 3px rgba(1, 136, 255, .1);
}

.computer-header--air .user-header--modern .header__user-logo:focus-visible {
    outline: 2px solid rgba(1, 136, 255, .26);
    outline-offset: 2px;
}

.computer-header--air .registration-and-login-block {
    gap: 10px;
}

.computer-header--air .registration-and-login-block .register-button,
.computer-header--air .registration-and-login-block .login-button {
    width: auto;
    height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    font-family: var(--third-family), var(--font-family), sans-serif;
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    text-transform: none;
}

.computer-header--air .registration-and-login-block .register-button {
    min-width: 150px;
    border: 0;
    color: #24324a;
    background: #eef2f6;
}

.computer-header--air .registration-and-login-block .login-button {
    min-width: 112px;
    border: 0;
    color: #fff;
    background: #0088ff;
}

.computer-header--air .registration-and-login-block .register-button:hover,
.computer-header--air .registration-and-login-block .register-button:focus-visible {
    border: 0;
    color: #17243a;
    background: #e1e7ee;
    transform: none;
}

.computer-header--air .registration-and-login-block .login-button:hover,
.computer-header--air .registration-and-login-block .login-button:focus-visible {
    color: #fff;
    background: #0076dd;
    transform: none;
}

.computer-header--air .registration-and-login-block :is(.register-button, .login-button):focus-visible {
    outline: 2px solid rgba(0, 136, 255, .3);
    outline-offset: 3px;
}

.computer-header--air .nav-part2-container {
    width: 100%;
    height: 44px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
    z-index: 2;
}

.computer-header--air .nav-part2 {
    width: calc(100% - 48px);
    max-width: var(--fiwork-layout-max, 1316px);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.computer-header--air .nav-part2 ul {
    width: 100%;
    height: 42px;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 12px;
    overflow: visible;
    background: transparent;
}

.computer-header--air .nav-part2 li {
    flex: 0 0 auto;
    height: 100%;
    position: relative;
    border: 0;
}

.computer-header--air .nav-part2 li:hover {
    border: 0;
}

.computer-header--air .nav-part2 li::after {
    height: 2px;
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 2;
    background: #2196f3;
    content: "";
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .18s ease;
}

.computer-header--air .nav-part2 li:hover::after,
.computer-header--air .nav-part2 li:focus-within::after {
    transform: scaleX(1);
}

.computer-header--air .nav-part2 li:has(> .mega-menu)::before {
    height: 2px;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    content: "";
}

.computer-header--air .nav-part2 li > a {
    min-height: 38px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 10px;
    color: rgba(0, 26, 51, .6);
    font-family: var(--font-family), Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: color .16s ease, background-color .16s ease;
}

.computer-header--air .nav-part2 li:hover > a {
    color: var(--header-action-blue);
    background: transparent;
}

.computer-header--air .nav-category-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    color: rgba(0, 26, 51, .46);
    transition: color .16s ease, transform .16s ease;
}

.computer-header--air .nav-category-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.computer-header--air .nav-category-label {
    transform: translateY(-.25px);
}

.computer-header--air .nav-category-chevron {
    width: 10px;
    height: 10px;
    margin-left: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 10px;
    color: #98a4af;
    transition: color .16s ease, transform .18s ease;
}

.computer-header--air .nav-category-chevron svg {
    width: 10px;
    height: 10px;
    display: block;
}

.computer-header--air .nav-part2 li:hover .nav-category-icon,
.computer-header--air .nav-part2 li:focus-within .nav-category-icon,
.computer-header--air .nav-part2 li:hover .nav-category-chevron,
.computer-header--air .nav-part2 li:focus-within .nav-category-chevron {
    color: var(--header-action-blue);
}

.computer-header--air .nav-part2 li:hover .nav-category-icon,
.computer-header--air .nav-part2 li:focus-within .nav-category-icon {
    transform: translateY(-1px);
}

.computer-header--air .nav-part2 li:hover .nav-category-chevron,
.computer-header--air .nav-part2 li:focus-within .nav-category-chevron {
    transform: rotate(180deg);
}

.computer-header--air .site-header__preferences {
    height: 100%;
    margin-left: auto;
    padding-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    color: var(--header-muted);
}

.computer-header--air .registration-and-login-block > .site-header__preferences--actions {
    height: 48px;
    margin: 0;
    padding: 0;
}

.computer-header--air .site-header__preferences--actions .header-language-selector--market .header-language-selector__toggle {
    min-width: 88px;
    height: 48px;
    padding: 0 15px;
    gap: 7px;
    border-radius: 999px;
    color: #536577;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
}

.computer-header--air .site-header__preferences--actions .header-language-selector--market .header-language-selector__toggle:hover,
.computer-header--air .site-header__preferences--actions .header-language-selector--market[open] .header-language-selector__toggle {
    color: #172235;
    background: transparent;
}

.computer-header--air .site-header__preferences--actions .header-language-selector__menu {
    right: auto;
    left: 0;
}

.computer-header--air .header-language-selector--market {
    z-index: 110;
}

.computer-header--air .header-language-selector--market .header-language-selector__toggle {
    min-width: 66px;
    height: 32px;
    padding: 0 8px;
    gap: 5px;
    border-radius: 9px;
    color: var(--header-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}

.computer-header--air .header-language-selector--market .header-language-selector__toggle:hover,
.computer-header--air .header-language-selector--market[open] .header-language-selector__toggle {
    color: var(--header-text);
    background: #f2f5f9;
}

.computer-header--air .header-language-selector__flag {
    width: 20px !important;
    height: 14px !important;
    flex: 0 0 20px !important;
}

.computer-header--air .header-language-selector__globe {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
}

.computer-header--air .header-language-selector--market .header-language-selector__chevron {
    width: 8px;
    height: 6px;
    flex-basis: 8px;
}

.computer-header--air .header-language-selector--market .header-language-selector__menu {
    top: calc(100% + 7px);
}

.computer-header--air .mega-menu {
    top: calc(100% + 1px);
    padding: 24px;
    overflow: auto;
    border: 1px solid #e1e3e6;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 18px 45px rgba(17, 24, 39, .12);
}

.computer-header--air .mega-menu-column {
    padding: 0 22px;
}

.computer-header--air .mega-menu-column:first-child {
    padding-left: 0;
}

.computer-header--air .mega-menu-column:last-child {
    padding-right: 0;
}

@media (max-width: 1180px) and (min-width: 769px) {
    .computer-header--air .nav-part1-container {
        height: auto;
        padding: 0;
    }

    .computer-header--air .nav-part1 {
        min-height: 72px;
        padding: 0 16px;
    }

    .computer-header--air .nav-part2 {
        padding-right: 16px;
        padding-left: 16px;
    }

    .computer-header--air .logo-and-search-block {
        gap: 16px;
    }

    .computer-header--air .logo-and-search-block .search-container {
        width: auto;
        min-width: 250px;
        max-width: none;
    }

    .computer-header--air .logo-and-search-block .search-container .header-service-search-form {
        padding-right: 52px;
    }

    .computer-header--air .logo-and-search-block .search-container .search-content-button {
        width: 64px;
    }

    .computer-header--air .header-search-suggestions {
        width: calc(100% - 56px);
    }

    .computer-header--air .header-search-scope {
        padding-inline: 7px;
        gap: 3px;
        font-size: 12px;
        flex-basis: 65px;
    }

    .computer-header--air .user-header--modern .header__user-menu-link {
        min-width: 44px;
        padding: 7px 6px;
    }

    .computer-header--air .user-header--modern .header__user-menu-link > span:last-child {
        display: none;
    }

    .computer-header--air .user-header--modern .header__user-block {
        gap: 7px;
    }

    .computer-header--air .user-header--modern .header__user-balance {
        min-width: 0;
        padding-inline: 9px 5px;
    }

    .computer-header--air .nav-part2 {
        overflow: visible;
    }

    .computer-header--air .nav-part2 ul {
        width: auto;
        justify-content: flex-start;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .computer-header--air .nav-part2 ul::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 768px) {
    .computer-header--air {
        display: none;
    }
}

.frontend-update-modal-open {
    overflow: hidden;
}

.frontend-update-modal-overlay {
    align-items: center;
    background: rgba(17, 24, 39, .48);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 20px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999999;
}

.frontend-update-modal-overlay.hidden {
    display: none;
}

.frontend-update-modal {
    align-items: center;
    background: #fff;
    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: 400px;
    padding: 20px;
    position: relative;
    transform: translateY(0);
    transition: transform .24s ease, opacity .24s ease;
    width: 100%;
}

.frontend-update-modal-overlay.hidden .frontend-update-modal {
    opacity: 0;
    transform: translateY(18px);
}

.frontend-update-modal:focus {
    outline: none;
}

.frontend-update-modal__header {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.frontend-update-modal__icon {
    align-items: center;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(10, 13, 18, .05);
    color: #23c366;
    display: flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.frontend-update-modal__header h3 {
    color: #181d27;
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 600;
    line-height: 156%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.frontend-update-modal__header p {
    color: #535862;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 143%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.frontend-update-modal__button {
    align-items: center;
    background: #23c366;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(10, 13, 18, .05);
    color: #fff;
    cursor: pointer;
    display: flex;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 600;
    height: 44px;
    justify-content: center;
    line-height: 150%;
    padding: 10px 14px;
    transition: background .18s ease, box-shadow .18s ease;
    width: 100%;
}

.frontend-update-modal__button:hover,
.frontend-update-modal__button:focus-visible {
    background: #1ab95a;
    outline: none;
}

.frontend-update-modal__button:disabled {
    cursor: wait;
    opacity: .78;
}

@media (max-width: 767.98px) {
    .frontend-update-modal-overlay {
        align-items: flex-end;
        padding: 12px;
    }

    .frontend-update-modal {
        max-width: none;
        padding: 18px;
        width: 100%;
    }
}

/*
 * Lightweight service-cover fallback.
 * The tiny SVG only marks a missing image; the visible placeholder is rendered
 * here so it follows the active site theme without loading another illustration.
 */
:where(a, div, span):has(> img[src*="service-cover-placeholder.svg"]) {
    position: relative;
    background-color: #e7e8ea !important;
    transition: none !important;
}

:where(a, div, span) > img[src*="service-cover-placeholder.svg"] {
    visibility: hidden !important;
    opacity: 0 !important;
}

img[onerror*="service-cover-placeholder.svg"] {
    background-color: #e7e8ea;
}

:where(a, div, span):has(> img[src*="service-cover-placeholder.svg"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: clamp(36px, 15%, 64px);
    aspect-ratio: 1;
    pointer-events: none;
    background-color: #9299a2;
    transform: translate(-50%, -50%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E") center / contain no-repeat;
}

html[data-theme="dark"] :where(a, div, span):has(> img[src*="service-cover-placeholder.svg"]),
html[data-theme="dark"] img[onerror*="service-cover-placeholder.svg"] {
    background-color: #454b52 !important;
}

html[data-theme="dark"] :where(a, div, span):has(> img[src*="service-cover-placeholder.svg"])::after {
    background-color: #858c94;
}

/* Post-registration desktop guide */
.fiwork-onboarding-guide {
    display: none;
}

@media (min-width: 1025px) {
    body.fiwork-onboarding-guide-open {
        overflow: hidden;
    }

    .fiwork-onboarding-guide {
        position: fixed;
        inset: 0;
        z-index: 2300;
        display: block;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity .24s ease, visibility .24s ease;
    }

    .fiwork-onboarding-guide.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .fiwork-onboarding-guide__backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgb(24 35 47 / 48%);
        cursor: default;
        opacity: 0;
        transition: opacity .24s ease;
    }

    .fiwork-onboarding-guide.is-open .fiwork-onboarding-guide__backdrop {
        opacity: 1;
    }

    .fiwork-onboarding-guide__panel {
        position: absolute;
        top: 8px;
        right: 8px;
        bottom: 8px;
        display: flex;
        width: min(440px, calc(100vw - 32px));
        overflow: hidden;
        flex-direction: column;
        color: #182431;
        background: #fff;
        border: 1px solid #dce3eb;
        border-radius: 28px;
        outline: none;
        transform: translateX(calc(100% + 16px));
        transition: transform .32s cubic-bezier(.22, 1, .36, 1);
    }

    .fiwork-onboarding-guide.is-open .fiwork-onboarding-guide__panel {
        transform: translateX(0);
    }

    .fiwork-onboarding-guide__header {
        display: flex;
        flex: 0 0 auto;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        padding: 24px 20px 18px 24px;
    }

    .fiwork-onboarding-guide__heading {
        min-width: 0;
    }

    .fiwork-onboarding-guide__heading h2 {
        margin: 0;
        color: inherit;
        font-family: var(--font-family), Manrope, sans-serif;
        font-size: 25px;
        font-weight: 650;
        line-height: 1.2;
        letter-spacing: -.025em;
    }

    .fiwork-onboarding-guide__heading p {
        margin: 7px 0 0;
        color: #768694;
        font-size: 15px;
        line-height: 1.45;
    }

    .fiwork-onboarding-guide__close {
        display: grid;
        width: 40px;
        height: 40px;
        padding: 0;
        flex: 0 0 40px;
        border: 0;
        border-radius: 999px;
        color: #607080;
        background: transparent;
        place-items: center;
        cursor: pointer;
        transition: color .18s ease, background-color .18s ease;
    }

    .fiwork-onboarding-guide__close:hover {
        color: #182431;
        background: #f1f4f7;
    }

    .fiwork-onboarding-guide__close svg {
        width: 24px;
        height: 24px;
    }

    .fiwork-onboarding-guide__progress {
        height: 4px;
        margin: 0 24px;
        overflow: hidden;
        flex: 0 0 4px;
        border-radius: 999px;
        background: #edf1f5;
    }

    .fiwork-onboarding-guide__progress span {
        display: block;
        width: 20%;
        height: 100%;
        border-radius: inherit;
        background: #18a65b;
        transition: width .28s ease;
    }

    .fiwork-onboarding-guide__viewport {
        min-height: 0;
        padding: 24px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .fiwork-onboarding-guide__screen {
        display: none;
    }

    .fiwork-onboarding-guide__screen.is-active {
        display: block;
        animation: fiwork-onboarding-screen-in .28s cubic-bezier(.22, 1, .36, 1);
    }

    @keyframes fiwork-onboarding-screen-in {
        from { opacity: 0; transform: translateX(14px); }
        to { opacity: 1; transform: translateX(0); }
    }

    .fiwork-onboarding-guide__success {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 64px;
        padding: 11px 14px;
        border: 1px solid #dce3eb;
        border-radius: 24px;
        background: #fff;
        font-size: 15px;
        font-weight: 500;
    }

    .fiwork-onboarding-guide__success-icon,
    .fiwork-onboarding-guide__choice-icon {
        display: grid;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 50%;
        place-items: center;
    }

    .fiwork-onboarding-guide__success-icon {
        color: #168a50;
        background: #e7f7ee;
    }

    .fiwork-onboarding-guide__success-icon svg,
    .fiwork-onboarding-guide__choice-icon svg {
        width: 19px;
        height: 19px;
    }

    .fiwork-onboarding-guide__choices {
        display: grid;
        gap: 12px;
        margin-top: 16px;
    }

    .fiwork-onboarding-guide__choice {
        position: relative;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto 22px;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 82px;
        padding: 14px;
        text-align: left;
        color: #182431;
        background: #fff;
        border: 1px solid #dce3eb;
        border-radius: 24px;
        cursor: pointer;
        transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
    }

    .fiwork-onboarding-guide__choice:hover {
        border-color: #b8c6d3;
        background: #f8fafc;
        transform: translateY(-1px);
    }

    .fiwork-onboarding-guide__choice:nth-child(1) .fiwork-onboarding-guide__choice-icon {
        color: #096fe8;
        background: #e9f3ff;
    }

    .fiwork-onboarding-guide__choice:nth-child(2) .fiwork-onboarding-guide__choice-icon {
        color: #8055d9;
        background: #f1ebff;
    }

    .fiwork-onboarding-guide__choice:nth-child(3) .fiwork-onboarding-guide__choice-icon {
        color: #bd7900;
        background: #fff3d8;
    }

    .fiwork-onboarding-guide__choice-copy {
        display: grid;
        min-width: 0;
        gap: 4px;
    }

    .fiwork-onboarding-guide__choice-copy strong {
        color: inherit;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.25;
    }

    .fiwork-onboarding-guide__choice-copy small {
        color: #768694;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.35;
    }

    .fiwork-onboarding-guide__recommended {
        padding: 5px 8px;
        border-radius: 999px;
        color: #176f45;
        background: #e7f7ee;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }

    .fiwork-onboarding-guide__recommended[hidden] {
        display: none;
    }

    .fiwork-onboarding-guide__choice-arrow {
        width: 20px;
        height: 20px;
        color: #8a98a5;
    }

    .fiwork-onboarding-guide__back {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 0 0 16px;
        padding: 7px 10px;
        color: #566777;
        background: transparent;
        border: 0;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }

    .fiwork-onboarding-guide__back:hover {
        color: #182431;
        background: #f1f4f7;
    }

    .fiwork-onboarding-guide__back svg {
        width: 17px;
        height: 17px;
    }

    .fiwork-onboarding-guide__steps {
        display: grid;
        gap: 12px;
    }

    .fiwork-onboarding-guide__step {
        overflow: hidden;
        border: 1px solid #dce3eb;
        border-radius: 24px;
        background: #fff;
        transition: border-color .18s ease, background-color .18s ease;
    }

    .fiwork-onboarding-guide__step.is-open {
        border-color: #c4d0db;
    }

    .fiwork-onboarding-guide__step-toggle {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 22px;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 64px;
        padding: 11px 14px;
        text-align: left;
        color: #182431;
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    .fiwork-onboarding-guide__step-toggle strong {
        color: inherit;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.3;
    }

    .fiwork-onboarding-guide__step-toggle > svg {
        width: 20px;
        height: 20px;
        color: #7a8997;
        transition: transform .2s ease;
    }

    .fiwork-onboarding-guide__step.is-open .fiwork-onboarding-guide__step-toggle > svg {
        transform: rotate(180deg);
    }

    .fiwork-onboarding-guide__step-number {
        display: grid;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: #3d5367;
        background: #eef2f6;
        font-size: 14px;
        font-weight: 600;
        place-items: center;
    }

    .fiwork-onboarding-guide__step-content {
        display: none;
        padding: 0 14px 14px 66px;
    }

    .fiwork-onboarding-guide__step.is-open .fiwork-onboarding-guide__step-content {
        display: block;
    }

    .fiwork-onboarding-guide__step-content p {
        margin: 0;
        color: #5f7080;
        font-size: 13px;
        line-height: 1.55;
    }

    .fiwork-onboarding-guide__step-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        margin-top: 14px;
        padding: 9px 16px;
        color: #fff;
        background: #087cff;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color .18s ease, transform .18s ease;
    }

    .fiwork-onboarding-guide__step-action:hover {
        color: #fff;
        background: #006de4;
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fiwork-onboarding-guide,
    .fiwork-onboarding-guide__backdrop,
    .fiwork-onboarding-guide__panel,
    .fiwork-onboarding-guide__screen.is-active {
        animation: none !important;
        transition: none !important;
    }
}
/* Shared delivery-duration selector. The native select remains in the form as
   the source of truth; this layer only provides the interaction and visuals. */
.duration-select {
    min-width: 0;
    position: relative;
    width: 100%;
}

.duration-select__native {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

.duration-select__trigger {
    align-items: center;
    appearance: none;
    background: #fff;
    border: 1px solid #d5d7da;
    border-radius: 10px;
    color: #181d27;
    cursor: pointer;
    display: flex;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    gap: 12px;
    height: 46px;
    justify-content: space-between;
    line-height: 20px;
    min-width: 0;
    padding: 0 13px 0 14px;
    text-align: left;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
    width: 100%;
}

.duration-select__trigger:hover {
    border-color: #b8bdc5;
}

.duration-select__trigger:focus-visible,
.duration-select.is-open .duration-select__trigger {
    border-color: #177de5;
    box-shadow: 0 0 0 3px rgba(23, 125, 229, .12);
    outline: 0;
}

.duration-select.has-error .duration-select__trigger {
    border-color: #e5484d;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, .11);
}

.duration-select.is-disabled .duration-select__trigger {
    background: #f5f6f7;
    color: #98a2b3;
    cursor: not-allowed;
}

.duration-select__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.duration-select__chevron {
    color: #667085;
    flex: 0 0 18px;
    height: 18px;
    transition: transform .18s ease;
    width: 18px;
}

.duration-select.is-open .duration-select__chevron {
    transform: rotate(180deg);
}

.duration-select__dropdown {
    background: #fff;
    border: 1px solid #e2e5e9;
    border-radius: 12px;
    box-shadow: 0 16px 42px rgba(16, 24, 40, .16);
    list-style: none;
    margin: 0;
    max-height: min(320px, calc(100vh - 24px));
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    position: fixed;
    scrollbar-color: #c5c9cf transparent;
    scrollbar-width: thin;
    z-index: 10050;
}

.duration-select__dropdown[hidden] {
    display: none;
}

.duration-select__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.duration-select__search {
    background: #fff;
    padding: 2px 2px 6px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.duration-select__search-field {
    align-items: center;
    background: #fff;
    border: 1px solid #d5d7da;
    border-radius: 8px;
    color: #7a8290;
    display: flex;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
}

.duration-select__search-field:focus-within {
    border-color: #177de5;
    box-shadow: 0 0 0 3px rgba(23, 125, 229, .1);
}

.duration-select__search-field svg {
    flex: 0 0 18px;
    height: 18px;
    width: 18px;
}

.duration-select__search-input {
    appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #181d27;
    flex: 1 1 auto;
    font-family: var(--font-family);
    font-size: 14px;
    height: 38px;
    min-width: 0;
    outline: 0;
    padding: 0;
    width: 100%;
}

.duration-select__search-input::placeholder {
    color: #98a2b3;
}

.duration-select__dropdown::-webkit-scrollbar {
    width: 6px;
}

.duration-select__dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.duration-select__dropdown::-webkit-scrollbar-thumb {
    background: #c5c9cf;
    border: 1px solid #fff;
    border-radius: 999px;
}

.duration-select__option {
    align-items: center;
    border-radius: 8px;
    color: #344054;
    cursor: pointer;
    display: flex;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    min-height: 38px;
    padding: 8px 10px;
    transition: background-color .12s ease, color .12s ease;
}

.duration-select__option.is-highlighted {
    background: #f1f6fd;
    color: #176fc1;
}

.duration-select__option.is-selected {
    color: #0b63b6;
    font-weight: 600;
}

.duration-select__option.is-disabled {
    color: #98a2b3;
    cursor: default;
}

.duration-select__dropdown--service {
    max-height: min(390px, calc(100vh - 24px));
}

.duration-select__dropdown--service .duration-select__option {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    min-height: 58px;
    padding: 9px 10px;
}

.duration-select__option-title {
    color: inherit;
    display: -webkit-box;
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.duration-select__option-meta {
    color: #7a8290;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
}

.duration-select__option.is-highlighted .duration-select__option-meta,
.duration-select__option.is-selected .duration-select__option-meta {
    color: currentColor;
    opacity: .78;
}

.duration-select__empty {
    color: #7a8290;
    font-family: var(--font-family);
    font-size: 13px;
    line-height: 19px;
    padding: 18px 12px;
    text-align: center;
}

.duration-select__empty[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .duration-select__dropdown {
        max-height: min(290px, calc(100dvh - 24px));
    }

    .duration-select__dropdown--service {
        max-height: min(360px, calc(100dvh - 24px));
    }
}