@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&display=swap"); body.pwa-bg { min-height: 100vh; position: relative; overflow-x: hidden; background: #fbe6e3; font-family: "Roboto", sans-serif !important; } body.pwa-bg :where( p, span, a, li, label, strong, em, small, b, td, th, input, textarea, select, button ) { font-family: "Roboto", sans-serif !important; } body.pwa-bg :where(h1, h2, h3, h4, h5, h6) { font-family: "Roboto Slab", serif !important; } /* Sidepanel vertical centering */ body.login-page--with-sidepanel .desktop-frost-menu { transform: var(--sidepanel-transform, none); } /* In menus headings should stay Roboto, not Slab. */ body.pwa-bg :where( .desktop-frost-menu h1, .desktop-frost-menu h2, .desktop-frost-menu h3, .desktop-frost-menu h4, .desktop-frost-menu h5, .desktop-frost-menu h6, .offcanvas h1, .offcanvas h2, .offcanvas h3, .offcanvas h4, .offcanvas h5, .offcanvas h6, .navbar-menu h1, .navbar-menu h2, .navbar-menu h3, .navbar-menu h4, .navbar-menu h5, .navbar-menu h6 ) { font-family: "Roboto", sans-serif !important; } body.pwa-bg .menu-user-meta h3 { margin: 0; font-size: 15px; font-weight: 600; color: rgba(var(--title-color), 1); } body.pwa-bg .menu-user-role { font-size: 12px; color: rgba(var(--content-color), 1); } body.pwa-bg::before, body.pwa-bg::after { content: ""; position: fixed; inset: 0; pointer-events: none; } body.pwa-bg::before { background: none; z-index: 0; } body.pwa-bg::after { background: transparent; z-index: 1; } @media (min-width: 601px) { body.pwa-bg::before { background: url('/img/withoutmobile.svg') center center / cover no-repeat; } body.pwa-bg::after { background: rgba(0, 0, 0, 0.5); } } body.pwa-bg > :not(.offcanvas):not(.offcanvas-backdrop):not(.modal-backdrop):not(.modal):not(.desktop-frost-menu):not(.app-toast-host):not(.app-chat-panel):not(.app-chat-photo-viewer) { position: relative; z-index: 2; } .main-header { min-height: 120px; } /* Header dropdown must not be clipped by rounded header shell on centered layouts. */ body.pwa-bg .main-header { overflow: visible !important; z-index: 10 !important; } body.login-page .auth-content-bg .auth-title .loader-line { z-index: 0; } body.login-page .alert { border: 0 !important; } /* Global dark option button style (matches /app/order option tabs). */ body.pwa-bg .btn.app-btn-option-dark { background: #171c26 !important; border: 1px solid #171c26 !important; color: #fff !important; font-size: 12px !important; font-weight: 400 !important; line-height: 18px !important; height: 36px !important; min-height: 36px !important; padding: 8px 6px !important; border-radius: 10px !important; white-space: nowrap; box-shadow: none !important; } body.pwa-bg .btn.app-btn-option-dark:hover, body.pwa-bg .btn.app-btn-option-dark:focus, body.pwa-bg .btn.app-btn-option-dark:active { background: #171c26 !important; border-color: #171c26 !important; color: #fff !important; box-shadow: none !important; } /* Global app page title block (same visual pattern as /app/order). */ body.pwa-bg .app-page-title { margin: 0 0 12px; } body.pwa-bg .app-page-title h2 { margin: 0; font-weight: 500; color: rgba(var(--title-color), 1); } body.pwa-bg .app-page-breadcrumb { margin: 5px 0 0; font-size: 14px; font-weight: 400; color: rgba(var(--content-color), 1); } body.pwa-bg .app-page-breadcrumb .bc-link { color: rgba(var(--content-color), 1); cursor: pointer; text-decoration: none; } body.pwa-bg .app-page-breadcrumb .bc-link:hover { text-decoration: underline; } body.pwa-bg .app-title-row-badge { display: flex; align-items: center; justify-content: space-between; gap: 10px; } body.pwa-bg .app-title-row-badge > h2 { margin: 0; } /* Global status badge in the visual style of nanny anketa moderation badge. */ body.pwa-bg .app-status-badge { display: inline-block; padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 19.5px; } body.pwa-bg .app-status-badge--new { background: rgba(var(--content-color), .12); color: rgba(var(--content-color), 1); } body.pwa-bg .app-status-badge--review { background: #d85651; color: #ffffff; font-weight: 400; } body.pwa-bg .app-status-badge--verified { background: #d1fae5; color: #065f46; } body.pwa-bg .app-status-badge--in-progress { background: #22c55e; color: #ffffff; font-weight: 500; } body.pwa-bg .app-status-badge--completed { background: #38bdf8; color: #ffffff; font-weight: 500; } body.pwa-bg .app-status-badge--cancelled { background: #dc2626; color: #ffffff; font-weight: 500; } /* Orange badge for nanny search in progress */ body.pwa-bg .app-status-badge--searching { background: #e67e22; color: #ffffff; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } body.pwa-bg .app-status-badge--searching .search-radar { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: search-radar-spin .8s linear infinite; } @keyframes search-radar-spin { to { transform: rotate(360deg); } } /* Pink accent badge for live trip actions (Подтвердите посадку / доставку). */ body.pwa-bg .app-status-badge--action { background: #e25da0; color: #ffffff; font-weight: 500; } body.pwa-bg .app-page-breadcrumb .bc-current { color: #e25da0; font-weight: 500; } /* Global tab buttons pattern (same as /app/order option tabs). */ body.pwa-bg .app-option-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; } body.pwa-bg .app-option-tabs .nav-item { flex: 1 1 calc(50% - 4px); min-width: 140px; } body.pwa-bg .app-option-tabs--three .nav-item { flex: 1 1 calc(33.333% - 6px); min-width: 0; } @media (max-width: 419px) { body.pwa-bg .app-option-tabs--three { flex-direction: column; gap: 6px; } body.pwa-bg .app-option-tabs--three .nav-item { flex: none; width: 100%; } } body.pwa-bg .app-option-tabs .nav-link.btn { width: 100%; padding: 8px 10px !important; border-radius: 10px; border: 1px solid #d8c9b0; background: rgba(var(--box-bg), 1); color: rgba(var(--title-color), 1); text-align: center; font-size: 12px; line-height: 18px; font-weight: 400; box-shadow: none !important; } body.pwa-bg .app-option-tabs .nav-link.btn.active, body.pwa-bg .app-option-tabs .nav-link.btn:active, body.pwa-bg .app-option-tabs .nav-link.btn:focus { background-color: rgba(var(--title-color), 1); color: #fff; border-color: rgba(var(--title-color), 1); box-shadow: none !important; } /* Global slim section tabs with underline + counter badges (/app/users, /app/nannies). */ body.pwa-bg .app-section-tabs { display: flex; align-items: stretch; gap: 0; border-bottom: 2px solid rgba(var(--line-color), .3); padding: 0; margin-right: calc(17.25px - 12px); } body.pwa-bg .app-section-tabs--inset-12 { padding-left: 12px; padding-right: 12px; } body.pwa-bg .app-section-tabs--inset-20 { padding-left: 20px; padding-right: 20px; } body.pwa-bg .app-section-tab { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 16px 6px; font-size: 14px; line-height: 1.2; font-weight: 500; color: rgba(var(--content-color), 1); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; } body.pwa-bg .app-section-tab:first-child { margin-left: calc(17.25px - 12px); padding-left: 9px; } body.pwa-bg .app-section-tab:hover { color: rgba(var(--title-color), 1); } body.pwa-bg .app-section-tab--active { color: rgba(var(--theme-color), 1); border-bottom-color: rgba(var(--theme-color), 1); font-weight: 600; } body.pwa-bg .app-section-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 4px; background: rgba(var(--theme-color), 1); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; margin-left: 6px; transform: translateY(-1px); } /* Global framed collapsible section pattern (/app/style cat-like cards). */ body.pwa-bg .app-collapsible-card { border: 1px solid rgba(var(--line-color), 1); border-radius: 12px; overflow: hidden; background: rgba(var(--white), 1); } body.pwa-bg .app-collapsible-trigger { width: 100%; min-height: 48px; border: 0; border-bottom: 0; background: #fcfcfc; padding: 10px 12px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; text-align: left; } body.pwa-bg .app-collapsible-trigger h3 { margin: 0; font-size: 15px; font-weight: 500; line-height: 18px; color: rgba(var(--title-color), 1); } body.pwa-bg .app-collapsible-trigger .chevron { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; transition: transform .2s; } body.pwa-bg .app-collapsible-trigger .chevron svg { width: 18px; height: 18px; display: block; } body.pwa-bg .app-collapsible-trigger[aria-expanded="false"] .chevron { transform: rotate(-90deg); } body.pwa-bg .app-collapsible-trigger:focus { outline: none; box-shadow: none; } /* Helper: allow using auth-btn without large top gap in inline page sections. */ body.pwa-bg .app-inline-cta .auth-btn { margin-top: 0 !important; } /* Global inline checkbox alignment (roles/options rows). */ body.pwa-bg .form-check.form-check-inline { display: inline-flex; align-items: center; gap: 6px; } body.pwa-bg .form-check.form-check-inline .form-check-input { margin-top: 0; float: none; } /* Global app form pattern (based on nanny profile/anketa fields). */ body.pwa-bg .app-form-block .theme-form .form-group { margin: 0; padding: 12px 20px; border-radius: 0; background: #fff; } body.pwa-bg .app-form-block .theme-form .form-group .form-label { margin: 0 0 4px !important; font-size: 12px; font-weight: 400; line-height: 18px; color: rgba(var(--content-color), 1); } /* Global /app label baseline: same as anketa (applies even outside app-form-block). */ body.pwa-bg .theme-form .form-group .form-label { margin: 0 0 4px !important; font-size: 12px; font-weight: 400; line-height: 18px; color: rgba(var(--content-color), 1); } body.pwa-bg .app-form-block .theme-form .form-group .form-control { width: 100%; margin: 0; background-color: rgba(var(--box-bg), 1) !important; border: 0; box-shadow: none; padding: 13px 14px; min-height: 48px; border-radius: 10px; color: rgba(var(--title-color), 1); } body.pwa-bg .app-form-block .theme-form select.form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237f8384' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 10px 6px !important; } /* Global inline search field for /app lists. */ body.pwa-bg .app-inline-search { padding: 6px 0 4px; } body.pwa-bg .app-inline-search .theme-form .form-group { padding: 0; background: transparent; } body.pwa-bg .app-inline-search-field { position: relative; } body.pwa-bg .app-inline-search-control { padding-right: 44px !important; background: #fff !important; } body.pwa-bg .app-inline-search-submit { position: absolute; top: 50%; right: 14px; width: 18px; height: 18px; transform: translateY(-50%); opacity: .56; background: center / 18px 18px no-repeat url('/pwa/icons/search-normal-2.svg'); border: 0; padding: 0; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; } body.pwa-bg .app-inline-search-submit:hover, body.pwa-bg .app-inline-search-submit:focus { opacity: .82; outline: none; } /* Global /app panel shell with 12px card inset, used by moderation/list pages. */ body.pwa-bg .app-shell-panel { --pwa-side-pad: 20px; background: rgba(var(--box-bg), 1); border-radius: 12px; margin-left: calc(-1 * var(--pwa-side-pad)); margin-right: calc(-1 * var(--pwa-side-pad)); width: calc(100% + (var(--pwa-side-pad) * 2)); padding-left: 12px; padding-right: 12px; padding-top: 0; } @media (max-width: 600px) { body.pwa-bg .app-shell-panel { --pwa-side-pad: calc(15px + 5 * (100vw - 320px) / 280); } } body.pwa-bg .app-shell-panel > .app-panel-card, body.pwa-bg .app-shell-panel > .profile-white-block { margin-left: 0; margin-right: 0; width: 100%; } body.pwa-bg .app-shell-panel > .app-panel-card:first-child, body.pwa-bg .app-shell-panel > .profile-white-block:first-child { margin-top: 0; } body.pwa-bg .app-shell-panel > .app-panel-card + .app-panel-card, body.pwa-bg .app-shell-panel > .profile-white-block + .profile-white-block { margin-top: 12px; } /* Global bordered white card, same frame as nanny moderation cards. */ body.pwa-bg .app-panel-card { border: 1px solid rgba(var(--line-color), 1) !important; border-radius: 12px; background: rgba(var(--white), 1); overflow: hidden; } /* Borderless white card variant for detail screens that keep the same shape/inset. */ body.pwa-bg .app-panel-card--borderless { border: 0 !important; box-shadow: none !important; } /* Global list-card head for /app cards with media on the left and meta on the right. */ body.pwa-bg .app-list-card-head { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid rgba(var(--line-color), .7); } body.pwa-bg .app-list-card-head--tight-top { padding-top: 0; } body.pwa-bg .app-list-card-media { width: 56px; height: 56px; flex: 0 0 56px; display: flex; align-items: center; justify-content: center; border-radius: 12px; } body.pwa-bg .app-list-card-media--beige { background: rgba(var(--box-bg), 1); } body.pwa-bg .app-list-card-body { min-width: 0; flex: 1 1 auto; } /* Reset location-section template bg/padding inside dashboard trip cards */ body.pwa-bg .dashboard-card .location-section { background: transparent; padding-bottom: 0; border-radius: 0; } /* Global route list for compact white cards in /app. */ body.pwa-bg .app-route-list { position: relative; margin-top: 0 !important; overflow: visible; background: rgba(var(--white), 1); } body.pwa-bg .app-route-list::before { content: ""; position: absolute; top: 30px; bottom: 30px; left: 24px; z-index: 0; pointer-events: none; } body.pwa-bg .app-route-list--solid::before { border-left: 2px solid rgba(var(--title-color), 1); } body.pwa-bg .app-route-list--dashed::before { border-left: 1px dashed rgba(var(--title-color), 1); } body.pwa-bg .app-route-list--flat { background: transparent; } body.pwa-bg .app-route-list li::before { content: none !important; } body.pwa-bg .app-route-list li { z-index: 1; } body.pwa-bg .app-route-list li::after { content: ""; position: absolute; left: 44px; right: 15px; bottom: 0; border-bottom: 1px solid rgba(var(--line-color), 1); } body.pwa-bg .app-route-list li:last-child::after { content: none; } body.pwa-bg .app-route-list li .location-box { position: relative; min-height: 44px; display: flex; align-items: center; } body.pwa-bg .app-route-list li:last-child .location-box::after { content: none; } body.pwa-bg .app-route-list li .location-box::before { content: ""; position: absolute; left: -4px; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); border-radius: 50%; background: rgba(var(--white), 1); z-index: 1; pointer-events: none; } body.pwa-bg .app-route-list--flat li .location-box::before { background: rgba(var(--box-bg), 1); } body.pwa-bg .app-route-list li .location-box .icon { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; border-radius: 0 !important; padding: 0 !important; box-sizing: border-box; } body.pwa-bg .app-route-list li .location-box .icon::after { content: none; } body.pwa-bg .app-route-list li .location-box h5 { margin: 0; font-size: 14px; } body.pwa-bg .app-route-list-point-body { min-width: 0; flex: 1 1 auto; } body.pwa-bg .app-route-list-point-meta { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: rgba(var(--content-color), 1); } body.pwa-bg .app-route-list-point-comment { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: rgba(var(--content-color), .72); font-style: italic; } body.pwa-bg .app-route-list-wrap--shift-10 { margin-left: -10px; } /* * Detail variant for routes with point actions/comments. * Keeps the outer white card geometry untouched and changes only * internal route spacing/alignment. */ body.pwa-bg .app-route-list-wrap--detail-rich.app-route-list-wrap--shift-10 { margin-left: -10px; } body.pwa-bg .app-route-list--detail-rich { padding-left: 5px; box-sizing: border-box; } body.pwa-bg .app-route-list--detail-rich::before { content: none; } body.pwa-bg .app-route-list--detail-rich li { position: relative; padding: 6px 0 12px; z-index: 1; } body.pwa-bg .app-route-list--detail-rich li:last-child { padding-bottom: 6px; } body.pwa-bg .app-route-list--detail-rich li + li { padding-top: 12px; } body.pwa-bg .app-route-list--detail-rich li::after { left: 44px; right: auto; width: calc(100% - 44px); bottom: 0; } body.pwa-bg .app-route-list--detail-rich li:not(:last-child) .location-box::after { content: ""; position: absolute; left: 9px; top: 22px; bottom: -22px; border-left: 2px solid rgba(var(--title-color), 1); z-index: 0; pointer-events: none; } body.pwa-bg .app-route-list--detail-rich li:first-child .location-box::after { top: 18px; } body.pwa-bg .app-route-list--detail-rich li:last-child .location-box::after { content: none; } body.pwa-bg .app-route-list--detail-rich li .location-box { min-height: 0; align-items: flex-start; gap: 8px; } body.pwa-bg .app-route-list--detail-rich li .location-box::before { top: -5px; transform: none; } body.pwa-bg .app-route-list--detail-rich li .location-box .icon { margin-top: -1px; } body.pwa-bg .app-route-list--detail-rich li .location-box h5 { line-height: 18px; margin-bottom: 8px; } body.pwa-bg .app-route-list--detail-rich .app-route-list-point-body h5:last-child { margin-bottom: 0; } body.pwa-bg .app-route-list--detail-rich .app-route-list-point-meta { margin-top: 0; line-height: 16px; color: rgb(226, 93, 160); } body.pwa-bg .app-route-list--detail-rich .app-route-list-point-comment { margin-top: 8px; line-height: 16px; font-style: normal; } /* Outline button — compact action button for secondary actions (chat, top-up, etc). Usage: Modifiers: app-outline-btn--danger (red text+border) */ body.pwa-bg .app-outline-btn { display: inline-flex; align-items: center; padding: 7px 14px; font-size: 13px; font-weight: 500; line-height: 18px; border-radius: 8px; cursor: pointer; text-decoration: none; background: transparent; color: rgba(var(--theme-color), 1); border: 1px solid rgba(var(--theme-color), .3); box-shadow: none; } body.pwa-bg .app-outline-btn:hover { background: rgba(var(--theme-color), .06); color: rgba(var(--theme-color), 1); } body.pwa-bg .app-outline-btn--danger { color: #c62828; border-color: rgba(198, 40, 40, .3); } body.pwa-bg .app-outline-btn--danger:hover { background: rgba(198, 40, 40, .06); color: #c62828; } /* Global placeholder color — light grey for all inputs/textareas. */ body.pwa-bg input::placeholder, body.pwa-bg textarea::placeholder, body.pwa-bg select::placeholder { color: rgba(var(--content-color), 0.35); } /* Filter row — search + sort controls inline. Usage: