/* Shared public-site surfaces. Editorial text stays open; independent cards
   have one outline; supporting content uses a quiet fill. See docs/design. */
:root {
    --ui-radius: 8px;
    --ui-accent: #b93240;
    --ui-accent-hover: #982735;
    --ui-accent-soft: #fbf0f1;
    --ui-ink: #30363b;
    --ui-muted: #626a71;
    --ui-link: #3d596c;
    --ui-border: #dfe2e5;
    --ui-surface: #f5f6f7;
}

/* One outline per independent object, without a second shadow frame. */
.pretty-border, .padv-block, .employer-block,
.account-dashboard-card, .account-section, .profi-form-section,
.auth-card, .profi-card, .account-help-section {
    border-radius: var(--ui-radius);
    border-color: var(--ui-border);
    box-shadow: none;
}
.pretty-border { box-shadow: 0 0 0 1px var(--ui-border); }
.pretty-block > .block-name, .employer-face {
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
}
.pretty-list > li:last-child, .pretty-list > li:last-child > a,
.employer-footer { border-radius: 0 0 var(--ui-radius) var(--ui-radius); }
.popup, .b-popup {
    border-radius: var(--ui-radius);
    border-color: var(--ui-border);
    box-shadow: 0 12px 40px rgba(30, 40, 50, .16);
}
.b-popup__header { border-radius: var(--ui-radius) var(--ui-radius) 0 0; }

/* Filled supporting surfaces do not need another surrounding outline. */
.account-dashboard__footer, .account-dashboard-support,
.account-help-contact, .profi-directory-intro, .auth-help-card,
.profi-form-help, .vacancy-legal-note, .account-inline-note {
    background-color: var(--ui-surface);
    border: 0;
    border-radius: var(--ui-radius);
    box-shadow: none;
}
.account-inline-note--success { background-color: #f0f7f1; }
.account-inline-note--warning { background-color: #fff7e8; }
.account-section__body .account-inline-note,
.profi-form-section .profi-form-help { margin-bottom: 0; }

/* Inputs and actions have the same geometry throughout public templates. */
.button, .blue-button, a.round-button, input.round-button,
.iField, .form .row .iField, .form .dropdown select,
.popup input[type="text"], .popup input[type="password"],
.popup input[type="email"], .b-popup input[type="text"] {
    border-radius: var(--ui-radius);
}
.iField, .form .row .iField, .form .dropdown select {
    border-color: #b8bec4;
}
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 3px;
}
.personal-area-shell :is(input, textarea, select):focus,
.account-auth-page :is(input, textarea, select):focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px rgba(185, 50, 64, .12);
}
.header-auth-link { border-radius: var(--ui-radius); }
.headerRight .urls .header-auth-link--login {
    color: var(--ui-accent) !important;
}
.headerRight .urls .header-auth-link--login:hover,
.headerRight .urls .header-auth-link--login:focus {
    background: var(--ui-accent-soft);
    border-color: var(--ui-accent-soft);
    color: var(--ui-accent-hover) !important;
}
.header-auth-link__icon, .icon.iLogin {
    -webkit-mask-image: url('../images/ui-user.svg');
    mask-image: url('../images/ui-user.svg');
}
@media (max-width: 991px) {
    .mobile-menu.mobile-menu--enter {
        width: 44px;
        height: 44px;
        background: url('../images/ui-user-white.svg') center / 28px no-repeat;
        border: 1px solid rgba(255, 255, 255, .5);
        border-radius: var(--ui-radius);
        box-sizing: border-box;
    }
}

/* Account navigation points to existing publications; creation has its own CTA. */
.personal-area-shell .top-head-bar.lk.account-navigation {
    display: flex;
    width: 100%;
    height: auto;
    padding: 5px;
    margin: 16px 0 0;
    gap: 4px;
    flex-wrap: wrap;
    border: 0;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: none;
    box-sizing: border-box;
}
.personal-area-shell .account-navigation > li,
.personal-area-shell .account-navigation > li:hover {
    float: none;
    width: auto;
    max-width: 100%;
    border: 0;
    background: none;
}
.personal-area-shell .top-head-bar.account-navigation > li > a {
    display: flex;
    min-height: 40px;
    height: auto;
    padding: 8px 12px;
    align-items: center;
    border: 0;
    border-radius: var(--ui-radius);
    background: transparent;
    color: var(--ui-muted);
    font: 600 14px/20px 'PT Sans', sans-serif;
    box-sizing: border-box;
}
.personal-area-shell .top-head-bar.account-navigation > li.active > a {
    background: #fff;
    color: var(--ui-accent);
    box-shadow: 0 1px 3px rgba(30, 40, 50, .1);
}
.personal-area-shell .top-head-bar.account-navigation > li > a:hover {
    background: #fff;
    color: var(--ui-accent);
}
.account-dashboard-card h3 a { font: inherit; }
.account-dashboard-card__primary { min-height: 44px; }
.account-dashboard-card__secondary, .account-dashboard-card__extra {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
}
.account-dashboard-card:hover {
    transform: none;
    border-color: #b8bec4;
    box-shadow: 0 3px 12px rgba(30, 40, 50, .06);
}
.personal-area-shell .balance-block { box-shadow: none; }
.account-balance-amount {
    display: block;
    margin-top: 6px;
    color: var(--ui-ink);
    font: 700 28px/34px 'PT Sans', sans-serif;
}
.personal-area-shell .balance-block .pretty-list .fill-up {
    margin: 12px;
    padding: 11px 12px;
    border-radius: var(--ui-radius);
    background: var(--ui-accent);
    color: #fff;
    text-align: center;
}
.personal-area-shell .balance-block .fill-up:hover { background: var(--ui-accent-hover); }
.personal-area-shell .balance-block .history-payments { font-size: 14px; }

/* Keep publication actions legible without hover; the accordion stays Yii UI. */
.lk-arts .padv-block .manage a { color: var(--ui-link); }
.lk-arts .padv-block .status.status__active { background: #eaf5ed; color: #276139; }
.lk-arts .padv-block .status.status__unpaid { background: #fff1db; color: #805515; }
.lk-arts .padv-block .status { border-radius: var(--ui-radius) 0 0 var(--ui-radius); }
.lk-arts .manage a.link-icon .sprite {
    top: 0;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--action-icon) center / 20px no-repeat;
    mask: var(--action-icon) center / 20px no-repeat;
}
.lk-arts .manage .up { --action-icon: url('../images/ui-up.svg'); }
.lk-arts .manage .vip { --action-icon: url('../images/ui-crown.svg'); }

/* Profile actions must also work on touchscreens and from the keyboard. */
.personal-area-shell .profile .employer-block .notinput {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    overflow-wrap: anywhere;
}
.personal-area-shell .profile .employer-block :is(.editpen, .save, .cancel, .add) {
    display: inline-flex;
    width: auto;
    height: auto;
    min-height: 40px;
    padding: 7px 10px;
    align-items: center;
    margin: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: #fff;
    color: var(--ui-link);
    font: 400 14px/20px 'PT Sans', sans-serif;
    cursor: pointer;
}
.personal-area-shell .profile .employer-block .save {
    border-color: var(--ui-accent);
    background: var(--ui-accent);
    color: #fff;
}
.personal-area-shell .profile .employer-block .editinput {
    width: 100%;
    max-width: 280px;
    min-height: 42px;
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 1px solid #b8bec4;
    border-radius: var(--ui-radius);
    font: 16px/22px 'PT Sans', sans-serif;
    box-sizing: border-box;
}
.personal-area-shell .profile .employer-field { overflow-wrap: anywhere; }
.personal-area-shell .profile .employer-user-icon { background-image: url('../images/ui-user.svg'); }
.personal-area-shell .profile .employer-phone-icon { background-image: url('../images/ui-phone.svg'); }
.personal-area-shell .profile .employer-email-icon.green { background-image: url('../images/icons/icon-email.svg'); }
.personal-area-shell .profile .employer-vk-icon.green { background-image: url('../images/icons/icon-vk.svg'); }

@media (max-width: 640px) {
    .personal-area-shell .top-head-bar.lk.account-navigation {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .personal-area-shell .account-navigation > li:first-child { grid-column: 1 / -1; }
    .personal-area-shell .top-head-bar.account-navigation > li > a { min-height: 44px; }
    .account-dashboard-card__actions { gap: 6px 14px; }
    .account-dashboard-card__secondary, .account-dashboard-card__extra { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .account-dashboard-card, .profi-card, .header-auth-link { transition: none; }
}

/* Legacy .page heading rules otherwise add article-sized gaps inside cards. */
.personal-area-shell .account-dashboard__intro h2 { margin: 0 0 8px; }
.personal-area-shell .account-dashboard__intro p { margin: 0; }
.personal-area-shell .account-dashboard-card h3 { margin: 1px 0 7px; }
.personal-area-shell .profile .employer-footer { display: none; }
.personal-area-shell .balance-block .fill-up::before { display: none; }
.profi-directory .profi-card__title { margin: 0 0 6px; }
.profi-directory .profi-card__person { margin: 0 0 8px; }
.personal-area-shell .account-dashboard__intro h2,
.personal-area-shell .account-dashboard-card h3,
.profi-directory .profi-card__title { padding: 0; }

/* Shared legacy wrappers: text is open, navigation is filled, forms outlined. */
.about { border: 0; background: transparent; box-shadow: none; }
.cats, .profi-promotion-card {
    border: 0;
    background: var(--ui-surface);
    border-radius: var(--ui-radius);
    box-shadow: none;
}
.adding, .cList .blocks {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: none;
}

.personal-area-shell .profile .employer-password-icon { background-image: url('../images/ui-lock.svg'); }
.gso-ban-block {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
}
.gso-ban-top, #sravMainBlock .sprav-back {
    border-radius: var(--ui-radius) var(--ui-radius) 0 0;
}
.gso-ban-block > .gso-ban-cat,
.gso-ban-block .block-gso__item:last-child .block-gso__category,
#sravMainBlock > .block-but {
    border-radius: 0 0 var(--ui-radius) var(--ui-radius);
}

.personal-area-shell .list-view .empty {
    border: 0;
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-muted);
}
.adding.about.single { border: 0; background: transparent; box-shadow: none; }
.p-item-wrap, .p-item {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
}

/* Loading and small legacy controls use scalable shapes with the shared palette. */
.content .profile .userdata .overlay::after,
.profile .employer-block .overlay::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px;
    margin: -17px 0 0 -17px; border: 3px solid var(--ui-border);
    border-top-color: var(--ui-accent); border-radius: 50%;
    animation: ui-progress-turn .8s linear infinite;
}
@keyframes ui-progress-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .content .profile .userdata .overlay::after,
    .profile .employer-block .overlay::after { animation: none; }
}
.signs .block.second { padding-left: 32px; }
.icon.iPhoneBig { color: var(--ui-accent); }
.button .icon.iPlus {
    background: currentColor;
    -webkit-mask: url('../images/ui/plus.svg') center / contain no-repeat;
    mask: url('../images/ui/plus.svg') center / contain no-repeat;
}
.gso-slider .slick-prev, .gso-slider-default .slick-prev,
.gso-slider-our_choice .slick-prev, .off-slider .slick-prev {
    background: #fff url('../images/ui/chevron-left.svg') center / 14px 22px no-repeat;
}
.gso-slider .slick-next, .gso-slider-default .slick-next,
.gso-slider-our_choice .slick-next, .off-slider .slick-next {
    background: #fff url('../images/ui/chevron-right.svg') center / 14px 22px no-repeat;
}
.slick-loading .slick-list { background: var(--ui-surface); }