:root { color: #111a2e; background: #f4f7fb; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; } html { min-width: 320px; } body { margin: 0; } button, input, select, textarea { font: inherit; } a { color: inherit; } button { cursor: pointer; } svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 1em; } .site-shell { background: #f4f7fb; min-height: 100vh; } .header { align-items: center; background: #ffffff; display: grid; gap: 28px; grid-template-columns: auto minmax(0, 1fr) auto; height: 82px; margin: 0 auto; padding: 0 48px; position: relative; z-index: 20; } .header-admin { background: #0f1f39; gap: 12px; height: auto; min-height: 82px; padding: 10px 20px; } .header-admin .brand { min-width: 0; } .header-admin .brand strong { color: #ffffff; } .header-admin .brand small { color: #9fb0c7; } .header-admin .nav { flex-wrap: wrap; gap: 6px clamp(8px, 1vw, 20px); row-gap: 6px; } .header-admin .nav button, .header-admin .nav a { color: #dbe4f0; font-size: 12px; padding: 8px 0; } .header-admin .nav button.active::after, .header-admin .nav a.active::after { bottom: 2px; } .header-admin .header-actions { flex-wrap: wrap; gap: 8px 14px; row-gap: 8px; } .header-admin .icon-text { gap: 6px; } .header-admin .icon-text svg { color: #dbe4f0; font-size: 18px; } .header-admin .icon-text span { color: #dbe4f0; font-size: 12px; } .header-admin .icon-text.active svg, .header-admin .icon-text.active span { color: #34d399; } .header-admin .post-button { min-width: 200px; padding: 11px 14px; } .brand-group { align-items: center; display: flex; gap: 8px; } .brand-admin-badge { background: rgba(52, 211, 153, 0.14); border: 1px solid rgba(52, 211, 153, 0.4); border-radius: 999px; color: #34d399; flex: 0 0 auto; font-size: 10px; font-weight: 900; letter-spacing: 0.04em; padding: 3px 9px; text-transform: uppercase; white-space: nowrap; } .brand { align-items: center; background: transparent; border: 0; display: flex; gap: 10px; min-width: 210px; padding: 0; text-align: left; text-decoration: none; } .brand-mark { align-items: center; color: #12a764; display: grid; font-size: 35px; place-items: center; } .brand-mark svg { fill: rgba(18, 167, 100, 0.08); stroke-width: 2.8; } .brand strong { display: block; font-size: 28px; letter-spacing: 0; line-height: 0.86; } .brand small { color: #526171; display: block; font-size: 10px; font-weight: 700; margin-top: 5px; } .nav { align-items: center; display: flex; gap: clamp(18px, 2.1vw, 44px); justify-content: center; min-width: 0; } .nav button, .nav a { background: transparent; border: 0; color: #111a2e; font-size: 13px; font-weight: 800; padding: 31px 0; position: relative; text-decoration: none; white-space: nowrap; } .nav button.active::after, .nav a.active::after { background: #13a360; border-radius: 999px; bottom: 20px; content: ""; height: 3px; left: 0; position: absolute; right: 0; } .header-actions { align-items: center; display: flex; gap: 24px; justify-content: flex-end; position: relative; } .icon-text { align-items: center; background: transparent; border: 0; display: inline-flex; gap: 9px; padding: 0; } .icon-text svg { color: #16233b; font-size: 20px; } .icon-text span { font-size: 13px; font-weight: 800; white-space: nowrap; } .icon-text.active { color: #109457; } .icon-text.active svg, .icon-text.active span { color: #109457; } .favorites-shortcut { position: relative; } .favorites-shortcut i { background: #14a45f; border: 2px solid #ffffff; border-radius: 999px; height: 10px; position: absolute; left: 13px; top: 1px; width: 10px; } .post-button { background: #089858; border: 0; border-radius: 7px; color: #ffffff; display: grid; gap: 2px; min-height: 58px; min-width: 240px; padding: 11px 18px; text-align: center; } .post-button span { font-size: 14px; font-weight: 900; } .post-button small { font-size: 11px; font-weight: 800; opacity: 0.9; } .hero { min-height: 700px; overflow: hidden; position: relative; } .hero-photo { height: 100%; inset: 0; object-fit: cover; object-position: center right; position: absolute; width: 100%; } .hero-gradient { background: linear-gradient(180deg, rgba(244, 247, 251, 0) 68%, rgba(238, 243, 248, 0.78) 100%), linear-gradient(90deg, #f7faff 0%, rgba(247, 250, 255, 0.96) 24%, rgba(247, 250, 255, 0.54) 42%, rgba(247, 250, 255, 0.08) 62%, rgba(247, 250, 255, 0) 100%); inset: 0; position: absolute; } .hero-inner { height: 620px; margin: 0 auto; max-width: 1760px; padding: 68px 48px 0; position: relative; } .hero-copy { max-width: 660px; position: relative; z-index: 2; } .hero h1 { color: #10182d; font-size: clamp(48px, 4.1vw, 78px); line-height: 0.98; margin: 0; } .hero h1 span { color: #10a15e; display: block; position: relative; width: max-content; } .hero h1 span::after { background: #10a15e; border-radius: 999px; bottom: -5px; content: ""; height: 4px; left: 28%; position: absolute; transform: rotate(-3deg); width: 72%; } .hero-copy p { color: #526171; font-size: clamp(18px, 1.35vw, 25px); line-height: 1.34; margin: 36px 0 0; max-width: 560px; } .benefits { display: grid; gap: 30px; grid-template-columns: repeat(4, minmax(118px, 1fr)); margin-top: 56px; max-width: 740px; } .benefit { align-items: center; display: flex; gap: 12px; min-width: 0; } .benefit-icon, .tool-icon { align-items: center; background: #eef5ff; border-radius: 50%; color: #4574ff; display: grid; flex: 0 0 auto; place-items: center; } .benefit-icon { font-size: 22px; height: 44px; width: 44px; } .benefit-icon.spark, .benefit-icon.coin { background: #fff0e7; color: #ff8247; } .benefit-icon.chart { background: #eaf8ef; color: #22aa63; } .benefit-icon.shuffle { background: #eef5ff; color: #4574ff; } .benefit-icon.shield { background: #eaf8ef; color: #13a360; } .benefit strong, .benefit small { display: block; } .benefit strong { color: #16233b; font-size: 12px; font-weight: 900; line-height: 1.25; } .benefit small { color: #526171; font-size: 10px; font-weight: 800; line-height: 1.25; margin-top: 2px; } .ai-card { background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(212, 221, 231, 0.8); border-radius: 8px; box-shadow: 0 22px 60px rgba(24, 35, 57, 0.16); display: grid; gap: 14px; left: 48%; padding: 19px 21px; position: absolute; top: 32px; width: 238px; z-index: 3; } .ai-label { align-items: center; color: #5368ff; display: flex; font-size: 12px; font-weight: 900; gap: 8px; } .ai-label svg { font-size: 18px; } .ai-card > strong { color: #111a2e; font-size: 14px; line-height: 1.35; } .avatar-row { align-items: center; display: flex; } .avatar-row span, .avatar-row em { align-items: center; border: 2px solid #ffffff; border-radius: 50%; display: grid; font-size: 10px; font-style: normal; font-weight: 900; height: 30px; margin-left: -7px; place-items: center; width: 30px; } .avatar-row span:first-child { margin-left: 0; } .avatar-row span:nth-child(1) { background: #d7b390; } .avatar-row span:nth-child(2) { background: #95b5ca; } .avatar-row span:nth-child(3) { background: #d9c2a6; } .avatar-row span:nth-child(4) { background: #7aa884; } .avatar-row span:nth-child(5) { background: #bd8b74; } .avatar-row em { background: #dcf8e9; color: #129457; margin-left: 6px; } .ai-card button { background: #14223a; border: 0; border-radius: 7px; color: #ffffff; font-size: 13px; font-weight: 900; min-height: 42px; padding: 10px 14px; } .tour-card { align-items: center; background: rgba(255, 255, 255, 0.96); border-radius: 8px; box-shadow: 0 16px 45px rgba(24, 35, 57, 0.14); display: flex; gap: 11px; padding: 14px 17px; position: absolute; right: 48px; top: 390px; z-index: 3; } .tour-badge { align-items: center; border: 1px solid #c8d2dd; border-radius: 50%; color: #14223a; display: grid; font-size: 13px; font-weight: 900; height: 42px; place-items: center; width: 42px; } .tour-card strong, .tour-card small { display: block; } .tour-card strong { font-size: 13px; font-weight: 900; } .tour-card small { color: #526171; font-size: 11px; font-weight: 800; margin-top: 2px; } .search-wrap { margin: -194px auto 0; max-width: 1760px; padding: 0 48px; position: relative; z-index: 6; } .search-tabs { display: flex; width: max-content; } .search-tabs button { background: rgba(255, 255, 255, 0.88); border: 0; color: #657284; font-size: 13px; font-weight: 900; min-height: 43px; min-width: 126px; padding: 10px 20px; } .search-tabs button:first-child { border-radius: 6px 0 0 0; } .search-tabs button:last-child { border-radius: 0 6px 0 0; } .search-tabs .active { background: #14223a; color: #ffffff; } .search-panel { align-items: stretch; background: #ffffff; border: 1px solid #dfe6ee; border-radius: 0 8px 8px 8px; box-shadow: 0 18px 45px rgba(24, 35, 57, 0.11); display: grid; grid-template-columns: 1.12fr 1.18fr 0.9fr 0.92fr 0.95fr 184px; min-height: 78px; overflow: hidden; } .search-panel-mega { background: transparent; border: 0; border-radius: 0; box-shadow: none; display: block; min-height: 0; overflow: visible; } .search-panel-mega .mega-bar { border-radius: 0 8px 8px 8px; } .search-field { align-items: center; background: #ffffff; border: 0; border-right: 1px solid #e3e9f0; display: flex; gap: 14px; min-width: 0; padding: 17px 22px; text-align: left; } .search-field svg { color: #8793a3; flex: 0 0 auto; font-size: 25px; } .search-field span { min-width: 0; } .search-field small, .search-field strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-field small { color: #8793a3; font-size: 12px; font-weight: 800; } .search-field strong { color: #14223a; font-size: 14px; font-weight: 900; margin-top: 4px; } .search-button { align-items: center; align-self: center; background: #0b9f5c; border: 0; border-radius: 7px; color: #ffffff; display: flex; font-size: 14px; font-weight: 900; gap: 14px; height: 52px; justify-content: center; margin: 12px 16px; } .search-button svg { font-size: 23px; } .content-shell { margin: 112px auto 70px; max-width: 1760px; padding: 0 48px; } .home-feature-grid { align-items: start; display: grid; gap: 28px; grid-template-columns: minmax(0, 1.85fr) minmax(440px, 0.95fr); } .home-left-stack, .home-right-stack { display: grid; gap: 34px; min-width: 0; } .home-left-stack .tool-card, .home-right-stack .free-card { grid-column: auto; } .tool-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .tool-card, .free-card, .listing-card { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; } .tool-card { display: grid; gap: 14px; min-height: 178px; padding: 22px 22px 18px; } .tool-icon { font-size: 30px; height: 36px; width: 36px; } .tool-icon.gear { background: #f0edff; color: #6658ff; } .tool-icon.trend { background: #eaf8ef; color: #18a55f; } .tool-icon.house { background: #fff0e7; color: #ff8147; } .tool-icon.coin { background: #fff3dc; color: #f2a62b; } .tool-card h2, .free-card h2, .section-head h2, .cities h2 { color: #14223a; margin: 0; } .tool-card h2 { font-size: 14px; line-height: 1.24; } .tool-card p, .free-card p { color: #657284; line-height: 1.42; margin: 7px 0 0; } .tool-card p { font-size: 12px; } .tool-card button { align-self: end; background: #f8fafc; border: 1px solid #e2e8ef; border-radius: 6px; color: #14223a; font-size: 13px; font-weight: 900; min-height: 42px; } .free-card { align-items: center; background: linear-gradient(90deg, #f7fffb 0%, #f2fbf6 100%); display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 150px; min-height: 178px; overflow: hidden; padding: 24px 26px; } .free-card h2 { font-size: 22px; line-height: 1.15; } .free-card p { font-size: 14px; max-width: 440px; } .free-card button { align-items: center; background: #0b9f5c; border: 0; border-radius: 6px; color: #ffffff; display: flex; font-size: 13px; font-weight: 900; gap: 16px; justify-content: space-between; margin-top: 16px; min-height: 42px; min-width: 250px; padding: 0 17px; } .free-card button strong { font-size: 13px; } .free-card small { color: #657284; display: block; font-size: 11px; font-weight: 800; margin-top: 9px; } .house-graphic { height: 116px; position: relative; } .cloud { background: #d8efe2; border-radius: 999px; height: 18px; position: absolute; right: 10px; top: 14px; width: 58px; } .cloud::before, .cloud::after { background: #d8efe2; border-radius: 50%; content: ""; position: absolute; } .cloud::before { height: 24px; left: 14px; top: -9px; width: 24px; } .cloud::after { height: 16px; right: 10px; top: -5px; width: 16px; } .home { background: #dcf7e9; border: 3px solid #81d8a8; bottom: 7px; position: absolute; } .home::before { background: #ffffff; border-left: 3px solid #0b9f5c; border-top: 3px solid #0b9f5c; content: ""; height: 38px; left: 14px; position: absolute; top: -24px; transform: rotate(45deg); width: 38px; } .home.one { height: 60px; left: 9px; width: 82px; } .home.two { height: 76px; right: 6px; width: 92px; } .main-grid { align-items: start; display: grid; gap: 28px; grid-template-columns: minmax(0, 1.55fr) minmax(390px, 0.95fr); margin-top: 34px; } .section-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 12px; } .cities h2 { align-items: center; display: flex; min-height: 24px; } .section-head h2, .cities h2 { font-size: 18px; line-height: 1.2; } .section-head a { align-items: center; color: #657284; display: flex; font-size: 12px; font-weight: 800; gap: 7px; text-decoration: none; } .section-head a svg { font-size: 16px; } .offers { min-width: 0; overflow: hidden; } .listing-loop { --listing-gap: 18px; --listing-step: calc((100% + var(--listing-gap)) / 4); overflow: hidden; width: 100%; } .listing-grid { animation: listing-slide 20s ease-in-out infinite; display: flex; gap: var(--listing-gap); width: 100%; will-change: transform; } .listing-loop:hover .listing-grid, .listing-loop:focus-within .listing-grid { animation-play-state: paused; } .listing-card { box-shadow: 0 14px 32px rgba(24, 35, 57, 0.05); flex: 0 0 calc((100% - 54px) / 4); min-width: 0; overflow: hidden; } @keyframes listing-slide { 0%, 12% { transform: translateX(0); } 20%, 32% { transform: translateX(calc(0px - var(--listing-step))); } 40%, 52% { transform: translateX(calc(0px - var(--listing-step) - var(--listing-step))); } 60%, 72% { transform: translateX(calc(0px - var(--listing-step) - var(--listing-step) - var(--listing-step))); } 80%, 100% { transform: translateX(calc(0px - var(--listing-step) - var(--listing-step) - var(--listing-step) - var(--listing-step))); } } .property-media { --photo-start: center; --photo-end: 58% center; background-position: center; background-size: cover; height: 118px; position: relative; } .listing-card:nth-child(4n + 2) .property-media { --photo-start: 66% 66%; --photo-end: 78% 66%; } .listing-card:nth-child(4n + 3) .property-media { --photo-start: 16% 38%; --photo-end: 30% 38%; } .listing-card:nth-child(4n + 4) .property-media { --photo-start: 86% 52%; --photo-end: 72% 52%; } .property-media span { background: #10a15e; border-radius: 4px; color: #ffffff; font-size: 11px; font-weight: 900; left: 14px; padding: 5px 8px; position: absolute; top: 12px; } .property-media span.dark { background: #14223a; } .property-media .favorite-button { align-items: center; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 50%; box-shadow: 0 8px 20px rgba(20, 34, 58, 0.16); color: #14223a; display: grid; font-size: 19px; height: 38px; place-items: center; position: absolute; right: 12px; top: 12px; transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, transform 0.16s ease; width: 38px; } .property-media .favorite-button:hover, .property-media .favorite-button:focus-visible { background: #ffffff; box-shadow: 0 10px 26px rgba(20, 34, 58, 0.22); color: #0b9f5c; transform: translateY(-1px) scale(1.04); } .property-media .favorite-button:focus-visible { outline: 3px solid rgba(16, 161, 94, 0.24); outline-offset: 2px; } .property-media .favorite-button svg { fill: transparent; stroke: currentColor; stroke-width: 2.15; } .property-media .favorite-button.saved { background: #10a15e; border-color: #10a15e; box-shadow: 0 10px 26px rgba(16, 161, 94, 0.28); color: #ffffff; } .property-media .favorite-button.saved svg { fill: currentColor; } .listing-body { padding: 12px 14px 14px; } .listing-body p { color: #3e4b5f; font-size: 12px; font-weight: 800; margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .listing-body small { color: #657284; display: block; font-size: 11px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .price-row { align-items: end; display: flex; gap: 10px; justify-content: space-between; margin-top: 12px; } .price-row strong { color: #14223a; font-size: 18px; font-weight: 950; white-space: nowrap; } .price-row span { color: #657284; font-size: 11px; font-weight: 800; white-space: nowrap; } .cities h2 { margin-bottom: 12px; } .city-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .city-card { background-size: cover; border-radius: 8px; color: #ffffff; display: grid; min-height: 102px; overflow: hidden; padding: 14px 16px; place-content: end start; position: relative; } .city-card strong, .city-card span { position: relative; z-index: 1; } .city-card strong { font-size: 17px; font-weight: 950; line-height: 1.2; } .city-card span { font-size: 12px; font-weight: 800; margin-top: 4px; opacity: 0.88; } .all-cities { align-content: center; background: #14223a; grid-column: span 2; min-height: 102px; } .all-cities span { font-size: 18px; font-weight: 950; margin: 0 0 10px; } .all-cities strong { font-size: 16px; font-weight: 800; opacity: 0.9; } .all-cities button { align-items: center; background: transparent; border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 50%; color: #ffffff; display: grid; font-size: 22px; height: 44px; place-items: center; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 44px; } .buy-page { background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 32%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); overflow: auto; } .buy-container { margin: 0 auto; max-width: 1760px; padding: 0 48px; } .breadcrumb { align-items: center; color: #718094; display: flex; font-size: 12px; font-weight: 800; gap: 9px; padding-top: 20px; } .breadcrumb svg { font-size: 12px; transform: rotate(-90deg); } .breadcrumb strong { color: #14223a; } .buy-hero { align-items: end; display: flex; justify-content: space-between; margin-top: 32px; } .buy-hero h1 { color: #14223a; font-size: 34px; line-height: 1.08; margin: 0; } .buy-hero p { color: #526171; font-size: 15px; font-weight: 700; margin: 12px 0 0; } .breadcrumb, .breadcrumb.mini, .valuation-breadcrumb, .history-breadcrumb, .district-breadcrumb, .negotiation-breadcrumb, .settings-breadcrumb { display: none !important; } .rent-hero h1 span { color: #10a15e; } .buy-search-row { align-items: center; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) 190px; margin-top: 36px; } .buy-search-row .mega-search { min-width: 0; } .buy-search-row .mega-bar { grid-template-columns: minmax(220px, 1.35fr) minmax(190px, 1fr) minmax(140px, 0.78fr) minmax(140px, 0.78fr) minmax(125px, 0.65fr) minmax(190px, 1fr) minmax(128px, auto) 118px; } .buy-search-row .mega-field { gap: 10px; padding-left: 14px; padding-right: 14px; } .buy-search-row .mega-more { padding-left: 14px; padding-right: 14px; } .buy-search-row .mega-search-btn { padding-left: 16px; padding-right: 16px; } .buy-search-panel { align-items: stretch; background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; box-shadow: 0 16px 40px rgba(24, 35, 57, 0.09); display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr 1.2fr 124px; min-height: 76px; overflow: hidden; } .buy-search-panel .search-field { padding: 16px 20px; } .buy-search-panel .search-field:first-child strong { color: #526171; font-weight: 800; } .buy-search-button { align-items: center; align-self: center; background: #14223a; border: 0; border-radius: 7px; color: #ffffff; display: flex; font-size: 13px; font-weight: 900; gap: 11px; height: 52px; justify-content: center; margin: 12px 12px 12px 0; } .buy-search-button svg { font-size: 22px; } .save-search { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 7px; color: #14223a; cursor: pointer; display: flex; font-size: 13px; font-weight: 900; gap: 11px; min-height: 72px; justify-content: center; padding: 0 16px; text-align: center; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .save-search span { line-height: 1.2; } .save-search svg { color: #526171; font-size: 20px; transform-origin: 50% 4px; transition: color 0.2s ease; } .save-search:hover { border-color: #c3ccd8; } .save-search.saved { background: #eafaf1; border-color: #10a15e; color: #0c7d49; box-shadow: 0 0 0 3px rgba(16, 161, 94, 0.14); } .save-search.saved svg { color: #10a15e; animation: bell-ring 0.7s ease; } @keyframes bell-ring { 0% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } 100% { transform: rotate(0); } } /* Interaktywna wyszukiwarka (Kup) */ .buy-search-panel { overflow: visible; position: relative; } .city-field { align-items: center; background: #ffffff; border-right: 1px solid #e3e9f0; border-radius: 8px 0 0 8px; display: flex; gap: 14px; min-width: 0; padding: 14px 20px; position: relative; } .city-field > svg { color: #8793a3; flex: 0 0 auto; font-size: 25px; } .city-input-wrap { display: flex; flex: 1; flex-direction: column; min-width: 0; } .city-input-wrap small { color: #8793a3; font-size: 12px; font-weight: 800; } .city-input-wrap input { background: transparent; border: 0; color: #14223a; font-size: 14px; font-weight: 900; margin-top: 4px; min-width: 0; outline: none; padding: 0; width: 100%; } .city-input-wrap input::placeholder { color: #95a1b2; font-weight: 800; } .city-clear { background: #eef2f7; border: 0; border-radius: 50%; color: #526171; flex: 0 0 auto; font-size: 16px; font-weight: 900; height: 22px; line-height: 1; width: 22px; } .city-suggest { background: #ffffff; border: 1px solid #dce4ec; border-radius: 10px; box-shadow: 0 22px 50px rgba(24, 35, 57, 0.18); left: 8px; max-height: 328px; overflow: auto; padding: 6px; position: absolute; right: -32px; top: calc(100% + 8px); z-index: 60; } .city-suggest button { align-items: center; background: transparent; border: 0; border-radius: 7px; color: #14223a; display: flex; font-size: 14px; font-weight: 800; gap: 10px; padding: 10px 12px; text-align: left; width: 100%; } .city-suggest button:hover { background: #f1f6fb; } .city-suggest svg { color: #10a15e; font-size: 18px; } .filter-dd { display: flex; min-width: 0; position: relative; } .dd-trigger { align-items: center; display: flex; gap: 10px; justify-content: space-between; width: 100%; } .dd-trigger > span { display: flex; flex-direction: column; min-width: 0; } .dd-trigger > svg { color: #8793a3; flex: 0 0 auto; font-size: 20px; transition: transform 0.15s ease; } .filter-dd.open .dd-trigger > svg { transform: rotate(180deg); } .dd-trigger.has-value strong { color: #0b8f52; } .filter-pop { background: #ffffff; border: 1px solid #dce4ec; border-radius: 12px; box-shadow: 0 22px 50px rgba(24, 35, 57, 0.18); left: 0; min-width: 280px; padding: 16px; position: absolute; top: calc(100% + 8px); z-index: 60; } .filter-dd:last-of-type .filter-pop { left: auto; right: 0; } .pop-panel { display: grid; gap: 14px; } .pop-presets { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); } .pop-presets button { background: #f4f7fb; border: 1px solid #e3e9f0; border-radius: 7px; color: #14223a; font-size: 13px; font-weight: 800; min-height: 38px; padding: 0 10px; } .pop-presets button:hover { border-color: #10a15e; } .pop-presets button.active { background: #eaf8ef; border-color: #10a15e; color: #0b8f52; } .pop-range { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } .pop-range label { display: flex; flex-direction: column; gap: 6px; } .pop-range span { color: #526171; font-size: 12px; font-weight: 800; } .pop-range input { background: #ffffff; border: 1px solid #dce4ec; border-radius: 7px; color: #14223a; font-size: 14px; font-weight: 800; min-height: 40px; outline: none; padding: 0 12px; width: 100%; } .pop-range input:focus { border-color: #10a15e; } .room-choices { display: grid; gap: 8px; grid-template-columns: repeat(5, 1fr); } .room-choices button { background: #ffffff; border: 1px solid #dce4ec; border-radius: 7px; color: #14223a; font-size: 13px; font-weight: 900; min-height: 42px; } .room-choices button:hover { border-color: #10a15e; } .room-choices button.active { background: #10a15e; border-color: #10a15e; color: #ffffff; } .pop-clear { background: transparent; border: 0; color: #2d63c8; font-size: 13px; font-weight: 900; padding: 4px 0; text-align: left; } .range-inputs { align-items: center; display: grid; gap: 8px; grid-template-columns: 1fr auto 1fr; } .range-inputs input { background: #ffffff; border: 1px solid #dce4ec; border-radius: 6px; color: #14223a; font-size: 13px; font-weight: 800; min-height: 38px; outline: none; padding: 0 10px; width: 100%; } .range-inputs input:focus { border-color: #10a15e; } .range-inputs em { color: #95a1b2; font-style: normal; font-weight: 900; } .filter-muted { color: #95a1b2; font-size: 13px; font-weight: 800; margin: 0; } .room-pills button.active { background: #10a15e; border-color: #10a15e; box-shadow: none; color: #ffffff; } .results-head .filter-chip { background: #eaf2ff; border: 0; border-radius: 999px; color: #2d63c8; font-size: 12px; font-weight: 900; padding: 7px 12px; } .results-head .filter-chip:hover { background: #d9e7ff; } .results-head .clear-chip { background: transparent; border: 0; color: #c0392b; font-size: 12px; font-weight: 900; padding: 7px 8px; } .results-empty { align-items: center; background: #ffffff; border: 1px solid #e6ebf1; border-radius: 12px; display: grid; gap: 10px; justify-items: center; margin-top: 18px; padding: 54px 24px; text-align: center; } .results-empty svg { color: #b6c1d0; font-size: 40px; } .results-empty strong { color: #14223a; font-size: 17px; font-weight: 950; } .results-empty p { color: #6b7888; font-size: 14px; margin: 0; } .results-empty button { background: #10a15e; border: 0; border-radius: 8px; color: #ffffff; font-size: 13px; font-weight: 900; margin-top: 6px; min-height: 42px; padding: 0 22px; } /* Mega-panel wyszukiwania (Kup) */ .mega-search { position: relative; } .mega-bar { align-items: stretch; background: #ffffff; border: 1px solid #dce4ec; border-radius: 10px; box-shadow: 0 16px 40px rgba(24, 35, 57, 0.09); display: grid; grid-template-columns: minmax(275px, 1.35fr) minmax(245px, 1fr) minmax(170px, 0.88fr) minmax(170px, 0.88fr) minmax(150px, 0.72fr) minmax(230px, 1.1fr) minmax(145px, auto) 132px; min-height: 72px; } .mega-cell { display: flex; min-width: 0; position: relative; } .mega-cell > .mega-field, .mega-cell > .mega-more { flex: 1; width: 100%; } .mega-field.active, .mega-more.active { background: #f4f7fb; } .mega-field { align-items: center; background: transparent; border: 0; border-right: 1px solid #e9eef4; cursor: pointer; display: flex; gap: 12px; min-width: 0; padding: 13px 16px; text-align: left; } .mega-field > svg { color: #8793a3; flex: 0 0 auto; font-size: 23px; } .mega-field > span { display: flex; flex-direction: column; flex: 1; min-width: 0; } .mega-field small { color: #8793a3; font-size: 12px; font-weight: 800; } .mega-field strong { color: #14223a; font-size: 14px; font-weight: 900; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mega-field.has-value strong { color: #0b8f52; } .mega-field > .chevron, .mega-field > svg:last-child { color: #aab4c2; font-size: 18px; } .mega-clear { align-items: center; background: #eef2f7; border-radius: 50%; color: #526171; cursor: pointer; display: inline-flex; flex: 0 0 auto; font-size: 15px; font-weight: 900; height: 22px; justify-content: center; width: 22px; } .mega-more { align-items: center; background: transparent; border: 0; border-right: 1px solid #e9eef4; color: #14223a; cursor: pointer; display: flex; font-size: 13px; font-weight: 900; gap: 9px; padding: 0 16px; white-space: nowrap; } .mega-more svg { color: #526171; font-size: 20px; } .mega-more.has-value { color: #0b8f52; } .mega-more em { background: #10a15e; border-radius: 999px; color: #ffffff; font-size: 11px; font-style: normal; font-weight: 900; min-width: 18px; padding: 2px 5px; text-align: center; } .mega-search-btn { align-items: center; align-self: center; background: #10a15e; border: 0; border-radius: 8px; color: #ffffff; cursor: pointer; display: flex; font-size: 14px; font-weight: 900; gap: 10px; height: 52px; justify-content: center; margin: 10px 10px 10px 14px; padding: 0 20px; } .mega-search-btn svg { flex: 0 0 auto; height: 18px; stroke-width: 2.7; width: 18px; } .mega-footer { border-top: 1px solid #eef2f7; display: flex; justify-content: flex-end; padding: 12px 14px 4px; } .mega-clear-all { background: #ffffff; border: 1px solid #dce4ec; border-radius: 9px; color: #526171; cursor: pointer; font-size: 13px; font-weight: 900; min-height: 40px; padding: 0 18px; transition: border-color 0.15s ease, color 0.15s ease; } .mega-clear-all:hover { border-color: #c3ccd8; color: #14223a; } .mega-panel { background: #ffffff; border: 1px solid #dce4ec; border-radius: 12px; box-shadow: 0 28px 60px rgba(24, 35, 57, 0.2); display: grid; gap: 0; grid-template-columns: 1fr 1fr 1fr; left: 0; margin-top: 10px; position: absolute; right: 0; top: 100%; z-index: 70; } .mega-pop { background: #ffffff; border: 1px solid #dce4ec; border-radius: 12px; box-shadow: 0 28px 60px rgba(24, 35, 57, 0.2); left: 0; margin-top: 10px; position: absolute; top: 100%; z-index: 70; } .mega-pop-location { width: 400px; } .mega-pop-price { width: 360px; } .mega-pop-property { width: 280px; } .mega-pop-rooms, .mega-pop-market { width: 300px; } .mega-pop-more { width: 640px; } .mega-cell-more .mega-pop, .mega-cell:last-of-type .mega-pop { left: auto; right: 0; } .mega-pop .mega-col { border-right: 0; } .mega-col { border-right: 1px solid #eef2f7; display: flex; flex-direction: column; gap: 14px; padding: 22px; } .mega-col:last-child { border-right: 0; } .mega-col-label { color: #8793a3; font-size: 12px; font-weight: 900; letter-spacing: 0.02em; margin: 0; text-transform: none; } .mega-city-search { align-items: center; background: #f4f7fb; border: 1px solid #e3e9f0; border-radius: 9px; display: flex; gap: 10px; padding: 11px 14px; } .mega-city-search svg { color: #8793a3; font-size: 20px; } .mega-city-search input { background: transparent; border: 0; color: #14223a; font-size: 14px; font-weight: 700; outline: none; width: 100%; } .mega-suggest { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; } .mega-suggest button { align-items: center; background: transparent; border: 0; border-radius: 8px; color: #2c3a4f; cursor: pointer; display: flex; font-size: 13px; font-weight: 800; gap: 11px; padding: 10px 12px; text-align: left; } .mega-suggest button:hover { background: #f4f7fb; } .mega-suggest button svg { color: #8793a3; flex: 0 0 auto; font-size: 18px; } .mega-suggest button span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mega-suggest button strong { color: #14223a; font-size: 14px; font-weight: 900; } .mega-suggest button small { color: #8793a3; font-size: 12px; font-weight: 700; text-transform: capitalize; } .mega-city-pills { display: flex; flex-wrap: wrap; gap: 8px; } .mega-city-pills button { background: #ffffff; border: 1px solid #dce4ec; border-radius: 7px; color: #14223a; cursor: pointer; font-size: 13px; font-weight: 800; padding: 9px 14px; } .mega-city-pills button:hover { border-color: #10a15e; } .mega-city-pills button.active { background: #10a15e; border-color: #10a15e; color: #ffffff; } .mega-recent { display: flex; flex-direction: column; gap: 8px; } .mega-recent button { align-items: center; background: #f7f9fc; border: 0; border-radius: 8px; color: #2c3a4f; cursor: pointer; display: flex; font-size: 13px; font-weight: 800; gap: 10px; padding: 11px 14px; text-align: left; } .mega-recent button:hover { background: #eef3f9; } .mega-recent svg { color: #8793a3; font-size: 18px; } .mega-price-inputs { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } .mega-price-inputs label { display: flex; flex-direction: column; gap: 6px; } .mega-price-inputs span { color: #8793a3; font-size: 12px; font-weight: 800; } .mega-price-inputs input { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; color: #14223a; font-size: 16px; font-weight: 800; min-height: 46px; outline: none; padding: 0 14px; width: 100%; } .mega-price-inputs input:focus { border-color: #10a15e; } .dual-range { height: 28px; position: relative; } .dual-track { background: #e1e8f0; border-radius: 999px; height: 5px; left: 0; position: absolute; right: 0; top: 11px; } .dual-fill { background: #10a15e; border-radius: 999px; height: 5px; position: absolute; top: 11px; } .dual-range input[type='range'] { -webkit-appearance: none; appearance: none; background: none; height: 28px; left: 0; margin: 0; pointer-events: none; position: absolute; top: 0; width: 100%; } .dual-range input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background: #10a15e; border: 3px solid #ffffff; border-radius: 50%; box-shadow: 0 2px 6px rgba(16, 161, 94, 0.45); cursor: pointer; height: 22px; pointer-events: auto; width: 22px; } .dual-range input[type='range']::-moz-range-thumb { background: #10a15e; border: 3px solid #ffffff; border-radius: 50%; box-shadow: 0 2px 6px rgba(16, 161, 94, 0.45); cursor: pointer; height: 22px; pointer-events: auto; width: 22px; } .mega-price-presets { display: flex; flex-wrap: wrap; gap: 8px; } .mega-price-presets button { background: #ffffff; border: 1px solid #dce4ec; border-radius: 7px; color: #14223a; cursor: pointer; font-size: 13px; font-weight: 800; padding: 9px 14px; } .mega-price-presets button:hover { border-color: #10a15e; } .mega-price-presets button.active { background: #eaf8ef; border-color: #10a15e; color: #0b8f52; } .mega-property-options { display: grid; gap: 8px; } .mega-property-options button { background: #ffffff; border: 1px solid #dce4ec; border-radius: 7px; color: #14223a; cursor: pointer; font-size: 13px; font-weight: 850; min-height: 42px; padding: 0 14px; text-align: left; } .mega-property-options button:hover { border-color: #10a15e; } .mega-property-options button.active { background: #eaf8ef; border-color: #10a15e; color: #0b8f52; } .mega-apply { background: #10a15e; border: 0; border-radius: 9px; color: #ffffff; cursor: pointer; font-size: 14px; font-weight: 900; margin-top: auto; min-height: 48px; } .mega-more-grid { display: grid; gap: 14px 16px; grid-template-columns: 1fr 1fr; } .mega-select { display: flex; flex-direction: column; gap: 6px; } .mega-select span { color: #8793a3; font-size: 12px; font-weight: 800; } .mega-select select { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; color: #14223a; cursor: pointer; font-size: 13px; font-weight: 800; min-height: 44px; outline: none; padding: 0 12px; width: 100%; } .mega-select select:focus { border-color: #10a15e; } .mega-show-all { align-items: center; align-self: flex-start; background: transparent; border: 0; color: #0b8f52; cursor: pointer; display: flex; font-size: 13px; font-weight: 900; gap: 6px; margin-top: 4px; padding: 0; } .mega-show-all svg { font-size: 18px; } .mega-select .mega-more-input { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; color: #14223a; font-size: 13px; font-weight: 800; min-height: 44px; outline: none; padding: 0 12px; width: 100%; } .mega-select .mega-more-input:focus { border-color: #10a15e; } .mega-rooms-choices { display: flex; flex-wrap: wrap; gap: 8px; } .mega-rooms-choices button { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; color: #14223a; cursor: pointer; font-size: 14px; font-weight: 800; min-height: 44px; min-width: 52px; padding: 0 14px; } .mega-rooms-choices button:hover { border-color: #10a15e; } .mega-rooms-choices button.active { background: #10a15e; border-color: #10a15e; color: #ffffff; } .mega-market-choices { display: flex; flex-direction: column; gap: 4px; } .mega-check { align-items: center; border-radius: 8px; color: #14223a; cursor: pointer; display: flex; font-size: 14px; font-weight: 800; gap: 12px; padding: 11px 12px; } .mega-check:hover { background: #f4f7fb; } .mega-check input { accent-color: #10a15e; height: 18px; width: 18px; } .mega-more-actions { display: flex; gap: 12px; margin-top: 4px; } .mega-more-actions .mega-apply { flex: 1; margin-top: 0; } .mega-more-scroll { display: flex; flex-direction: column; gap: 22px; max-height: 62vh; overflow-y: auto; padding-right: 4px; } .mega-more-section { border-bottom: 1px solid #eef2f7; display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; } .mega-more-section:last-child { border-bottom: 0; padding-bottom: 0; } .mega-market-row { flex-direction: row; flex-wrap: wrap; gap: 8px; } .mega-market-row .mega-check { background: #f7f9fc; } .mega-reset { background: #ffffff; border: 1px solid #dce4ec; border-radius: 9px; color: #526171; cursor: pointer; font-size: 14px; font-weight: 900; min-height: 48px; padding: 0 20px; } .mega-reset:hover { border-color: #c3ccd8; } .quick-filter-row { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 225px)); margin-top: 22px; } .rent-quick-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } .quick-filter { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; display: flex; gap: 14px; min-height: 66px; padding: 12px 18px; text-align: left; } .quick-filter svg { color: #13a360; font-size: 23px; } .quick-filter:first-child svg { color: #ff8247; } .quick-filter:last-child svg { color: #f2a62b; } .rent-quick-row .quick-filter:nth-child(3) svg, .rent-quick-row .quick-filter:nth-child(4) svg { color: #546179; } .rent-quick-row .quick-filter:nth-child(5) svg { color: #263650; } .quick-filter strong, .quick-filter small { display: block; } .quick-filter strong { color: #14223a; font-size: 14px; font-weight: 950; } .quick-filter small { color: #657284; font-size: 12px; font-weight: 800; margin-top: 3px; } .buy-toolbar { align-items: center; display: flex; justify-content: flex-end; margin: 0; } .buy-results-zone { background: radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0) 32%), linear-gradient(180deg, #eef3f7 0%, #f5f8fb 100%); border-top: 1px solid #dbe4ed; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78); margin: 34px calc(50% - 50vw) 0; padding: 34px max(48px, calc((100vw - 1760px) / 2 + 48px)) 58px; position: relative; } .buy-results-zone::before { background: linear-gradient(90deg, rgba(16, 161, 94, 0), rgba(16, 161, 94, 0.72), rgba(16, 161, 94, 0)); content: ''; height: 2px; left: max(48px, calc((100vw - 1760px) / 2 + 48px)); position: absolute; right: max(48px, calc((100vw - 1760px) / 2 + 48px)); top: -1px; } .toolbar-actions { align-items: center; display: flex; gap: 24px; } .toolbar-actions label { align-items: center; color: #657284; display: flex; font-size: 13px; font-weight: 800; gap: 8px; } .toolbar-actions select { appearance: none; background: transparent; border: 0; color: #14223a; font-weight: 950; padding-right: 14px; } .sort-select { align-items: center; display: flex; gap: 10px; position: relative; } .sort-label { color: #657284; font-size: 13px; font-weight: 800; } .sort-trigger { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 9px; color: #14223a; cursor: pointer; display: flex; font-size: 13px; font-weight: 900; gap: 12px; justify-content: space-between; min-height: 44px; min-width: 230px; padding: 0 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .sort-trigger:hover { border-color: #b9c6d6; } .sort-select.open .sort-trigger { border-color: #10a15e; box-shadow: 0 0 0 3px rgba(16, 161, 94, 0.12); } .sort-trigger svg { color: #8793a3; font-size: 18px; transition: transform 0.2s ease; } .sort-select.open .sort-trigger svg { transform: rotate(180deg); } .sort-menu { background: #ffffff; border: 1px solid #dce4ec; border-radius: 11px; box-shadow: 0 22px 48px rgba(24, 35, 57, 0.18); display: flex; flex-direction: column; left: auto; min-width: 268px; padding: 7px; position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; } .sort-menu button { align-items: center; background: transparent; border: 0; border-radius: 8px; color: #2c3a4f; cursor: pointer; display: flex; font-size: 14px; font-weight: 800; gap: 12px; justify-content: space-between; padding: 11px 13px; text-align: left; } .sort-menu button:hover { background: #f4f7fb; } .sort-menu button.active { color: #10a15e; font-weight: 950; } .sort-menu button svg { color: #10a15e; flex: 0 0 auto; font-size: 18px; } .view-toggle { background: #ffffff; border: 1px solid #dce4ec; border-radius: 7px; display: flex; overflow: hidden; } .view-toggle button { align-items: center; background: transparent; border: 0; color: #657284; display: flex; font-size: 13px; font-weight: 900; gap: 8px; min-height: 44px; padding: 0 15px; } .view-toggle button.active { background: #ffffff; color: #14223a; } .buy-layout { align-items: start; display: grid; gap: 28px; grid-template-columns: 280px minmax(520px, 1fr) 480px; margin-top: 32px; } .buy-results-zone .buy-layout { margin-top: 0; } .buy-layout-results { grid-template-columns: minmax(520px, 1fr) 480px; } .filters-panel, .result-card, .map-card, .map-ai-card { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; } .filters-panel { padding: 18px 18px 22px; } .filters-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; } .filters-head strong { color: #14223a; font-size: 15px; font-weight: 950; } .filters-head button, .results-head button, .filter-group a { background: transparent; border: 0; color: #3875e8; font-size: 12px; font-weight: 900; padding: 0; text-decoration: none; } .filter-group { border-top: 1px solid #e6ebf1; padding: 16px 0; } .filter-group:first-of-type { border-top: 0; padding-top: 0; } .filter-group h3 { color: #14223a; font-size: 12px; font-weight: 950; margin: 0 0 13px; } .place-row { align-items: center; color: #526171; display: flex; font-size: 13px; font-weight: 800; justify-content: space-between; margin-bottom: 7px; } .place-row button { background: transparent; border: 0; color: #7e8ba0; font-size: 18px; line-height: 1; padding: 0; } .range-labels { align-items: center; color: #526171; display: flex; font-size: 12px; font-weight: 800; justify-content: space-between; margin-bottom: 15px; } .range-labels strong { color: #14223a; } .range-labels.muted strong, .range-labels.muted span { color: #a6b1bf; } .range-track { background: #10a15e; border-radius: 999px; height: 5px; position: relative; } .range-track span { background: #10a15e; border-radius: 50%; height: 13px; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 13px; } .room-pills { display: grid; gap: 8px; grid-template-columns: repeat(5, 1fr); } .room-pills button { background: #ffffff; border: 1px solid #dce4ec; border-radius: 5px; color: #14223a; font-size: 12px; font-weight: 900; min-height: 34px; } .room-pills button.selected { border-color: #10a15e; box-shadow: inset 0 0 0 1px #10a15e; color: #0b8f52; } .check-row { align-items: center; color: #526171; display: flex; font-size: 13px; font-weight: 800; gap: 9px; margin-top: 12px; } .check-row input { accent-color: #10a15e; height: 16px; margin: 0; width: 16px; } .more-filters { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 6px; color: #14223a; display: flex; font-size: 13px; font-weight: 950; gap: 10px; justify-content: center; min-height: 42px; width: 100%; } .results-column { min-width: 0; } .results-head { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; min-height: 44px; } .results-head h2 { color: #14223a; font-size: 16px; font-weight: 950; margin: 0 14px 0 0; } .results-head span { background: #eaf2ff; border-radius: 999px; color: #2d63c8; font-size: 12px; font-weight: 900; padding: 7px 12px; } .result-list { display: grid; gap: 12px; margin-top: 18px; } .result-card { display: grid; gap: 20px; grid-template-columns: 265px minmax(0, 1fr) 178px; min-height: 190px; overflow: hidden; padding: 0 18px 0 0; } .result-photo { background-size: cover; min-height: 190px; position: relative; } .result-photo.photo-2 { background-size: 300%; } .result-photo button { align-items: center; background: rgba(255, 255, 255, 0.9); border: 0; border-radius: 50%; color: #ffffff; display: grid; font-size: 25px; height: 36px; place-items: center; position: absolute; right: 14px; top: 14px; width: 36px; } .result-photo button svg { stroke: #ffffff; stroke-width: 2.4; } .new-photo-badge { background: #10a15e; border-radius: 4px; color: #ffffff; font-size: 11px; font-weight: 950; left: 13px; padding: 5px 8px; position: absolute; top: 13px; } .result-info { min-width: 0; padding: 21px 0 18px; } .tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .tag-row span { align-items: center; border-radius: 999px; display: inline-flex; font-size: 11px; font-weight: 950; gap: 4px; padding: 5px 9px; } .tag-row svg { font-size: 12px; } .hot-tag { background: #fff1e8; color: #ff6e2f; } .green-tag { background: #e9f8ef; color: #109759; } .result-info h3 { color: #14223a; font-size: 18px; line-height: 1.2; margin: 0 0 5px; } .result-info p, .result-info small { color: #526171; display: block; font-size: 13px; font-weight: 800; margin: 0; } .result-info small { margin-top: 8px; } .score-line { margin-top: 18px; } .score-line span { background: #fff7de; border-radius: 4px; color: #4f6c08; font-size: 12px; font-weight: 950; padding: 5px 8px; } .saving { color: #0c9556; display: block; font-size: 13px; margin-top: 9px; } .amenities-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 17px; } .amenities-row span { align-items: center; color: #526171; display: flex; font-size: 12px; font-weight: 850; gap: 6px; } .amenities-row svg { color: #718094; font-size: 15px; } .result-info em { color: #657284; display: block; font-size: 12px; font-style: normal; font-weight: 800; margin-top: 14px; } .result-side { align-items: end; display: grid; justify-items: end; padding: 22px 0 18px; } .result-side > strong { color: #14223a; font-size: 25px; font-weight: 950; } .result-side span { align-self: start; color: #657284; font-size: 12px; font-weight: 800; margin-top: 6px; } .result-side button { align-self: end; background: #0b9f5c; border: 0; border-radius: 6px; color: #ffffff; font-size: 13px; font-weight: 950; min-height: 44px; padding: 0 18px; } .rent-side { align-content: start; gap: 11px; grid-template-rows: auto auto; padding-top: 23px; } .rent-side button { align-items: center; align-self: start; background: transparent; border: 0; color: #718094; display: grid; font-size: 22px; height: auto; min-height: 0; padding: 0; place-items: center; } .rent-side button svg { stroke-width: 2.1; } .rent-side > strong { align-items: baseline; display: flex; gap: 4px; white-space: nowrap; } .rent-side > strong small { color: #526171; font-size: 13px; font-weight: 900; } .map-column { display: grid; gap: 18px; min-width: 0; position: sticky; top: 18px; } .map-card { overflow: hidden; padding: 0; } .satellite-map { background: #dbe5db; height: 595px; overflow: hidden; position: relative; } .satellite-map-clickable { cursor: pointer; } .satellite-tiles { height: 640px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 640px; } .satellite-tiles img { filter: saturate(0.92) contrast(1.02) brightness(1.04); height: 256px; position: absolute; width: 256px; } .satellite-map-shade { background: linear-gradient(180deg, rgba(242, 249, 245, 0.38), rgba(226, 239, 229, 0.22)), radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.44)); inset: 0; pointer-events: none; position: absolute; z-index: 1; } .map-current, .draw-area { align-items: center; background: #ffffff; border: 0; border-radius: 6px; box-shadow: 0 8px 20px rgba(24, 35, 57, 0.11); color: #14223a; display: flex; font-size: 12px; font-weight: 950; gap: 8px; min-height: 38px; padding: 0 13px; position: absolute; top: 18px; z-index: 3; } .map-current { left: 18px; } .map-current span { background: #10a15e; border-radius: 3px; height: 14px; width: 14px; } .draw-area { right: 18px; } .map-city { color: rgba(20, 34, 58, 0.92); font-size: 24px; font-weight: 950; left: 50%; position: absolute; top: 49%; transform: translate(-50%, -50%); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9); z-index: 3; } .map-price { background: #ffffff; border-radius: 999px; box-shadow: 0 6px 16px rgba(24, 35, 57, 0.1); color: #12a764; font-size: 12px; font-weight: 950; padding: 7px 12px; position: absolute; transform: translate(-50%, -50%); z-index: 3; } .map-price-center-label { z-index: 5; } .map-center-pin { background: #10a15e; border: 3px solid rgba(255, 255, 255, 0.96); border-radius: 50%; box-shadow: 0 10px 20px rgba(18, 34, 58, 0.2); height: 22px; position: absolute; transform: translate(-50%, -50%); width: 22px; z-index: 4; } .map-center-pin::after { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid #10a15e; content: ''; left: 50%; position: absolute; top: 100%; transform: translateX(-50%); } .map-zoom { bottom: 18px; box-shadow: 0 8px 20px rgba(24, 35, 57, 0.13); display: grid; position: absolute; right: 18px; z-index: 3; } .map-zoom button { background: #ffffff; border: 0; color: #526171; font-size: 22px; font-weight: 700; height: 42px; width: 42px; } .map-zoom button + button { border-top: 1px solid #dce4ec; } .map-attribution { background: rgba(255, 255, 255, 0.82); border-radius: 4px; bottom: 6px; color: #526171; font-size: 10px; font-weight: 800; left: 8px; padding: 3px 5px; position: absolute; text-decoration: none; z-index: 3; } .map-ai-card { padding: 24px; } .map-ai-card p { color: #526171; font-size: 13px; font-weight: 800; line-height: 1.45; margin: 14px 0 22px; } .map-ai-card button { align-items: center; background: #14223a; border: 0; border-radius: 6px; color: #ffffff; display: flex; font-size: 13px; font-weight: 950; gap: 10px; justify-content: center; min-height: 48px; width: 100%; } .guides-page { background: linear-gradient(180deg, #f8fafc 0%, #f3f7fb 100%); min-height: calc(100vh - 82px); padding-bottom: 42px; } .guides-container { margin: 0 auto; max-width: 1760px; padding: 0 48px; } .guides-hero { min-height: 320px; overflow: hidden; position: relative; } .guides-hero img { height: 100%; inset: 0; object-fit: cover; object-position: right center; position: absolute; width: 100%; } .guides-hero-shade { background: linear-gradient(180deg, rgba(248, 250, 252, 0) 74%, #f8fafc 100%), linear-gradient(90deg, #f8fafc 0%, rgba(248, 250, 252, 0.98) 34%, rgba(248, 250, 252, 0.62) 56%, rgba(248, 250, 252, 0.08) 92%); inset: 0; position: absolute; } .guides-hero-inner { min-height: 320px; position: relative; z-index: 1; } .guides-hero-inner > div { max-width: 720px; padding-top: 54px; } .guides-hero h1 { color: #14223a; font-size: clamp(44px, 4.3vw, 68px); line-height: 0.98; margin: 0; max-width: 660px; } .guides-hero p { color: #526171; font-size: 18px; font-weight: 750; line-height: 1.45; margin: 18px 0 0; max-width: 620px; } .guides-search { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; box-shadow: 0 14px 36px rgba(24, 35, 57, 0.08); display: grid; gap: 12px; grid-template-columns: 22px minmax(0, 1fr) 104px; margin-top: 28px; min-height: 56px; padding: 7px 8px 7px 18px; width: min(660px, 100%); } .guides-search svg { color: #718094; font-size: 20px; } .guides-search input { border: 0; color: #14223a; min-height: 42px; outline: none; padding: 0; } .guides-search input::placeholder { color: #9aa5b4; font-weight: 800; } .guides-search button { background: #0b9f5c; border: 0; border-radius: 6px; color: #ffffff; font-size: 13px; font-weight: 950; min-height: 42px; } .popular-links { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; } .popular-links span { color: #526171; font-size: 12px; font-weight: 900; } .popular-links a { color: #316fd8; font-size: 12px; font-weight: 850; text-decoration: none; } .guides-layout { align-items: start; display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr) 360px; margin-top: 22px; } .guides-main { min-width: 0; } .guides-section { margin-top: 0; } .guides-section + .guides-section { margin-top: 34px; } .guide-topic-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 14px; } .guide-topic-head h2, .quick-guides-card h2, .related-offers h2 { color: #14223a; font-size: 18px; line-height: 1.2; margin: 0; } .guide-topic-head > div { display: flex; gap: 8px; } .guide-topic-head button { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 50%; color: #526171; display: grid; height: 30px; place-items: center; width: 30px; } .guide-topic-head button:first-child svg { transform: rotate(90deg); } .guide-topic-head button:last-child svg { transform: rotate(-90deg); } .guide-topic-grid { display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); } .guide-topic-card, .article-card, .guide-ai-card, .quick-guides-card, .related-offers { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; } .guide-topic-card { display: grid; justify-items: center; min-height: 172px; padding: 22px 14px 18px; text-align: center; } .guide-topic-icon { align-items: center; color: #13a360; display: grid; font-size: 42px; height: 52px; place-items: center; } .guide-topic-icon.percent { color: #9b5cff; } .guide-topic-icon.key, .guide-topic-icon.paint { color: #ff8247; } .guide-topic-icon.chart { color: #3f7df1; } .guide-topic-icon.scale { color: #7867ed; } .guide-topic-card h3 { color: #14223a; font-size: 14px; font-weight: 950; line-height: 1.2; margin: 12px 0 0; } .guide-topic-card p { color: #526171; font-size: 12px; font-weight: 750; line-height: 1.35; margin: 8px 0 0; } .guide-topic-card small { align-self: end; color: #657284; font-size: 11px; font-weight: 850; margin-top: 18px; } .article-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .article-card { overflow: hidden; } .article-image { background-size: cover; height: 160px; position: relative; } .article-image::after { background: linear-gradient(180deg, rgba(20, 34, 58, 0.1), rgba(20, 34, 58, 0.36)); content: ""; inset: 0; position: absolute; } .article-image span { background: #315fc5; border-radius: 4px; color: #ffffff; font-size: 10px; font-weight: 950; left: 12px; padding: 5px 7px; position: absolute; top: 12px; z-index: 1; } .article-card:nth-child(2) .article-image span { background: #0b9f5c; } .article-card:nth-child(3) .article-image span { background: #f49a31; } .article-card:nth-child(4) .article-image span { background: #316fd8; } .article-body { padding: 18px; } .article-body h3 { color: #14223a; font-size: 17px; line-height: 1.25; margin: 0; } .article-body p { color: #526171; font-size: 13px; font-weight: 750; line-height: 1.42; margin: 10px 0 18px; } .article-body > div { align-items: center; color: #657284; display: flex; font-size: 11px; font-weight: 850; justify-content: space-between; } .article-body > div span:last-child { align-items: center; display: flex; gap: 5px; } .related-offers { background: linear-gradient(90deg, #f8fffb 0%, #eff7f2 100%); margin-top: 28px; padding: 20px; } .related-offers > p { color: #526171; font-size: 12px; font-weight: 800; margin: 5px 0 18px; } .related-offer-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .related-offer-grid article { background: #ffffff; border: 1px solid #dce4ec; border-radius: 7px; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 92px; min-height: 104px; overflow: hidden; padding: 14px 0 14px 14px; } .related-offer-grid h3 { color: #14223a; font-size: 12px; line-height: 1.2; margin: 0; } .related-offer-grid span { color: #526171; display: block; font-size: 11px; font-weight: 850; margin-top: 4px; } .related-offer-grid a { align-items: center; color: #0b9f5c; display: flex; font-size: 11px; font-weight: 950; gap: 6px; margin-top: 18px; text-decoration: none; } .related-offer-image { background-size: cover; border-radius: 6px 0 0 6px; min-height: 76px; } .guides-sidebar { display: grid; gap: 18px; position: sticky; top: 18px; } .guide-ai-card { background: linear-gradient(180deg, #f8fffb 0%, #eef8f3 100%); padding: 22px; } .guide-ai-card > p { color: #526171; font-size: 13px; font-weight: 750; line-height: 1.45; margin: 14px 0 16px; } .ai-question-box { background: #ffffff; border: 1px solid #dce4ec; border-radius: 7px; padding: 16px; } .ai-question-box strong { color: #14223a; display: block; font-size: 12px; font-weight: 900; line-height: 1.45; } .guide-ai-card > button { align-items: center; background: #0b9f5c; border: 0; border-radius: 6px; color: #ffffff; display: flex; font-size: 13px; font-weight: 950; justify-content: space-between; margin-top: 16px; min-height: 44px; padding: 0 18px; width: 100%; } .advisor-users { align-items: center; display: flex; gap: 12px; margin-top: 14px; } .advisor-users .avatar-row span { height: 24px; width: 24px; } .advisor-users small { color: #526171; font-size: 11px; font-weight: 850; } .quick-guides-card { padding: 22px; } .quick-guides-card > div { display: grid; gap: 2px; margin-top: 15px; } .quick-guides-card article { align-items: center; border-bottom: 1px solid #edf1f5; display: grid; gap: 12px; grid-template-columns: 34px minmax(0, 1fr) 18px; min-height: 64px; } .quick-guides-card article > span { align-items: center; background: #edf3ff; border-radius: 8px; color: #3f7df1; display: grid; font-size: 18px; height: 34px; place-items: center; width: 34px; } .quick-guides-card article:nth-child(2) > span { background: #f1edff; color: #9b5cff; } .quick-guides-card article:nth-child(3) > span { background: #fff4df; color: #f49a31; } .quick-guides-card article:nth-child(4) > span { background: #e9f8ef; color: #10a15e; } .quick-guides-card p { margin: 0; } .quick-guides-card strong { color: #14223a; display: block; font-size: 12px; font-weight: 950; } .quick-guides-card small { color: #526171; display: block; font-size: 11px; font-weight: 750; margin-top: 3px; } .quick-guides-card article > svg { color: #9aa5b4; transform: rotate(-90deg); } .quick-guides-card > button { align-items: center; background: #ffffff; border: 1px solid #0b9f5c; border-radius: 6px; color: #0b9f5c; display: flex; font-size: 12px; font-weight: 950; gap: 8px; justify-content: center; margin-top: 18px; min-height: 42px; width: 100%; } .add-page { background: linear-gradient(180deg, #f8fafc 0%, #f3f7fb 100%); min-height: calc(100vh - 82px); padding-bottom: 56px; } .add-container { margin: 0 auto; max-width: 1760px; padding: 0 48px; } .add-title { margin-top: 28px; } .add-title h1 { color: #14223a; font-size: 36px; line-height: 1.1; margin: 0; } .add-title h1 span { color: #10a15e; } .add-title p { color: #526171; font-size: 14px; font-weight: 750; margin: 8px 0 0; } .add-progress { align-items: center; display: grid; gap: 24px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 34px; max-width: 1120px; } .add-progress div { align-items: center; color: #657284; display: flex; font-size: 12px; font-weight: 950; gap: 10px; min-width: 0; position: relative; } .add-progress div:not(:last-child)::after { background: #d9e2ec; content: ""; height: 2px; left: calc(100% + 8px); position: absolute; top: 50%; transform: translateY(-50%); width: 16px; } .add-progress span { align-items: center; background: #eef3f8; border-radius: 50%; color: #657284; display: grid; flex: 0 0 auto; height: 28px; place-items: center; width: 28px; } .add-progress .active { color: #14223a; } .add-progress .active span { background: #10a15e; color: #ffffff; } .add-progress .completed { color: #14223a; } .add-progress .completed span { background: #10a15e; color: #ffffff; } .add-progress .completed span svg { font-size: 13px; } .add-layout { align-items: start; display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr) 360px; margin-top: 30px; } .add-form-column { display: grid; gap: 18px; min-width: 0; } .add-form-card, .listing-preview-card, .add-side-card, .add-footer-benefits { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; } .add-form-card { padding: 24px; } .add-form-card h2, .listing-preview-card h2, .add-side-card h2, .add-footer-benefits h2 { color: #14223a; font-size: 16px; line-height: 1.2; margin: 0 0 18px; } .add-three-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .add-field { display: grid; gap: 7px; min-width: 0; position: relative; } .add-field.full { margin-top: 18px; } .add-field > span, .add-field label { color: #14223a; font-size: 12px; font-weight: 950; } .required-star { color: #e11d48; } .optional-label { color: #5f6f83; } .add-field input, .add-field select, .editor-box textarea { background: #ffffff; border: 1px solid #dce4ec; border-radius: 6px; color: #14223a; min-height: 44px; padding: 12px 13px; width: 100%; } .add-field input::placeholder, .editor-box textarea::placeholder { color: #9aa5b4; } .add-field select { appearance: none; background: linear-gradient(45deg, transparent 50%, #7e8ba0 50%) calc(100% - 16px) 19px / 6px 6px no-repeat, linear-gradient(135deg, #7e8ba0 50%, transparent 50%) calc(100% - 12px) 19px / 6px 6px no-repeat, #ffffff; padding-right: 34px; } .add-field > small { bottom: 11px; color: #9aa5b4; font-size: 11px; font-weight: 800; position: absolute; right: 12px; } .input-with-suffix { position: relative; } .input-with-suffix em { color: #657284; font-size: 12px; font-style: normal; font-weight: 850; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } .input-with-suffix input { padding-right: 58px; } .editor-box { border: 1px solid #dce4ec; border-radius: 6px; overflow: hidden; position: relative; } .editor-toolbar { align-items: center; border-bottom: 1px solid #e3e9f0; display: flex; gap: 4px; min-height: 38px; padding: 0 9px; } .editor-toolbar button { align-items: center; background: transparent; border: 0; color: #526171; display: grid; font-size: 13px; font-weight: 950; height: 28px; place-items: center; width: 28px; } .editor-box textarea { border: 0; border-radius: 0; min-height: 128px; resize: vertical; } .editor-box small { bottom: 10px; color: #9aa5b4; font-size: 11px; font-weight: 800; position: absolute; right: 12px; } .add-checkbox-grid { display: grid; gap: 13px 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .add-checkbox-grid label { align-items: center; color: #526171; display: flex; font-size: 12px; font-weight: 800; gap: 8px; } .add-checkbox-grid input { accent-color: #10a15e; height: 15px; margin: 0; width: 15px; } .next-step-button { align-items: center; background: #0b9f5c; border: 0; border-radius: 6px; color: #ffffff; display: flex; font-size: 13px; font-weight: 950; gap: 10px; justify-content: center; margin-top: 22px; min-height: 46px; min-width: 190px; } .contact-actions { display: flex; justify-content: flex-end; } .back-step-button { background: #ffffff; border: 1px solid #dce4ec; border-radius: 6px; color: #3f4d60; font-size: 13px; font-weight: 900; min-height: 46px; min-width: 130px; } .add-location-card { padding-bottom: 18px; } .add-location-subtitle { color: #5f6f83; font-size: 12px; font-weight: 750; margin: -7px 0 18px; } .add-location-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .add-location-grid .add-field:nth-child(1) { grid-column: 1 / -1; } .add-location-grid .add-field:nth-child(2), .add-location-grid .add-field:nth-child(3) { grid-column: span 2; } .add-location-grid .add-field:nth-child(4) { grid-column: span 2; } .add-location-grid .add-field:nth-child(5), .add-location-grid .add-field:nth-child(6) { grid-column: span 1; } .add-location-map { background: linear-gradient(180deg, rgba(230, 239, 247, 0.75) 0%, rgba(237, 244, 250, 0.7) 100%), repeating-linear-gradient(0deg, rgba(166, 185, 203, 0.2) 0 1px, transparent 1px 38px), repeating-linear-gradient(90deg, rgba(166, 185, 203, 0.22) 0 1px, transparent 1px 40px), radial-gradient(circle at 30% 65%, rgba(113, 190, 155, 0.25) 0 24%, transparent 24%), radial-gradient(circle at 76% 36%, rgba(121, 199, 232, 0.24) 0 19%, transparent 19%), #edf3f8; border: 1px solid #dce4ec; border-radius: 8px; height: 390px; margin-top: 16px; position: relative; } .real-location-map { background: #dfe8f0; overflow: hidden; } .real-location-surface, .real-location-tiles { inset: 0; position: absolute; } .real-location-surface { cursor: grab; touch-action: none; } .real-location-surface:active { cursor: grabbing; } .real-location-tiles img { height: 256px; position: absolute; user-select: none; width: 256px; } .real-location-pin { cursor: grab; pointer-events: auto; position: absolute; touch-action: none; z-index: 3; } .real-location-pin:active { cursor: grabbing; } .real-location-label { pointer-events: none; position: absolute; white-space: nowrap; z-index: 4; } .real-location-pin-tool { align-items: center; background: rgba(255, 255, 255, 0.94); border: 1px solid #cfd8e3; border-radius: 6px; box-shadow: 0 8px 20px rgba(20, 34, 58, 0.12); color: #14223a; cursor: grab; display: grid; height: 34px; place-items: center; position: absolute; right: 12px; top: 86px; touch-action: none; width: 34px; z-index: 5; } .real-location-pin-tool:active { cursor: grabbing; } .real-location-pin-tool svg { color: #10a15e; font-size: 17px; } .real-location-zoom { background: #ffffff; border: 1px solid #cfd8e3; border-radius: 6px; box-shadow: 0 8px 20px rgba(20, 34, 58, 0.12); display: grid; overflow: hidden; position: absolute; right: 12px; top: 12px; z-index: 5; } .real-location-zoom button { background: #ffffff; border: 0; color: #14223a; font-size: 18px; font-weight: 950; height: 32px; width: 32px; } .real-location-zoom button + button { border-top: 1px solid #e1e7ef; } .real-location-attribution { background: rgba(255, 255, 255, 0.9); border-radius: 4px; bottom: 8px; color: #526171; font-size: 10px; font-weight: 800; padding: 3px 6px; position: absolute; right: 8px; text-decoration: none; z-index: 5; } .add-location-pin { align-items: center; background: #10a15e; border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 999px; color: #ffffff; display: grid; font-size: 18px; height: 36px; left: 54%; place-items: center; position: absolute; top: 49%; transform: translate(-50%, -50%); width: 36px; } .add-location-map-label { background: rgba(255, 255, 255, 0.93); border: 1px solid #d5dee8; border-radius: 999px; color: #3a4b60; font-size: 11px; font-weight: 850; left: 54%; padding: 4px 9px; position: absolute; top: calc(49% - 36px); transform: translateX(-50%); } .add-location-note { align-items: center; background: #f3fbf7; border: 1px solid #d8efe4; border-radius: 7px; color: #4f637a; display: flex; font-size: 11px; font-weight: 800; gap: 8px; margin: 14px 0 0; min-height: 42px; padding: 0 12px; } .add-location-note svg { color: #10a15e; font-size: 15px; } .add-location-actions { display: flex; justify-content: space-between; margin-top: 18px; } .add-step-title { margin-top: 0; } .add-step-title h1 { font-size: 30px; } .add-photos-card { padding: 24px; } .photo-upload-box { align-items: center; border: 1px dashed #cbd6e2; border-radius: 8px; color: #526171; cursor: pointer; display: grid; justify-items: center; min-height: 150px; padding: 28px 20px; text-align: center; } .photo-upload-box input { display: none; } .photo-upload-box svg { color: #536981; font-size: 28px; margin-bottom: 16px; } .photo-upload-box strong { color: #10a15e; font-size: 13px; font-weight: 950; } .photo-upload-box span { color: #536981; font-size: 12px; font-weight: 750; margin-top: 6px; } .photo-tip-note { align-items: center; background: #f3fbf7; border: 1px solid #d8efe4; border-radius: 7px; color: #4f637a; display: flex; gap: 12px; margin: 20px 0 28px; min-height: 72px; padding: 14px 16px; } .photo-tip-note > svg { background: #dff7eb; border-radius: 999px; color: #10a15e; flex: 0 0 auto; font-size: 34px; padding: 8px; } .photo-tip-note span, .photo-tip-note strong, .photo-tip-note small { display: block; } .photo-tip-note strong { color: #14223a; font-size: 12px; font-weight: 950; } .photo-tip-note small { color: #526171; font-size: 11px; font-weight: 750; margin-top: 4px; } .photo-tour-card { background: #f8fbff; border: 1px solid #dbe7f3; border-radius: 10px; margin: 16px 0 22px; padding: 14px; } .photo-tour-head { align-items: center; display: flex; gap: 10px; margin-bottom: 10px; } .photo-tour-badge { align-items: center; background: #e6f1ff; border: 1px solid #b8d3f5; border-radius: 999px; color: #245593; display: inline-flex; font-size: 12px; font-weight: 900; justify-content: center; min-width: 50px; padding: 4px 10px; } .photo-tour-head strong, .photo-tour-head small { display: block; } .photo-tour-head strong { color: #13243d; font-size: 13px; } .photo-tour-head small { color: #5f748a; font-size: 12px; margin-top: 2px; } .photo-tour-input { margin-top: 2px; } .photo-tour-input small { color: #5f748a; } .photo-tour-actions { display: flex; gap: 8px; margin-top: 8px; } .photo-tour-provider { color: #1f4f88; font-size: 12px; font-weight: 800; margin: 10px 0 0; } .photo-tour-error { color: #b3261e; font-size: 12px; font-weight: 800; margin: 10px 0 0; } .added-photos-head h3 { color: #14223a; font-size: 14px; font-weight: 950; margin: 0 0 16px; } .added-photos-grid { display: grid; gap: 14px; grid-template-columns: repeat(5, minmax(0, 1fr)); } .added-photo { aspect-ratio: 1.28; background: #f4f7fa; border-radius: 8px; cursor: grab; overflow: hidden; position: relative; } .added-photo.dragging { cursor: grabbing; opacity: 0.55; } .added-photo.drop-target { box-shadow: 0 0 0 3px rgba(16, 161, 94, 0.35); } .added-photo img { display: block; height: 100%; object-fit: cover; width: 100%; } .main-photo-badge { background: #10a15e; border-radius: 999px; color: #ffffff; font-size: 10px; font-weight: 950; left: 8px; padding: 5px 8px; position: absolute; top: 8px; } .remove-photo-button { align-items: center; background: rgba(255, 255, 255, 0.92); border: 0; border-radius: 999px; color: #536171; display: grid; font-size: 18px; font-weight: 950; height: 26px; place-items: center; position: absolute; right: 8px; top: 8px; width: 26px; } .photo-order-controls { bottom: 8px; display: flex; gap: 6px; left: 8px; position: absolute; } .photo-order-controls button { align-items: center; background: rgba(20, 34, 58, 0.82); border: 0; border-radius: 999px; color: #ffffff; display: grid; font-size: 20px; font-weight: 950; height: 28px; place-items: center; width: 28px; } .photo-order-controls button:disabled { cursor: not-allowed; opacity: 0.42; } .empty-photos-box { align-items: center; background: #f8fbfd; border: 1px solid #e0e8f0; border-radius: 8px; color: #526171; display: flex; gap: 10px; min-height: 64px; padding: 14px; } .empty-photos-box svg { color: #10a15e; font-size: 22px; } .empty-photos-box p { font-size: 12px; font-weight: 800; line-height: 1.4; margin: 0; } .sort-photos-button { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 6px; color: #3f4d60; display: inline-flex; font-size: 12px; font-weight: 950; gap: 8px; margin-top: 18px; min-height: 42px; padding: 0 18px; } .photos-actions { margin-top: 16px; } .photos-actions .next-step-button { min-width: 320px; } .add-extra-card { overflow: hidden; padding: 0; } .extra-section { border-bottom: 1px solid #e6edf3; padding: 22px 24px; } .extra-section:last-of-type { border-bottom: 0; } .extra-section h2 { margin-bottom: 18px; } .extra-details-grid { display: grid; gap: 18px 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .extra-option-grid { display: grid; gap: 12px 16px; } .media-option-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .amenities-option-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .extra-option-grid label { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 6px; color: #42536a; display: flex; font-size: 12px; font-weight: 850; gap: 10px; min-height: 42px; padding: 0 12px; } .extra-option-grid label.selected { background: #f1fbf6; border-color: #bfead3; box-shadow: 0 0 0 2px rgba(16, 161, 94, 0.08); } .extra-option-grid input { accent-color: #10a15e; height: 14px; margin: 0; width: 14px; } .extra-option-grid svg { color: #5f7289; flex: 0 0 auto; font-size: 16px; } .extra-option-grid label.selected svg, .extra-option-grid label.selected input + svg { color: #10a15e; } .media-billing-panel { border-top: 1px solid #e6edf3; margin-top: 16px; padding-top: 16px; } .media-billing-panel h3 { color: #2b4058; font-size: 14px; margin: 0 0 12px; } .media-billing-grid { display: grid; gap: 10px; } .media-billing-row { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) 280px; } .media-billing-controls { display: grid; gap: 8px; } .media-billing-row span { color: #33475f; font-size: 13px; font-weight: 800; } .media-billing-row select { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; color: #22364e; font-size: 13px; font-weight: 800; min-height: 40px; padding: 0 12px; } .media-billing-row input { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; color: #22364e; font-size: 13px; font-weight: 800; min-height: 38px; padding: 0 12px; } .amenities-option-grid label.selected span { color: #173c2c; } .extra-actions { margin: 26px 24px 24px; } .extra-actions .next-step-button { min-width: 300px; } .final-preview-layout { grid-template-columns: minmax(0, 1fr) 320px; } .final-preview-card { overflow: hidden; padding: 18px; } .final-preview-main { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); } .final-gallery { position: relative; } .free-listing-badge { background: #10a15e; border-radius: 6px 6px 0 0; color: #ffffff; display: inline-flex; font-size: 11px; font-weight: 950; left: 0; padding: 9px 16px; position: absolute; top: 0; z-index: 2; } .final-main-photo { aspect-ratio: 1.72; background-position: center; background-size: cover; border-radius: 8px; overflow: hidden; position: relative; } .final-main-photo::after { background: linear-gradient(180deg, rgba(20, 34, 58, 0.05), rgba(20, 34, 58, 0.18)); content: ''; inset: 0; position: absolute; } .final-main-photo button { align-items: center; background: rgba(255, 255, 255, 0.92); border: 0; border-radius: 50%; color: #2f4056; display: grid; font-size: 30px; font-weight: 850; height: 36px; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); width: 36px; z-index: 2; } .final-main-photo button:first-of-type { left: 18px; } .final-main-photo button:last-of-type { right: 18px; } .final-main-photo span { background: rgba(20, 34, 58, 0.82); border-radius: 999px; color: #ffffff; font-size: 11px; font-weight: 950; padding: 7px 10px; position: absolute; right: 14px; top: 14px; z-index: 2; } .final-thumbnails { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding: 3px 3px 6px; } .final-thumbnails button { aspect-ratio: 1.25; background-position: center; background-size: cover; border: 0; border-radius: 7px; flex: 0 0 96px; opacity: 0.86; overflow: hidden; position: relative; } .final-thumbnails button span { background: rgba(18, 34, 58, 0.9); border-radius: 999px; bottom: 6px; color: #ffffff; font-size: 10px; font-weight: 900; left: 6px; line-height: 1; padding: 5px 7px; position: absolute; } .final-thumbnails button.active { box-shadow: 0 0 0 3px #10a15e; opacity: 1; } .final-preview-info h2 { color: #14223a; font-size: 22px; font-weight: 950; margin: 0 0 6px; } .final-location { color: #526171; font-size: 13px; font-weight: 800; margin: 0 0 18px; } .final-preview-info > strong { color: #10a15e; display: block; font-size: 26px; font-weight: 950; margin-bottom: 18px; } .final-preview-info > strong small { color: #526171; font-size: 12px; font-weight: 850; } .final-rent-deposit { color: #3b4e66; display: block; font-size: 13px; font-weight: 850; margin: -10px 0 18px; } .final-meta-row { border-bottom: 1px solid #e4ebf2; display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 20px; } .final-meta-row span { color: #405269; display: grid; font-size: 12px; font-weight: 850; gap: 5px; } .final-meta-row svg { color: #5f7289; font-size: 17px; } .final-meta-row small { font-size: 11px; font-weight: 800; } .final-description-block, .final-details-block { border-bottom: 1px solid #e4ebf2; padding: 20px 0; } .final-details-block { border-bottom: 0; padding-bottom: 0; } .final-description-block h3, .final-details-block h3, .final-features h3 { color: #14223a; font-size: 14px; font-weight: 950; margin: 0 0 12px; } .final-description-block p { color: #3f4d60; font-size: 13px; font-weight: 750; line-height: 1.55; margin: 0; white-space: pre-wrap; } .final-details-block dl { display: grid; gap: 10px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; } .final-details-block div { display: grid; gap: 4px; grid-template-columns: 120px minmax(0, 1fr); } .final-details-block dt { color: #6a7b91; font-size: 11px; font-weight: 850; } .final-details-block dd { color: #24354c; font-size: 11px; font-weight: 900; margin: 0; } .final-features { border-top: 1px solid #e4ebf2; margin-top: 22px; padding-top: 20px; } .final-features > div { display: flex; flex-wrap: wrap; gap: 10px 12px; } .final-features span { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 6px; color: #405269; display: inline-flex; font-size: 12px; font-weight: 850; gap: 8px; min-height: 36px; padding: 0 14px; } .final-features svg { color: #5f7289; font-size: 15px; } .final-actions { border-top: 1px solid #e4ebf2; margin: 28px -18px -18px; padding: 24px 18px; } .final-actions .next-step-button { min-width: 300px; } .final-side-card { padding: 22px; } .next-list article > span { background: #e9f8ef; color: #10a15e; } .free-publish-card { align-items: center; background: #f3fbf7; border: 1px solid #d8efe4; border-radius: 8px; display: grid; gap: 12px; grid-template-columns: 36px minmax(0, 1fr); padding: 18px; } .free-publish-card > span { align-items: center; background: #dff7eb; border-radius: 50%; color: #10a15e; display: grid; font-size: 18px; height: 36px; place-items: center; width: 36px; } .free-publish-card p { margin: 0; } .free-publish-card strong, .free-publish-card small { display: block; } .free-publish-card strong { color: #0b9f5c; font-size: 13px; font-weight: 950; } .free-publish-card small { color: #526171; font-size: 11px; font-weight: 750; line-height: 1.45; margin-top: 4px; } .photos-preview-image { background-position: 55% 56%; background-size: 170%; height: 300px; } .preview-meta-icons { display: grid; gap: 10px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; } .preview-meta-icons span { align-items: center; display: inline-flex; gap: 6px; } .preview-meta-icons svg { color: #536981; font-size: 15px; } .secure-note { align-items: center; color: #526171; display: flex; font-size: 12px; font-weight: 800; gap: 8px; margin: 2px 0 0; } .secure-note svg { color: #10a15e; font-size: 17px; } .add-sidebar { display: grid; gap: 18px; position: sticky; top: 18px; } .listing-preview-card, .add-side-card { padding: 18px; } .preview-image { background-position: 48% 58%; background-size: 190%; border-radius: 7px; height: 210px; overflow: hidden; position: relative; } .preview-image button { align-items: center; background: rgba(255, 255, 255, 0.85); border: 0; border-radius: 50%; color: #ffffff; display: grid; font-size: 22px; height: 34px; place-items: center; position: absolute; right: 12px; top: 12px; width: 34px; } .preview-image span { align-items: center; background: rgba(20, 34, 58, 0.78); border-radius: 999px; bottom: 12px; color: #ffffff; display: flex; font-size: 11px; font-weight: 950; gap: 5px; padding: 6px 9px; position: absolute; right: 12px; } .preview-body { padding: 17px 0 13px; } .preview-body p { color: #14223a; font-size: 13px; font-weight: 950; margin: 0 0 8px; } .preview-body strong { color: #10a15e; display: block; font-size: 22px; font-weight: 950; margin-bottom: 8px; } .preview-body strong small { color: #526171; font-size: 11px; font-weight: 850; } .preview-rent-deposit { color: #3b4e66; display: block; font-size: 12px; font-weight: 850; margin: -4px 0 8px; } .preview-meta { color: #526171; display: flex; flex-wrap: wrap; font-size: 11px; font-weight: 850; gap: 9px; margin-bottom: 9px; } .preview-body > span { align-items: center; color: #526171; display: inline-flex; font-size: 11px; font-weight: 850; gap: 5px; margin: 0 11px 8px 0; } .preview-description { color: #526171 !important; font-size: 11px !important; font-weight: 750 !important; line-height: 1.35; } .preview-body em { background: #e9f8ef; border-radius: 999px; color: #0b9f5c; display: inline-block; font-size: 11px; font-style: normal; font-weight: 950; padding: 5px 8px; } .preview-button, .help-card button { background: #ffffff; border: 1px solid #dce4ec; border-radius: 6px; color: #0b9f5c; font-size: 12px; font-weight: 950; min-height: 40px; width: 100%; } .tips-list { display: grid; gap: 18px; } .tips-list article, .help-card > div, .add-footer-benefits article { display: grid; gap: 12px; grid-template-columns: 32px minmax(0, 1fr); } .tips-list article > span, .help-card > div > span, .add-footer-benefits article > span { align-items: center; background: #fff4df; border-radius: 50%; color: #d28b20; display: grid; font-size: 17px; height: 32px; place-items: center; width: 32px; } .tips-list article:nth-child(2) > span, .add-footer-benefits article:nth-child(2) > span { background: #edf3ff; color: #3f7df1; } .tips-list article:nth-child(3) > span, .add-footer-benefits article:nth-child(3) > span { background: #f6f0dc; color: #d39a37; } .tips-list article:nth-child(4) > span, .add-footer-benefits article:nth-child(4) > span { background: #e9f8ef; color: #10a15e; } .tips-list p, .help-card p, .add-footer-benefits p { margin: 0; } .tips-list strong, .help-card strong, .add-footer-benefits strong { color: #14223a; display: block; font-size: 12px; font-weight: 950; } .tips-list small, .help-card small, .add-footer-benefits small { color: #526171; display: block; font-size: 11px; font-weight: 750; line-height: 1.35; margin-top: 3px; } .help-card > p { color: #526171; font-size: 12px; font-weight: 800; margin: -4px 0 18px; } .help-card > div { margin-bottom: 16px; } .help-card > div > span { background: #e8f8f7; color: #209f96; } .help-card > div:nth-of-type(2) > span { background: #e9f8ef; color: #10a15e; } .help-card button { color: #14223a; margin-top: 3px; } .add-footer-benefits { margin-top: 32px; padding: 22px; } .add-footer-benefits > div { display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; } .sell-page { background: #f7fafc; min-height: calc(100vh - 82px); padding-bottom: 34px; } .sell-hero { min-height: 372px; overflow: hidden; position: relative; } .sell-hero-photo { height: 100%; inset: 0; object-fit: cover; object-position: right center; position: absolute; width: 100%; } .sell-hero-gradient { background: linear-gradient(180deg, rgba(247, 250, 252, 0) 72%, #f7fafc 100%), linear-gradient(90deg, #f8fbfd 0%, rgba(248, 251, 253, 0.99) 38%, rgba(248, 251, 253, 0.66) 58%, rgba(248, 251, 253, 0.05) 88%); inset: 0; position: absolute; } .sell-hero-inner { margin: 0 auto; max-width: 1760px; min-height: 372px; padding: 0 48px; position: relative; } .sell-copy { max-width: 580px; padding-top: 46px; position: relative; z-index: 1; } .sell-copy h1 { color: #14223a; font-size: clamp(36px, 3.2vw, 58px); line-height: 1.03; margin: 0; } .sell-copy h1 span { color: #10a15e; display: block; } .sell-copy p { color: #526171; font-size: 15px; font-weight: 800; margin: 14px 0 0; } .sell-benefit-row { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; margin-top: 32px; } .sell-benefit-row span { align-items: center; color: #14223a; display: flex; font-size: 12px; font-weight: 900; gap: 6px; } .sell-benefit-row svg { color: #10a15e; font-size: 16px; } .sell-primary { background: #0b9f5c; border: 0; border-radius: 6px; color: #ffffff; display: block; font-size: 14px; font-weight: 950; margin-top: 28px; min-height: 48px; min-width: 240px; padding: 0 22px; } .sell-copy > small { color: #657284; display: block; font-size: 11px; font-weight: 800; margin: 9px 0 0 42px; } .sell-container { margin: 0 auto; max-width: 1760px; padding: 0 48px; } .sell-section { margin-top: 32px; } .sell-section h2, .sell-info-card h2, .sell-valuation-card h2, .sell-channels-card h2, .sell-feature-strip h2 { color: #14223a; font-size: 18px; line-height: 1.2; margin: 0; } .sell-steps { display: grid; gap: 38px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 24px; } .sell-step { display: grid; justify-items: center; min-width: 0; position: relative; text-align: center; } .sell-step:not(:last-child)::after { background: #cfd9e5; content: ""; height: 2px; left: calc(50% + 40px); position: absolute; top: 28px; width: calc(100% - 42px); } .sell-step > span { align-items: center; background: #eaf8ef; border: 1px solid #c6ecd8; border-radius: 50%; color: #10a15e; display: grid; font-size: 25px; height: 56px; place-items: center; width: 56px; } .sell-step:nth-child(2) > span, .sell-step:nth-child(3) > span { background: #f2edff; border-color: #d9ceff; color: #7a61f0; } .sell-step:nth-child(4) > span { background: #edf6ff; border-color: #d5e9ff; color: #3b86e8; } .sell-step strong { color: #14223a; font-size: 12px; font-weight: 950; margin-top: 13px; } .sell-step p { color: #526171; font-size: 11px; font-weight: 750; line-height: 1.35; margin: 6px 0 0; max-width: 150px; } .sell-card-grid { display: grid; gap: 18px; grid-template-columns: 1.02fr 1fr 1fr; margin-top: 38px; } .sell-info-card, .sell-valuation-card, .sell-channels-card, .sell-feature-strip, .testimonial-card, .sell-bottom-cta { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; } .sell-info-card, .sell-valuation-card, .sell-channels-card { min-height: 276px; padding: 22px; } .sell-reasons, .sell-channel-list { display: grid; gap: 16px; margin-top: 18px; } .sell-reasons div, .sell-channel-list div { display: grid; gap: 12px; grid-template-columns: 28px minmax(0, 1fr); } .sell-reasons span, .sell-channel-list span { align-items: center; border-radius: 50%; display: grid; font-size: 17px; height: 26px; place-items: center; width: 26px; } .sell-reasons div:nth-child(1) span, .sell-channel-list div:nth-child(1) span { background: #e9f8ef; color: #10a15e; } .sell-reasons div:nth-child(2) span, .sell-channel-list div:nth-child(2) span { background: #edf3ff; color: #3f7df1; } .sell-reasons div:nth-child(3) span, .sell-channel-list div:nth-child(3) span { background: #ffeef4; color: #f35b8f; } .sell-reasons div:nth-child(4) span, .sell-channel-list div:nth-child(4) span { background: #f1edff; color: #7867ed; } .sell-reasons div:nth-child(5) span, .sell-channel-list div:nth-child(5) span { background: #fff4df; color: #d28b20; } .sell-reasons p, .sell-channel-list p { margin: 0; } .sell-reasons strong, .sell-channel-list strong { color: #14223a; display: block; font-size: 12px; font-weight: 950; } .sell-reasons small, .sell-channel-list small { color: #526171; display: block; font-size: 11px; font-weight: 750; line-height: 1.35; margin-top: 2px; } .sell-valuation-card > p { color: #526171; font-size: 11px; font-weight: 800; margin: 7px 0 17px; } .valuation-input { border: 1px solid #dce4ec; border-radius: 6px; color: #9aa5b4; font-size: 12px; font-weight: 800; min-height: 48px; padding: 15px 16px; } .sell-valuation-card button { background: #0b9f5c; border: 0; border-radius: 6px; color: #ffffff; font-size: 12px; font-weight: 950; margin-top: 12px; min-height: 42px; width: 100%; } .valuation-result { background: #f8fbfd; border: 1px solid #e2e8ef; border-radius: 6px; margin-top: 18px; min-height: 120px; padding: 16px; position: relative; } .valuation-result span, .valuation-result small, .valuation-result em { color: #526171; display: block; font-size: 11px; font-style: normal; font-weight: 800; } .valuation-result strong { color: #10a15e; display: block; font-size: 24px; font-weight: 950; margin-top: 6px; } .mini-building { bottom: 18px; display: flex; gap: 5px; position: absolute; right: 18px; } .mini-building span { background: #cdeedc; border: 2px solid #83d9a9; height: 48px; width: 28px; } .mini-building span:first-child { height: 34px; margin-top: 14px; } .valuation-page { background: #f8fbfd; color: #14223a; min-height: calc(100vh - 82px); padding: 28px 0 24px; } .valuation-shell { margin: 0 auto; max-width: 1900px; padding: 0 38px; } .valuation-breadcrumb { display: inline-flex !important; margin-bottom: 22px; } .valuation-breadcrumb button, .valuation-breadcrumb a { background: transparent; border: 0; color: #768398; font-size: 12px; font-weight: 800; padding: 0; } .valuation-breadcrumb button.active, .valuation-breadcrumb a.active { color: #14223a; } .valuation-title h1 { font-size: 36px; font-weight: 950; letter-spacing: 0; line-height: 1; margin: 0; } .valuation-title p { color: #526171; font-size: 15px; font-weight: 800; margin: 12px 0 0; } .valuation-title.result h1 { align-items: center; display: flex; gap: 12px; } .valuation-title.result svg { background: #0b9f5c; border-radius: 50%; color: #ffffff; font-size: 24px; padding: 5px; } .valuation-progress { align-items: start; display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 30px 0 38px; } .valuation-progress button { align-items: start; background: transparent; border: 0; color: #7a8798; display: grid; gap: 9px; grid-template-columns: 34px minmax(0, 1fr); min-height: 54px; min-width: 0; padding: 0; position: relative; text-align: left; } .valuation-progress button:not(:last-child)::after { background: #dfe7ef; content: ""; height: 1px; left: 46px; position: absolute; right: -20px; top: 16px; } .valuation-progress button.active:not(:last-child)::after { background: #b8e8ce; } .valuation-progress.complete button:not(:last-child)::after { background: #0b9f5c; height: 2px; } .valuation-progress span { align-items: center; background: #e9eef5; border-radius: 50%; color: #516072; display: grid; flex: 0 0 34px; font-size: 12px; font-weight: 950; height: 34px; place-items: center; position: relative; z-index: 1; } .valuation-progress strong { color: inherit; font-size: 12px; font-weight: 950; line-height: 1.2; overflow: hidden; position: relative; text-overflow: ellipsis; white-space: normal; z-index: 1; } .valuation-progress button.active { color: #0b9f5c; } .valuation-progress button.active span { background: #0b9f5c; color: #ffffff; } .valuation-layout { align-items: start; display: grid; gap: 40px; grid-template-columns: minmax(0, 1.25fr) minmax(520px, 700px); } .valuation-result-layout { align-items: start; display: grid; gap: 64px; grid-template-columns: minmax(0, 1fr) minmax(360px, 560px); } .valuation-result-main, .valuation-result-sidebar { display: grid; gap: 22px; } .valuation-result-hero { align-items: center; display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr) 230px; min-height: 306px; padding: 36px 42px; } .valuation-result-hero span, .valuation-result-hero em, .valuation-result-hero p { color: #526171; display: block; font-size: 13px; font-style: normal; font-weight: 850; margin: 0; } .valuation-result-hero span { color: #27364d; font-size: 16px; font-weight: 950; } .valuation-result-hero strong { color: #0b9f5c; display: block; font-size: 46px; font-weight: 950; letter-spacing: 0; line-height: 1; margin: 38px 0 24px; } .valuation-result-hero em { color: #27364d; font-size: 18px; font-weight: 950; } .valuation-result-hero p { line-height: 1.65; margin-top: 28px; max-width: 900px; } .valuation-house-graphic.result { height: 180px; } .valuation-house-graphic.result span { font-size: 72px; height: 142px; width: 142px; } .valuation-house-graphic.result i:first-of-type { height: 40px; width: 40px; } .valuation-house-graphic.result i:last-of-type { height: 70px; width: 62px; } .valuation-result-details { padding: 28px 30px; } .valuation-result-details h2 { color: #27364d; font-size: 16px; font-weight: 950; margin: 0 0 24px; } .valuation-result-details > div { display: grid; gap: 26px 36px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .valuation-result-details article { align-items: start; display: grid; gap: 12px; grid-template-columns: 34px minmax(0, 1fr); } .valuation-result-details article > span, .valuation-next-card button > span { align-items: center; background: #e7f8ef; border-radius: 50%; color: #0b9f5c; display: grid; font-size: 17px; height: 34px; place-items: center; width: 34px; } .valuation-result-details p { display: grid; gap: 4px; margin: 0; } .valuation-result-details strong { color: #526171; font-size: 12px; font-weight: 850; } .valuation-result-details small { color: #27364d; font-size: 12px; font-weight: 950; line-height: 1.45; } .valuation-result-actions { align-items: center; border-top: 1px solid #e7edf3; display: grid; gap: 18px; grid-template-columns: auto 1fr auto; margin: 28px -30px -8px; padding: 22px 30px 0; } .valuation-result-actions .valuation-back:first-child svg { transform: rotate(180deg); } .valuation-result-actions .valuation-back:nth-child(2) { justify-self: end; } .valuation-result-actions .valuation-back:nth-child(2) { gap: 12px; min-width: 226px; } .valuation-result-actions .valuation-back:nth-child(2) svg { flex: 0 0 auto; margin-right: 2px; } .valuation-summary-card, .valuation-market-card, .valuation-next-card, .valuation-info-card { padding: 24px; } .valuation-summary-card p { align-items: center; display: flex; justify-content: space-between; margin: 0 0 22px; } .valuation-summary-card p span, .valuation-summary-card small, .valuation-market-card p, .valuation-info-card p { color: #526171; font-size: 12px; font-weight: 850; } .valuation-market-status { background: #f4f8fb; border: 1px solid #dfe7ef; border-radius: 8px; display: grid; gap: 4px; padding: 12px 14px; } .valuation-market-status strong { color: #14223a; font-size: 14px; font-weight: 950; } .valuation-market-status span { color: #526171; font-size: 12px; font-weight: 850; } .valuation-summary-card p strong { color: #0b9f5c; font-size: 13px; font-weight: 950; } .valuation-summary-card p:nth-of-type(3) strong, .valuation-summary-card p:nth-of-type(4) strong { color: #27364d; } .valuation-market-scale { background: #dfe5ec; border-radius: 999px; height: 8px; margin: 16px 0 14px; overflow: hidden; position: relative; } .valuation-market-scale span { background: #0b9f5c; border-radius: inherit; display: block; height: 100%; position: relative; transition: width 0.22s ease; } .valuation-market-scale em { background: #0b9f5c; border-radius: 6px; bottom: calc(100% + 8px); color: #ffffff; font-size: 12px; font-style: normal; font-weight: 950; min-width: 46px; padding: 7px 10px; position: absolute; right: auto; .valuation-result-actions button:disabled { cursor: not-allowed; opacity: 0.55; } text-align: center; transform: translateX(-50%); } .valuation-market-scale span em { left: 100%; } .valuation-market-scale.empty em { left: 0; transform: none; } .valuation-market-labels { color: #526171; display: flex; font-size: 12px; font-weight: 850; justify-content: space-between; } .valuation-next-card { display: grid; gap: 14px; } .valuation-next-card h2, .valuation-info-card h2 { margin-bottom: 4px; } .valuation-next-card button { align-items: center; background: transparent; border: 0; display: grid; gap: 14px; grid-template-columns: 34px minmax(0, 1fr) 18px; padding: 0; text-align: left; } .valuation-next-card button strong { color: #27364d; font-size: 12px; font-weight: 950; } .valuation-next-card button > svg { color: #526171; transform: rotate(-90deg); } .valuation-info-card button { align-items: center; background: transparent; border: 0; color: #0b9f5c; display: inline-flex; font-size: 12px; font-weight: 950; gap: 8px; padding: 18px 0 0; } .valuation-form-section h2 { font-size: 22px; font-weight: 950; margin: 0; } .valuation-form-section > p { color: #657284; font-size: 14px; font-weight: 800; margin: 8px 0 24px; } .valuation-form-card, .valuation-preview-card { background: #ffffff; border: 1px solid #dfe7ef; border-radius: 8px; box-shadow: 0 12px 32px rgba(24, 35, 57, 0.05); } .valuation-form-card { padding: 30px 28px 22px; } .valuation-field { display: grid; gap: 8px; min-width: 0; } .valuation-field span { color: #27364d; font-size: 13px; font-weight: 900; } .valuation-field small { color: #7a8798; font-size: 12px; font-weight: 800; } .valuation-field input, .valuation-field select, .valuation-input-control { background: #ffffff; border: 1px solid #d5dee8; border-radius: 6px; color: #14223a; min-height: 52px; width: 100%; } .valuation-field input, .valuation-field select { font-size: 13px; font-weight: 800; padding: 0 14px; } .valuation-field input::placeholder { color: #97a3b2; } .valuation-input-control { align-items: center; display: grid; gap: 9px; grid-template-columns: auto minmax(0, 1fr); padding: 0 13px; } .valuation-input-control svg { color: #7d8a9a; font-size: 17px; } .valuation-input-control input { border: 0; min-height: 50px; padding: 0; } .valuation-location-field { position: relative; } .valuation-location-suggest { background: #ffffff; border: 1px solid #dce4ec; border-radius: 10px; box-shadow: 0 22px 50px rgba(24, 35, 57, 0.18); left: 0; max-height: 330px; overflow: auto; padding: 6px; position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; } .valuation-location-suggest button { align-items: center; background: transparent; border: 0; border-radius: 7px; color: #14223a; display: flex; font-size: 14px; font-weight: 850; gap: 10px; min-height: 42px; padding: 10px 12px; text-align: left; width: 100%; } .valuation-location-suggest button:hover { background: #f1f6fb; } .valuation-location-suggest svg { color: #97a3b2; flex: 0 0 auto; font-size: 18px; } .valuation-location-suggest button > span { display: grid; gap: 2px; min-width: 0; } .valuation-location-suggest strong { color: #14223a; font-size: 14px; font-weight: 950; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .valuation-location-suggest small { color: #7a8798; font-size: 12px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; } .valuation-location-suggest p { color: #657284; font-size: 13px; font-weight: 800; margin: 0; padding: 11px 12px; } .valuation-location-spinner { animation: map-spin 0.7s linear infinite; border: 2px solid #d4dce6; border-radius: 50%; border-top-color: #10a15e; height: 18px; pointer-events: none; position: absolute; right: 16px; top: 17px; width: 18px; } .valuation-input-control.suffix { grid-template-columns: minmax(0, 1fr) auto; } .valuation-input-control em { color: #27364d; font-size: 12px; font-style: normal; font-weight: 950; } .valuation-note { align-items: center; background: linear-gradient(90deg, #f1fbf6 0%, #f7fbfd 100%); border: 1px solid #dcefe5; border-radius: 6px; display: grid; gap: 14px; grid-template-columns: 38px minmax(0, 1fr); margin: 26px 0 28px; min-height: 74px; padding: 12px 18px; } .valuation-note > span { align-items: center; background: #e1f7eb; border-radius: 6px; color: #10a15e; display: grid; font-size: 20px; height: 38px; place-items: center; width: 38px; } .valuation-note p { display: grid; gap: 3px; margin: 0; } .valuation-note strong { font-size: 12px; font-weight: 950; } .valuation-note small { color: #526171; font-size: 11px; font-weight: 800; } .valuation-grid { display: grid; gap: 24px; } .valuation-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .valuation-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .valuation-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .valuation-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .valuation-details-grid { gap: 22px 26px; } .valuation-section-title { color: #27364d; font-size: 13px; font-weight: 950; margin: 0 0 22px; } .valuation-section-title:not(:first-child) { border-top: 1px solid #e7edf3; margin-top: 32px; padding-top: 28px; } .valuation-note.compact { grid-template-columns: 32px minmax(0, 1fr); margin: 24px 0 0; min-height: 48px; padding: 8px 14px; } .valuation-note.compact > span { font-size: 16px; height: 32px; width: 32px; } .valuation-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .valuation-toggle button { background: #ffffff; border: 1px solid #d8e0ea; color: #5d697a; font-size: 12px; font-weight: 900; min-height: 42px; } .valuation-toggle button:first-child { border-radius: 6px 0 0 6px; } .valuation-toggle button:last-child { border-left: 0; border-radius: 0 6px 6px 0; } .valuation-toggle button.active { border-color: #22bb72; color: #0b9f5c; position: relative; z-index: 1; } .valuation-toggle button.active + button { border-left-color: #22bb72; } .valuation-input-control.wide-suffix { grid-template-columns: minmax(0, 1fr) max-content; } .valuation-condition-grid { display: grid; gap: 18px; grid-template-columns: repeat(5, minmax(0, 1fr)); } .valuation-condition-grid button { background: #ffffff; border: 1px solid #d8e0ea; border-radius: 6px; color: #526171; display: grid; gap: 8px; min-height: 128px; padding: 18px; text-align: left; } .valuation-condition-grid button.active, .valuation-amenity-grid button.active { background: #f1fbf6; border-color: #22bb72; color: #0b9f5c; } .valuation-condition-grid svg { color: #55677a; font-size: 22px; } .valuation-condition-grid button.active svg, .valuation-amenity-grid button.active svg { color: #0b9f5c; } .valuation-condition-grid strong { color: #27364d; font-size: 12px; font-weight: 950; } .valuation-condition-grid button.active strong, .valuation-amenity-grid button.active span { color: #0b9f5c; } .valuation-condition-grid small { color: #526171; font-size: 11px; font-weight: 800; line-height: 1.45; } .valuation-amenity-grid { display: grid; gap: 16px 18px; grid-template-columns: repeat(5, minmax(0, 1fr)); } .valuation-amenity-grid button { align-items: center; background: #ffffff; border: 1px solid #d8e0ea; border-radius: 6px; color: #526171; display: grid; gap: 10px; grid-template-columns: 22px minmax(0, 1fr); min-height: 64px; padding: 10px 16px; text-align: left; } .valuation-amenity-grid svg { color: #5f7083; font-size: 19px; } .valuation-amenity-grid span { color: #526171; font-size: 12px; font-weight: 950; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; } .legal-grid { align-items: end; } .valuation-toggle-wide { max-width: 240px; } .history-page { background: #f7fafc; min-height: calc(100vh - 82px); padding: 26px 0 48px; } .history-shell { margin: 0 auto; max-width: 1740px; padding: 0 48px; } .history-breadcrumb { color: #7a8798; display: inline-flex !important; padding: 0; } .history-breadcrumb button, .history-breadcrumb a { background: transparent; border: 0; color: #7a8798; font-size: 12px; font-weight: 800; padding: 0; } .history-breadcrumb button.active, .history-breadcrumb a.active { color: #14223a; } .history-title { margin: 30px 0 30px; } .history-title h1 { color: #14223a; font-size: 36px; line-height: 1.1; margin: 0 0 12px; } .history-title p { color: #526171; font-size: 15px; font-weight: 800; margin: 0; } .history-filter-panel, .history-chart-card, .history-insights-card, .history-alert-card, .history-side-card { background: #ffffff; border: 1px solid #dfe7ef; border-radius: 8px; box-shadow: 0 12px 28px rgba(20, 34, 58, 0.06); } .history-filter-panel { margin-bottom: 28px; padding: 22px 28px; } .history-filter-grid { align-items: end; display: grid; gap: 18px; grid-template-columns: minmax(320px, 1.6fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(190px, 1fr) 210px; } .history-field { display: grid; gap: 8px; min-width: 0; } .history-field > span { color: #657284; font-size: 11px; font-weight: 900; } .history-field > div, .history-field select, .history-field input { background: #ffffff; border: 1px solid #d6e0ea; border-radius: 6px; color: #14223a; min-height: 48px; } .history-field .history-location-picker { border: 0; display: block; min-height: 48px; padding: 0; position: relative; } .history-location-display { align-items: center; background: #ffffff; border: 1px solid #d6e0ea; border-radius: 6px; color: #14223a; cursor: pointer; display: grid; gap: 10px; grid-template-columns: 20px minmax(0, 1fr) 16px; min-height: 48px; padding: 0 14px; text-align: left; width: 100%; } .history-location-picker.active .history-location-display { border-color: #10a15e; box-shadow: 0 0 0 3px rgba(16, 161, 94, 0.1); } .history-location-display svg { color: #8793a3; font-size: 18px; } .history-location-display span { display: grid; gap: 2px; min-width: 0; } .history-location-display small { color: #8793a3; font-size: 11px; font-weight: 900; } .history-location-display strong { color: #14223a; font-size: 13px; font-weight: 950; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-location-display.empty strong { color: #8793a3; font-weight: 850; line-height: 1.2; overflow: visible; text-overflow: clip; white-space: normal; } .history-location-pop { background: #ffffff; border: 1px solid #dce4ec; border-radius: 12px; box-shadow: 0 28px 60px rgba(24, 35, 57, 0.2); display: flex; flex-direction: column; gap: 14px; left: 0; padding: 22px; position: absolute; top: calc(100% + 10px); width: 400px; z-index: 70; } .history-location-search { align-items: center; background: #f4f7fb; border: 1px solid #e3e9f0; border-radius: 9px; display: flex; gap: 10px; min-height: 46px; padding: 0 14px; } .history-location-search svg { color: #8793a3; flex: 0 0 auto; font-size: 20px; } .history-location-search input { background: transparent; border: 0; color: #14223a; font-size: 14px; font-weight: 700; min-height: 0; outline: none; padding: 0; width: 100%; } .history-location-suggest { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; padding: 0; } .history-location-pop { top: calc(100% + 10px); } .history-location-suggest button { align-items: center; background: transparent; border: 0; border-radius: 8px; color: #2c3a4f; cursor: pointer; display: flex; font-size: 13px; font-weight: 800; gap: 11px; min-height: 0; padding: 10px 12px; text-align: left; } .history-location-suggest button:hover { background: #f4f7fb; } .history-location-suggest button svg { color: #8793a3; flex: 0 0 auto; font-size: 18px; } .history-location-suggest button span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .history-location-suggest button strong, .history-location-suggest button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-location-suggest button strong { color: #14223a; font-size: 14px; font-weight: 900; } .history-location-suggest button small, .history-location-suggest p { color: #657284; font-size: 12px; font-weight: 700; text-transform: capitalize; } .history-location-suggest p { margin: 0; padding: 12px; } .history-field > div { align-items: center; display: grid; gap: 10px; grid-template-columns: 20px minmax(0, 1fr) 16px; padding: 0 14px; } .history-field svg { color: #6f8197; font-size: 17px; } .history-field strong { font-size: 13px; font-weight: 950; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-field select, .history-field input { font-size: 13px; font-weight: 900; padding: 0 14px; width: 100%; } .history-field .history-location-pop { align-items: stretch; background: #ffffff; border: 1px solid #dce4ec; border-radius: 12px; box-shadow: 0 28px 60px rgba(24, 35, 57, 0.2); display: flex; flex-direction: column; gap: 14px; grid-template-columns: none; left: 0; padding: 22px; position: absolute; top: calc(100% + 10px); width: 400px; z-index: 70; } .history-field .history-location-search { align-items: center; background: #f4f7fb; border: 1px solid #e3e9f0; border-radius: 9px; display: flex; gap: 10px; grid-template-columns: none; min-height: 46px; padding: 0 14px; } .history-field .history-location-search input { background: transparent; border: 0; font-size: 14px; font-weight: 700; min-height: 0; padding: 0; } .history-field .history-location-suggest { align-items: stretch; border: 0; display: flex; flex-direction: column; gap: 4px; grid-template-columns: none; max-height: 300px; overflow-y: auto; padding: 0; } .history-field.compact > div, .history-dual-input { border: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 48px; padding: 0; } .history-search { align-items: center; background: #0aa35f; border: 0; border-radius: 6px; color: #ffffff; display: inline-flex; font-size: 13px; font-weight: 950; gap: 9px; justify-content: center; min-height: 48px; } .history-popular-row { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .history-popular-row span { color: #657284; font-size: 13px; font-weight: 900; } .history-popular-row button { background: #f7fafc; border: 1px solid #dbe4ee; border-radius: 999px; color: #33445d; font-size: 12px; font-weight: 900; min-height: 30px; padding: 0 18px; } .history-popular-row .history-clear { background: transparent; border: 0; color: #0aa35f; margin-left: auto; padding: 0; } .history-layout { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 360px; } .history-main-column { display: grid; gap: 22px; min-width: 0; } .history-chart-card { padding: 28px; } .history-chart-head { align-items: start; display: flex; gap: 22px; justify-content: space-between; margin-bottom: 24px; } .history-chart-head h2 { align-items: center; color: #14223a; display: flex; gap: 8px; font-size: 20px; line-height: 1.25; margin: 0 0 16px; } .history-chart-head h2 svg { color: #91a0b2; font-size: 15px; } .history-chart-head strong { color: #0d1b35; display: block; font-size: 40px; font-weight: 950; line-height: 1; margin-bottom: 9px; } .history-chart-head p { color: #0aa35f; font-size: 15px; font-weight: 950; margin: 0; } .history-chart-head p.negative { color: #dc4a3d; } .history-chart-head p span { color: #526171; font-size: 13px; } .history-source-note { color: #7a8798; display: block; font-size: 11px; font-weight: 800; line-height: 1.45; max-width: 620px; margin-top: 10px; } .history-chart-head label { align-items: center; color: #657284; display: inline-flex; font-size: 12px; font-weight: 900; gap: 12px; white-space: nowrap; } .history-chart-head select { background: #ffffff; border: 1px solid #d6e0ea; border-radius: 6px; color: #14223a; font-size: 13px; font-weight: 900; min-height: 42px; padding: 0 12px; } .history-chart-mode { align-items: center; background: #f1fbf6; border: 1px solid #cfead9; border-radius: 999px; color: #0aa35f; display: inline-flex; font-size: 12px; font-weight: 950; justify-content: center; min-height: 34px; padding: 0 14px; white-space: nowrap; } .history-chart-wrap { min-width: 0; outline: none; overflow: hidden; position: relative; } .history-chart-wrap:focus, .history-chart-wrap:focus-visible, .history-chart-wrap svg:focus, .history-chart-wrap svg:focus-visible { outline: none; } .history-chart-wrap.empty .history-line, .history-chart-wrap.empty .history-dot, .history-chart-wrap.empty .history-area, .history-chart-wrap.empty .history-guide, .history-chart-wrap.empty .history-tooltip { opacity: 0.22; } .history-chart-empty { align-items: center; background: rgba(255, 255, 255, 0.88); border: 1px dashed #cfd9e5; border-radius: 8px; color: #526171; display: grid; gap: 6px; left: 50%; max-width: min(360px, calc(100% - 32px)); padding: 16px 18px; position: absolute; text-align: center; top: 48%; transform: translate(-50%, -50%); z-index: 2; } .history-chart-empty strong { color: #14223a; font-size: 24px; font-weight: 950; line-height: 1; } .history-chart-empty span { font-size: 12px; font-weight: 850; line-height: 1.35; } .history-chart-wrap svg { display: block; height: auto; overflow: visible; width: 100%; } .history-chart-wrap line { stroke: #e6edf3; stroke-width: 1; } .history-chart-wrap text { fill: #738399; font-size: 11px; font-weight: 800; stroke: none; } .history-area { fill: url(#historyArea); stroke: none; } .history-line { fill: none; stroke: #0aa35f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; } .history-dot { fill: #ffffff; stroke: #0aa35f; stroke-width: 3; transition: r 0.12s ease, stroke-width 0.12s ease; } .history-dot.active { filter: drop-shadow(0 4px 10px rgba(10, 163, 95, 0.28)); stroke-width: 4; } .history-guide { stroke: #cfd9e5 !important; stroke-dasharray: 5 5; } .history-tooltip { background: rgba(255, 255, 255, 0.98); border: 1px solid #dce6ef; border-radius: 6px; box-shadow: 0 10px 24px rgba(20, 34, 58, 0.14); color: #14223a; display: grid; gap: 4px; min-height: 48px; padding: 9px 11px; pointer-events: none; position: relative; } .history-tooltip::after { background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid #dce6ef; border-right: 1px solid #dce6ef; bottom: -5px; content: ''; height: 9px; left: 50%; position: absolute; transform: translateX(-50%) rotate(45deg); width: 9px; } .history-tooltip span { color: #657284; font-size: 10px; font-weight: 800; line-height: 1.15; } .history-tooltip strong { font-size: 14px; font-weight: 950; line-height: 1.1; white-space: nowrap; } .history-months { color: #738399; display: grid; font-size: 11px; font-weight: 800; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: -4px; } .history-stat-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; } .history-stat-grid article { border: 1px solid #dfe7ef; border-radius: 7px; display: grid; gap: 7px; min-height: 108px; padding: 18px; } .history-stat-grid article.positive { background: #f1fbf6; border-color: #cbeedc; } .history-stat-grid article.negative { background: #fff5f3; border-color: #f2d0ca; } .history-stat-grid span, .history-stat-grid small { color: #657284; font-size: 12px; font-weight: 850; } .history-stat-grid strong { color: #14223a; font-size: 20px; font-weight: 950; } .history-stat-grid .positive strong, .history-stat-grid .positive small { color: #0aa35f; } .history-stat-grid .negative strong, .history-stat-grid .negative small { color: #dc4a3d; } .history-insights-card { padding: 26px 28px; } .history-insights-card h2, .history-side-card h2 { color: #14223a; font-size: 17px; line-height: 1.2; margin: 0 0 22px; } .history-insights-card > div { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .history-insights-card article { align-items: center; display: grid; gap: 14px; grid-template-columns: 48px minmax(0, 1fr); } .history-insights-card article > span, .history-alert-card > span { background: #eaf8ef; border-radius: 50%; color: #10a15e; display: grid; font-size: 20px; height: 48px; place-items: center; width: 48px; } .history-insights-card article:nth-child(2) > span { background: #eef5ff; color: #3577d4; } .history-insights-card article:nth-child(3) > span { background: #f4edff; color: #965ee8; } .history-insights-card p, .history-alert-card p { margin: 0; } .history-insights-card strong, .history-alert-card strong { color: #14223a; display: block; font-size: 13px; font-weight: 950; margin-bottom: 5px; } .history-insights-card small, .history-alert-card small { color: #526171; display: block; font-size: 11px; font-weight: 800; line-height: 1.45; } .history-alert-card { align-items: center; background: #f1fbf6; border-color: #d1efdf; display: grid; gap: 16px; grid-template-columns: 48px minmax(0, 1fr) auto; padding: 18px 24px; } .history-alert-feedback { align-items: center; background: #eaf8ef; border: 1px solid #cfead9; border-radius: 8px; color: #1f5a3e; display: inline-flex; font-size: 12px; font-weight: 850; grid-column: 2 / 4; justify-self: start; margin-top: -6px; max-width: 720px; padding: 7px 12px; } .history-alert-card button, .history-side-card button { align-items: center; background: #ffffff; border: 1px solid #cfe2d8; border-radius: 6px; color: #0aa35f; display: inline-flex; font-size: 13px; font-weight: 950; gap: 8px; justify-content: center; min-height: 44px; padding: 0 18px; } .history-sidebar { display: grid; gap: 22px; min-width: 0; } .history-side-card { padding: 24px; } .history-side-card.compare > button:not(:last-child) { align-items: center; background: transparent; border: 0; border-radius: 6px; display: flex; justify-content: space-between; margin: 0; min-height: 42px; padding: 0 12px; width: 100%; } .history-side-card.compare > button:not(:last-child).active { background: #eaf8ef; } .history-side-card.compare span { color: #33445d; font-size: 13px; font-weight: 900; } .history-side-card.compare strong { align-items: center; color: #0aa35f; display: inline-flex; font-size: 12px; font-weight: 950; gap: 5px; } .history-side-card.compare button, .history-side-card.recent button { color: #14223a; margin-top: 18px; width: 100%; } .history-side-card.recent article { align-items: center; cursor: pointer; display: grid; gap: 12px; grid-template-columns: 72px minmax(0, 1fr) 16px; margin-bottom: 16px; } .history-side-card.recent img { aspect-ratio: 1.28; border-radius: 6px; height: auto; object-fit: cover; width: 72px; } .history-side-card.recent p { display: grid; gap: 4px; margin: 0; min-width: 0; } .history-side-card.recent strong, .history-side-card.recent span, .history-side-card.recent small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-side-card.recent strong { color: #14223a; font-size: 13px; font-weight: 950; } .history-side-card.recent span { color: #526171; font-size: 12px; font-weight: 800; } .history-side-card.recent small { align-items: center; color: #0aa35f; display: inline-flex; font-size: 11px; font-weight: 900; gap: 5px; } .valuation-subtitle { color: #27364d; font-size: 15px; font-weight: 950; margin: 34px 0 22px; } .valuation-actions-row { align-items: center; border-top: 1px solid #e7edf3; display: flex; justify-content: space-between; margin: 32px -28px 0; padding: 20px 28px 0; } .valuation-back, .valuation-next { align-items: center; border-radius: 6px; display: inline-flex; font-size: 13px; font-weight: 950; justify-content: center; min-height: 48px; padding: 0 22px; } .valuation-back { background: #ffffff; border: 1px solid #d8e0ea; color: #27364d; } .valuation-next { background: #0b9f5c; border: 0; color: #ffffff; gap: 8px; min-width: 320px; } .valuation-sidebar { display: grid; gap: 18px; } .valuation-preview-card { padding: 24px; } .valuation-preview-card h2 { color: #27364d; font-size: 17px; font-weight: 950; margin: 0 0 18px; } .valuation-estimate-box { align-items: center; background: linear-gradient(110deg, #f7fbfd 0%, #effbf4 100%); border: 1px solid #dcefe5; border-radius: 6px; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 170px; min-height: 224px; padding: 28px; } .valuation-estimate-box span, .valuation-estimate-box small, .valuation-estimate-box em, .valuation-estimate-box p { color: #526171; display: block; font-size: 13px; font-style: normal; font-weight: 850; margin: 0; } .valuation-estimate-box strong { color: #14223a; display: block; font-size: 34px; font-weight: 950; letter-spacing: 4px; margin: 22px 0; } .valuation-estimate-box strong.valuation-price-range { color: #0b9f5c; font-size: 30px; letter-spacing: 0; margin: 18px 0 22px; } .valuation-estimate-box strong.valuation-price-range::after { content: ""; } .valuation-estimate-box strong::after { color: #0b9f5c; content: " zł"; font-size: 22px; letter-spacing: 0; } .valuation-estimate-box em { color: #14223a; font-size: 16px; font-weight: 950; letter-spacing: 4px; margin: 8px 0 12px; } .valuation-house-graphic { align-items: end; display: grid; height: 126px; justify-items: center; position: relative; } .valuation-house-graphic span { align-items: center; border: 2px dashed #6dd19d; border-radius: 50%; color: #10a15e; display: grid; font-size: 46px; height: 98px; place-items: center; width: 98px; } .valuation-house-graphic i { border: 2px solid #61c890; bottom: 0; display: block; position: absolute; } .valuation-house-graphic i:first-of-type { border-radius: 50%; height: 28px; left: 4px; width: 28px; } .valuation-house-graphic i:last-of-type { height: 45px; right: 2px; width: 42px; } .valuation-driver-list { display: grid; gap: 16px; } .valuation-driver-list.compact { gap: 16px; } .valuation-driver-list div, .valuation-benefit-grid div { align-items: start; display: grid; gap: 13px; grid-template-columns: 38px minmax(0, 1fr); } .valuation-driver-list span, .valuation-benefit-grid span, .valuation-trust-row > span { align-items: center; background: #e7f8ef; border-radius: 50%; color: #0b9f5c; display: grid; font-size: 18px; height: 38px; place-items: center; width: 38px; } .valuation-driver-list div:nth-child(2) span { background: #e9f2ff; color: #3b7eed; } .valuation-driver-list div:nth-child(3) span { background: #fff3d9; color: #d49618; } .valuation-driver-list div:nth-child(4) span { background: #e8fbf8; color: #10a996; } .valuation-driver-list div:nth-child(5) span { background: #fff0e8; color: #ed7d45; } .valuation-driver-list p, .valuation-benefit-grid p, .valuation-trust-row p { display: grid; gap: 3px; margin: 0; } .valuation-driver-list strong, .valuation-benefit-grid strong, .valuation-trust-row strong { color: #27364d; font-size: 13px; font-weight: 950; } .valuation-driver-list small, .valuation-benefit-grid small, .valuation-trust-row small { color: #657284; font-size: 12px; font-weight: 800; line-height: 1.45; } .valuation-benefit-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .valuation-progress-card > div:first-child { align-items: center; display: flex; justify-content: space-between; } .valuation-progress-card strong, .valuation-progress-card span { color: #27364d; font-size: 12px; font-weight: 950; } .valuation-progress-bar { background: #dfe5ec; border-radius: 999px; height: 8px; margin: 13px 0 28px; overflow: hidden; } .valuation-progress-bar span { background: #0b9f5c; border-radius: inherit; display: block; height: 100%; transition: width 0.22s ease; } .valuation-check-list { display: grid; gap: 13px; } .valuation-check-list p { align-items: center; color: #8390a0; display: flex; font-size: 12px; font-weight: 850; gap: 9px; margin: 0; } .valuation-check-list svg { border: 1px solid #cad4df; border-radius: 50%; color: #a6b1bf; font-size: 18px; padding: 3px; } .valuation-check-list p.done { color: #0b9f5c; font-weight: 950; } .valuation-check-list p.done svg { background: #0b9f5c; border-color: #0b9f5c; color: #ffffff; } .valuation-trust-row { align-items: center; background: linear-gradient(90deg, #f1fbf6 0%, #f8fbfd 100%); border: 1px solid #dcefe5; border-radius: 8px; display: grid; gap: 14px 16px; grid-template-columns: 36px minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr); margin-top: 42px; min-height: 80px; padding: 18px 28px; } .sell-feature-strip { margin-top: 18px; padding: 22px; } .sell-feature-strip > div { display: grid; gap: 18px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 20px; } .sell-feature-strip article { align-items: center; display: grid; gap: 12px; grid-template-columns: 34px minmax(0, 1fr); } .sell-feature-strip article > span { align-items: center; background: #fff4df; border-radius: 50%; color: #d28b20; display: grid; font-size: 19px; height: 34px; place-items: center; width: 34px; } .sell-feature-strip article:nth-child(2) > span { background: #ffeef4; color: #f35b8f; } .sell-feature-strip article:nth-child(3) > span { background: #f1edff; color: #7867ed; } .sell-feature-strip article:nth-child(4) > span { background: #edf3ff; color: #3f7df1; } .sell-feature-strip article:nth-child(5) > span { background: #e9f8ef; color: #10a15e; } .sell-feature-strip p { margin: 0; } .sell-feature-strip strong { color: #14223a; display: block; font-size: 11px; font-weight: 950; } .sell-feature-strip small { color: #526171; display: block; font-size: 10px; font-weight: 750; margin-top: 3px; } .testimonial-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; } .testimonial-card { min-height: 156px; padding: 22px; position: relative; } .testimonial-head { align-items: center; display: flex; gap: 12px; } .testimonial-head > span { align-items: center; background: #e8d0b3; border-radius: 50%; color: #14223a; display: grid; font-weight: 950; height: 42px; place-items: center; width: 42px; } .testimonial-head strong, .testimonial-head small { display: block; } .testimonial-head strong { color: #14223a; font-size: 12px; font-weight: 950; } .testimonial-head small { color: #10a15e; font-size: 11px; font-weight: 950; margin-top: 2px; } .testimonial-card > p { color: #14223a; font-size: 12px; font-weight: 750; line-height: 1.45; margin: 15px 0 13px; } .stars { align-items: center; color: #f5a400; display: flex; gap: 3px; } .stars svg { fill: #f5a400; font-size: 13px; } .stars span { color: #14223a; font-size: 12px; font-weight: 950; margin-left: 6px; } .testimonial-nav { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 50%; color: #526171; display: grid; font-size: 24px; height: 34px; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); width: 34px; } .testimonial-nav.prev { left: -18px; } .testimonial-nav.next { right: -18px; } .testimonial-dots { display: flex; gap: 8px; justify-content: center; margin-top: 12px; } .testimonial-dots span { background: #14223a; border-radius: 999px; height: 6px; opacity: 0.35; width: 6px; } .testimonial-dots span:first-child { opacity: 1; width: 18px; } .sell-bottom-cta { align-items: center; background: linear-gradient(90deg, #f8fffb 0%, #effaf4 100%); display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) 244px; margin-top: 26px; padding: 18px 22px; } .sell-bottom-cta strong, .sell-bottom-cta span, .sell-bottom-cta small { display: block; } .sell-bottom-cta strong { color: #14223a; font-size: 14px; font-weight: 950; } .sell-bottom-cta span, .sell-bottom-cta small { color: #526171; font-size: 11px; font-weight: 800; margin-top: 3px; } .sell-bottom-cta button { background: #0b9f5c; border: 0; border-radius: 6px; color: #ffffff; font-size: 12px; font-weight: 950; min-height: 42px; } .sell-bottom-cta small { grid-column: 2; margin-top: -8px; text-align: center; } .services-page { background: linear-gradient(180deg, #f8fafc 0%, #f2f6fa 100%); min-height: calc(100vh - 82px); padding: 0 0 64px; } .services-frame { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(520px, 680px); margin: 0 auto; max-width: 1920px; padding: 0 0 0 96px; } .services-main { min-width: 0; padding-right: 22px; } .services-hero { border-radius: 0; min-height: 228px; overflow: hidden; position: relative; } .services-hero img { height: 100%; inset: 0; object-fit: cover; object-position: right center; position: absolute; width: 100%; } .services-hero::after { background: linear-gradient(90deg, #f8fafc 0%, rgba(248, 250, 252, 0.98) 42%, rgba(248, 250, 252, 0.42) 74%, rgba(248, 250, 252, 0.08) 100%); content: ""; inset: 0; position: absolute; } .services-hero-copy { max-width: 720px; padding: 38px 0 0; position: relative; z-index: 1; } .services-hero h1 { color: #14223a; font-size: 38px; line-height: 1.08; margin: 0; } .services-hero h1 span { color: #10a15e; } .services-hero p { color: #526171; font-size: 15px; font-weight: 750; line-height: 1.55; margin: 17px 0 0; max-width: 650px; } .services-search { align-items: stretch; background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; box-shadow: 0 16px 40px rgba(24, 35, 57, 0.08); display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(220px, 0.8fr) 134px; min-height: 76px; overflow: hidden; } .services-search .search-field { padding: 17px 24px; } .services-search .buy-search-button { margin: 12px; } .services-section { margin-top: 42px; } .services-section > h2, .services-section .section-head h2 { color: #14223a; font-size: 20px; line-height: 1.2; margin: 0 0 22px; } .service-category-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .service-category-card, .recommended-company, .service-panel { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; } .service-category-card { min-height: 168px; padding: 23px 22px 20px; } .service-icon { align-items: center; background: #eaf8ef; border-radius: 12px; color: #13a360; display: grid; font-size: 25px; height: 42px; margin-bottom: 17px; place-items: center; width: 42px; } .service-icon.scale { background: #f1edff; color: #7867ed; } .service-icon.paint { background: #fff0e7; color: #f58244; } .service-icon.truck { background: #edf3ff; color: #4f7cff; } .service-icon.sofa { background: #fff4df; color: #be8433; } .service-icon.camera { background: #ffeef4; color: #f35b8f; } .service-icon.city { background: #e8f8f7; color: #209f96; } .service-icon.dots { background: #f1f4f8; color: #657284; } .service-category-card h3, .recommended-company h3, .directory-card h3, .profile-panel h2, .profile-about h3 { color: #14223a; margin: 0; } .service-category-card h3 { font-size: 14px; font-weight: 950; } .service-category-card p { color: #526171; font-size: 13px; font-weight: 750; line-height: 1.45; margin: 18px 0; min-height: 56px; } .service-category-card a { align-items: center; color: #0b9f5c; display: inline-flex; font-size: 12px; font-weight: 950; gap: 7px; text-decoration: none; } .recommended-company-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .recommended-company { display: grid; justify-items: center; min-height: 195px; padding: 18px 18px 17px; position: relative; text-align: center; } .recommended-badge { align-items: center; background: #e9f8ef; border: 1px solid #8be0b4; border-radius: 999px; color: #0b9f5c; display: inline-flex; font-size: 10px; font-weight: 950; gap: 4px; justify-self: start; padding: 4px 7px; } .company-logo { align-items: center; color: #2e6df2; display: grid; font-size: 52px; height: 58px; margin-top: 6px; place-items: center; width: 72px; } .company-logo.hammer { color: #101827; } .company-logo.letter { color: #d39a37; } .company-logo.truck { color: #111827; } .recommended-company h3 { font-size: 13px; font-weight: 950; margin-top: 6px; } .recommended-company p, .directory-card p, .profile-head p { align-items: center; color: #14223a; display: flex; font-size: 11px; font-weight: 950; gap: 4px; justify-content: center; margin: 5px 0; } .recommended-company p svg, .directory-card p svg, .profile-head p svg { color: #f5a400; fill: #f5a400; font-size: 12px; } .recommended-company small, .recommended-company em { color: #526171; display: block; font-size: 11px; font-style: normal; font-weight: 750; line-height: 1.35; } .recommended-company button { align-self: end; background: #ffffff; border: 1px solid #dce4ec; border-radius: 5px; color: #0b9f5c; font-size: 12px; font-weight: 950; margin-top: 14px; min-height: 34px; width: 100%; } .service-steps-section { margin-bottom: 18px; } .service-steps { align-items: start; display: grid; gap: 36px; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; } .service-step { align-items: center; display: grid; gap: 14px; grid-template-columns: 50px minmax(0, 1fr); position: relative; } .service-step:not(:last-child)::after { background: #cfd9e5; content: ""; height: 2px; left: calc(100% + 8px); position: absolute; top: 25px; width: 20px; } .service-step > span { align-items: center; background: #eaf8ef; border: 1px solid #c6ecd8; border-radius: 50%; color: #13a360; display: grid; font-size: 24px; height: 50px; place-items: center; width: 50px; } .service-step h3 { color: #14223a; font-size: 14px; font-weight: 950; margin: 0; } .service-step p { color: #526171; font-size: 12px; font-weight: 750; line-height: 1.4; margin: 5px 0 0; } .services-preview { border-left: 1px solid #dce4ec; display: grid; gap: 16px; min-width: 0; padding: 0 0 0 18px; } .service-panel { border-radius: 0; min-width: 0; padding: 30px 36px 28px; } .breadcrumb.mini { font-size: 11px; padding-top: 0; } .directory-panel h2 { color: #14223a; font-size: 24px; line-height: 1.15; margin: 28px 0 8px; } .directory-panel > p { color: #526171; font-size: 13px; font-weight: 750; line-height: 1.45; margin: 0 0 22px; } .service-mini-search { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 92px; min-height: 60px; overflow: hidden; } .service-mini-search .search-field { padding: 12px 14px; } .service-mini-search .search-field svg { font-size: 15px; } .service-mini-search .search-field small { font-size: 10px; } .service-mini-search .search-field strong { font-size: 11px; } .service-mini-search > button { align-items: center; background: #ffffff; border: 0; border-left: 1px solid #e3e9f0; color: #14223a; display: flex; font-size: 11px; font-weight: 950; gap: 8px; justify-content: center; } .directory-list { display: grid; gap: 14px; margin-top: 22px; } .directory-card { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; display: grid; gap: 16px; grid-template-columns: 136px minmax(0, 1fr) 96px 22px; min-height: 126px; padding: 12px; } .directory-photo { background-size: 210%; border-radius: 6px; min-height: 102px; } .directory-card h3 { font-size: 15px; line-height: 1.2; } .directory-card p { justify-content: flex-start; } .directory-card span, .directory-card small, .directory-card em { color: #526171; display: flex; font-size: 11px; font-style: normal; font-weight: 750; gap: 5px; margin-top: 7px; } .directory-card em { color: #0b9f5c; font-weight: 900; } .directory-card > button { align-self: end; background: #0b9f5c; border: 0; border-radius: 5px; color: #ffffff; font-size: 11px; font-weight: 950; min-height: 32px; } .directory-card > svg { color: #657284; font-size: 20px; justify-self: end; } .more-companies { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 5px; color: #14223a; display: flex; font-size: 11px; font-weight: 950; gap: 6px; justify-content: center; margin-top: 16px; min-height: 34px; width: 100%; } .profile-panel { padding: 0; overflow: hidden; } .profile-cover { background-position: center 58%; background-size: cover; height: 128px; position: relative; } .profile-cover::after { background: linear-gradient(180deg, rgba(20, 34, 58, 0.05), rgba(20, 34, 58, 0.35)); content: ""; inset: 0; position: absolute; } .profile-head { display: grid; gap: 18px; grid-template-columns: 82px minmax(0, 1fr) 170px; padding: 0 28px 20px; } .profile-logo { align-items: center; background: #ffffff; border-radius: 8px; box-shadow: 0 12px 30px rgba(24, 35, 57, 0.15); color: #111827; display: grid; font-size: 43px; height: 82px; margin-top: -41px; place-items: center; position: relative; width: 82px; z-index: 2; } .profile-head h2 { font-size: 24px; line-height: 1.2; margin-top: 20px; } .profile-head p { justify-content: flex-start; margin-top: 6px; } .profile-head span { color: #526171; display: block; font-size: 12px; font-weight: 750; margin-top: 7px; } .profile-head > button { align-self: start; background: #14223a; border: 0; border-radius: 6px; color: #ffffff; font-size: 12px; font-weight: 950; margin-top: 20px; min-height: 42px; } .profile-actions { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 28px 22px; } .profile-actions button { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 5px; color: #14223a; display: flex; font-size: 11px; font-weight: 900; gap: 7px; justify-content: center; min-height: 34px; } .profile-tabs { border-bottom: 1px solid #dce4ec; border-top: 1px solid #dce4ec; display: flex; gap: 24px; padding: 0 28px; } .profile-tabs button { background: transparent; border: 0; color: #526171; font-size: 12px; font-weight: 950; min-height: 50px; padding: 0; } .profile-tabs .active { color: #14223a; position: relative; } .profile-tabs .active::after { background: #10a15e; bottom: 0; content: ""; height: 2px; left: 0; position: absolute; right: 0; } .profile-about { padding: 22px 28px 30px; } .profile-about h3 { font-size: 15px; } .profile-about p { color: #526171; font-size: 12px; font-weight: 750; line-height: 1.55; margin: 12px 0 18px; } .profile-stats { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .profile-stats span { color: #526171; display: grid; font-size: 10px; font-weight: 850; gap: 6px; line-height: 1.25; } .profile-stats svg { color: #0b9f5c; font-size: 22px; } /* Sprawdź na mapie + strona mapy */ .mega-map-link { align-items: center; background: #eaf8ef; border: 1px solid #bce6cf; border-radius: 9px; color: #0b8f52; cursor: pointer; display: flex; font-size: 13px; font-weight: 900; gap: 10px; padding: 12px 14px; } .mega-map-link:hover { background: #def2e6; } .mega-map-link svg { font-size: 18px; } .mega-map-link span { flex: 1; text-align: left; } .map-search-page { background: #eef3f8; display: flex; flex-direction: column; gap: 14px; padding: 20px clamp(16px, 4vw, 48px) 40px; } .map-search-bar { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 12px; box-shadow: 0 16px 40px rgba(24, 35, 57, 0.09); display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px; } .map-back { align-items: center; background: #f4f7fb; border: 0; border-radius: 9px; color: #14223a; cursor: pointer; display: flex; font-size: 13px; font-weight: 900; gap: 6px; min-height: 46px; padding: 0 16px; } .map-back svg { font-size: 18px; transform: rotate(90deg); } .map-back:hover { background: #e9eff6; } .map-field { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 9px; display: flex; gap: 8px; min-height: 46px; padding: 0 12px; position: relative; } .map-field svg { color: #8793a3; flex: 0 0 auto; font-size: 18px; } .map-field input, .map-field select { background: transparent; border: 0; color: #14223a; font-size: 13px; font-weight: 800; outline: none; width: 100%; } .map-field select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238793a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-position: right 2px center; background-repeat: no-repeat; background-size: 16px; cursor: pointer; padding-right: 22px; user-select: none; } .map-field select:focus, .map-field input:focus { outline: none; } .map-field:focus-within { border-color: #10a15e; } .map-field-city { flex: 1; min-width: 220px; } .map-field-num { width: 118px; } .map-field-select { min-width: 170px; } .map-field-select select { text-overflow: ellipsis; white-space: nowrap; } .map-suggest { background: #ffffff; border: 1px solid #dce4ec; border-radius: 10px; box-shadow: 0 18px 40px rgba(24, 35, 57, 0.18); display: flex; flex-direction: column; left: 0; max-height: 360px; overflow-y: auto; padding: 6px; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; } .map-suggest button { align-items: center; background: transparent; border: 0; border-radius: 8px; color: #2c3a4f; cursor: pointer; display: flex; font-size: 13px; font-weight: 800; gap: 11px; padding: 10px 12px; text-align: left; } .map-suggest button:hover { background: #f4f7fb; } .map-suggest button svg { color: #8793a3; flex: 0 0 auto; font-size: 17px; } .map-suggest button span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .map-suggest button strong { color: #14223a; font-size: 14px; font-weight: 900; } .map-suggest button small { color: #8793a3; font-size: 12px; font-weight: 700; text-transform: capitalize; } .map-suggest-empty { color: #8793a3; font-size: 13px; font-weight: 700; margin: 0; padding: 12px; } .map-suggest-spinner { animation: map-spin 0.7s linear infinite; border: 2px solid #d4dce6; border-radius: 50%; border-top-color: #10a15e; flex: 0 0 auto; height: 16px; width: 16px; } @keyframes map-spin { to { transform: rotate(360deg); } } .map-search-btn { align-items: center; background: #10a15e; border: 0; border-radius: 9px; color: #ffffff; cursor: pointer; display: flex; font-size: 13px; font-weight: 900; gap: 8px; min-height: 46px; padding: 0 22px; } .map-search-btn svg { font-size: 18px; } .map-reset-btn { background: #ffffff; border: 1px solid #dce4ec; border-radius: 9px; color: #526171; cursor: pointer; font-size: 13px; font-weight: 900; min-height: 46px; padding: 0 18px; } .map-reset-btn:hover { border-color: #c3ccd8; } .map-city-chips { display: flex; flex-wrap: wrap; gap: 8px; } .map-city-chips button { background: #ffffff; border: 1px solid #dce4ec; border-radius: 999px; color: #14223a; cursor: pointer; font-size: 13px; font-weight: 800; padding: 8px 16px; } .map-city-chips button:hover { border-color: #10a15e; } .map-city-chips button.active { background: #10a15e; border-color: #10a15e; color: #ffffff; } .map-stage { border-radius: 16px; box-shadow: 0 20px 50px rgba(24, 35, 57, 0.14); overflow: hidden; position: relative; } .map-count { background: rgba(255, 255, 255, 0.95); border-radius: 999px; box-shadow: 0 6px 18px rgba(24, 35, 57, 0.16); color: #14223a; font-size: 13px; font-weight: 800; left: 16px; padding: 9px 16px; position: absolute; top: 16px; z-index: 20; } .map-count strong { color: #0b8f52; font-weight: 950; } .imap { background: #d8e2ec; height: clamp(460px, 64vh, 720px); position: relative; width: 100%; } .imap-surface { cursor: grab; height: 100%; overflow: hidden; position: absolute; inset: 0; touch-action: none; } .imap-surface:active { cursor: grabbing; } .imap-tiles img { position: absolute; user-select: none; -webkit-user-drag: none; } .imap-labels { pointer-events: none; } .imap-marker { background: #10a15e; border: 2px solid #ffffff; border-radius: 999px; box-shadow: 0 6px 16px rgba(15, 60, 38, 0.4); color: #ffffff; cursor: pointer; font-size: 12px; font-weight: 900; padding: 6px 12px; position: absolute; transform: translate(-50%, -50%); white-space: nowrap; z-index: 10; } .imap-marker:hover { background: #0b8f52; z-index: 15; } .imap-marker.active { background: #14223a; transform: translate(-50%, -50%) scale(1.08); z-index: 16; } .imap-zoom { bottom: 18px; display: flex; flex-direction: column; gap: 6px; position: absolute; right: 16px; z-index: 20; } .imap-zoom button { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 9px; color: #14223a; cursor: pointer; display: flex; font-size: 20px; font-weight: 900; height: 42px; justify-content: center; width: 42px; } .imap-zoom button:hover { background: #f4f7fb; } .map-offer-card { background: #ffffff; border-radius: 16px; bottom: 18px; box-shadow: 0 26px 60px rgba(24, 35, 57, 0.32); display: flex; flex-direction: column; left: 16px; overflow: hidden; position: absolute; width: 320px; z-index: 25; } .map-offer-close { align-items: center; background: rgba(20, 34, 58, 0.55); backdrop-filter: blur(4px); border: 0; border-radius: 50%; color: #ffffff; cursor: pointer; display: flex; font-size: 16px; font-weight: 900; height: 30px; justify-content: center; position: absolute; right: 12px; top: 12px; width: 30px; z-index: 2; } .map-offer-close:hover { background: rgba(20, 34, 58, 0.8); } .map-offer-photo { background-position: center; background-size: cover; height: 150px; position: relative; width: 100%; } .map-offer-photo::after { background: linear-gradient(180deg, rgba(20, 34, 58, 0) 55%, rgba(20, 34, 58, 0.18) 100%); content: ''; inset: 0; position: absolute; } .map-offer-body { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 18px; } .map-offer-body strong { color: #0b8f52; font-size: 22px; font-weight: 950; letter-spacing: -0.01em; } .map-offer-body h3 { color: #14223a; font-size: 15px; margin: 4px 0 0; } .map-offer-body p { color: #526171; font-size: 12px; font-weight: 750; line-height: 1.4; margin: 0; } .map-offer-body small { color: #8793a3; font-size: 12px; font-weight: 750; } .map-offer-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .map-offer-tags span { background: #eaf8ef; border-radius: 7px; color: #0b8f52; font-size: 11px; font-weight: 850; padding: 5px 10px; } .district-ranking-page { background: #f7fafc; border-top: 1px solid #e6edf3; min-height: calc(100vh - 82px); padding: 26px 0 24px; } .district-ranking-shell { margin: 0 auto; max-width: 1780px; padding: 0 44px; } .district-breadcrumb { align-items: center; color: #768398; display: inline-flex !important; font-size: 12px; font-weight: 800; gap: 8px; margin-bottom: 24px; } .district-breadcrumb button, .district-breadcrumb a { background: transparent; border: 0; color: #768398; font-size: 12px; font-weight: 800; padding: 0; } .district-breadcrumb button.active, .district-breadcrumb a.active { color: #14223a; } .district-breadcrumb svg { font-size: 14px; transform: rotate(-90deg); } .district-breadcrumb strong { color: #526171; } .district-ranking-title { margin-bottom: 28px; } .district-ranking-title h1 { color: #14223a; font-size: 34px; line-height: 1.1; margin: 0; } .district-ranking-title p { color: #526171; font-size: 14px; font-weight: 800; line-height: 1.45; margin: 11px 0 0; } .district-filter-card { align-items: end; background: #ffffff; border: 1px solid #e2e8ef; border-radius: 8px; box-shadow: 0 10px 30px rgba(20, 34, 58, 0.04); display: grid; gap: 20px; grid-template-columns: 1.05fr 1fr 1.05fr 1.05fr 1fr auto; margin-bottom: 26px; padding: 22px 20px; } .district-filter-card label { border-right: 1px solid #dfe7ef; display: grid; gap: 7px; padding-right: 20px; } .district-filter-card label:nth-of-type(5) { border-right: 0; } .district-filter-card span { color: #657284; font-size: 11px; font-weight: 900; } .district-filter-card select { appearance: none; background: #ffffff; border: 1px solid #d9e2ec; border-radius: 6px; color: #14223a; font-size: 13px; font-weight: 900; min-height: 44px; padding: 0 36px 0 14px; } .district-filter-card button, .district-methodology button { align-items: center; background: #0aa35f; border: 0; border-radius: 6px; color: #ffffff; display: inline-flex; font-size: 13px; font-weight: 950; gap: 8px; justify-content: center; min-height: 48px; padding: 0 25px; white-space: nowrap; } .district-ranking-tabs { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; max-width: 940px; } .district-ranking-tabs button { align-items: center; background: #ffffff; border: 1px solid #dfe7ef; border-radius: 7px; color: #14223a; display: grid; gap: 2px 12px; grid-template-columns: 32px minmax(0, 1fr); min-height: 64px; padding: 12px 16px; text-align: left; } .district-ranking-tabs button.active { background: #f3fff8; border-color: #0aa35f; color: #0a8f54; } .district-ranking-tabs svg { font-size: 24px; grid-row: span 2; } .district-ranking-tabs strong { font-size: 12px; font-weight: 950; } .district-ranking-tabs span { color: #657284; font-size: 10px; font-weight: 850; } .district-ranking-layout { align-items: start; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(390px, 560px); } .district-ranking-table-card, .district-side-card { background: #ffffff; border: 1px solid #e2e8ef; border-radius: 8px; box-shadow: 0 10px 30px rgba(20, 34, 58, 0.035); } .district-ranking-table-card { min-width: 0; padding: 28px 28px 22px; } .district-ranking-table-card h2, .district-side-card h2 { color: #14223a; font-size: 16px; line-height: 1.2; margin: 0 0 22px; } .district-table-wrap { min-width: 0; overflow-x: auto; } .district-table-wrap table { border-collapse: collapse; min-width: 980px; width: 100%; } .district-table-wrap tbody tr { border-bottom: 1px solid #e8eef4; } .district-table-wrap tbody tr:last-child { border-bottom: none; } .district-table-wrap th { border-bottom: 1px solid #e5edf4; color: #8390a3; font-size: 11px; font-weight: 950; padding: 0 12px 14px; text-align: left; } .district-table-wrap td { color: #526171; font-size: 12px; font-weight: 850; padding: 16px 12px; vertical-align: middle; } .district-table-wrap td strong { color: #14223a; display: block; font-size: 13px; font-weight: 950; } .district-table-wrap td small { color: #7a8798; display: block; font-size: 10px; font-weight: 800; margin-top: 3px; } .district-rank-number { align-items: center; background: #eef3f8; border-radius: 999px; color: #14223a; display: inline-flex; font-size: 12px; font-weight: 950; height: 26px; justify-content: center; width: 26px; } .district-rank-number.top-1 { background: #ffbf29; color: #ffffff; } .district-rank-number.top-2 { background: #dce5ee; color: #526171; } .district-rank-number.top-3 { background: #ffb486; color: #ffffff; } .district-change, .district-rating, .district-rating-list em { align-items: center; color: #0aa35f; display: inline-flex; font-weight: 950; gap: 5px; } .district-change-cell { white-space: nowrap; } .district-change { line-height: 1; vertical-align: middle; } .district-change svg, .district-rating svg, .district-rating-list svg { fill: currentColor; font-size: 13px; stroke-width: 2.1; } .district-popularity { align-items: center; display: flex; gap: 12px; min-width: 130px; position: relative; } .district-popularity em { color: #14223a; font-style: normal; min-width: 52px; } .district-popularity::after { background: #e2e8ef; border-radius: 999px; content: ''; height: 6px; width: 82px; } .district-popularity i { background: #0aa35f; border-radius: 999px; height: 6px; left: 64px; max-width: 82px; position: absolute; width: 60px; } .district-score { background: #effcf5; border: 1px solid #bdebd2; border-radius: 6px; color: #0a8f54; display: inline-flex; font-weight: 950; padding: 6px 10px; } .district-show-all, .district-side-card button { align-items: center; background: #ffffff; border: 1px solid #dfe7ef; border-radius: 6px; color: #14223a; display: inline-flex; font-size: 13px; font-weight: 950; gap: 7px; justify-content: center; min-height: 40px; } .district-show-all { margin: 22px auto 0; max-width: 480px; width: 100%; } .district-ranking-side { display: grid; gap: 28px; min-width: 0; } .district-side-card { padding: 24px; } .district-rating-list { display: grid; gap: 14px; list-style: none; margin: 0 0 22px; padding: 0; } .district-rating-list li { align-items: center; display: grid; gap: 12px; grid-template-columns: 26px minmax(0, 1fr) auto; } .district-rating-list li > span { align-items: center; background: #e8eef5; border-radius: 999px; color: #355072; display: inline-flex; font-size: 12px; font-weight: 950; height: 24px; justify-content: center; width: 24px; } .district-rating-list li:nth-child(1) > span { background: #ffbf29; color: #ffffff; } .district-rating-list li:nth-child(2) > span { background: #dce5ee; color: #526171; } .district-rating-list li:nth-child(3) > span { background: #ffb486; color: #ffffff; } .district-rating-list li:nth-child(4) > span { background: #e6f4ff; border: 1px solid #bfdfff; color: #1f5f99; } .district-rating-list li:nth-child(5) > span { background: #e6f4ff; border: 1px solid #bfdfff; color: #1f5f99; } .district-rating-list strong { color: #526171; font-size: 13px; font-weight: 900; } .district-rating-list em { font-size: 13px; font-style: normal; } .district-side-card > button { width: 100%; } .district-map { border: 1px solid #dfe7ef; border-radius: 10px; height: 392px; overflow: hidden; position: relative; } .district-map .imap { height: 100%; } .district-map .imap-marker { align-items: center; background: #10a15e; border: 2px solid #ffffff; border-radius: 999px; box-shadow: 0 6px 16px rgba(14, 64, 40, 0.35); display: inline-flex; font-size: 12px; font-weight: 950; height: 34px; justify-content: center; min-width: 34px; padding: 0; } .district-map .imap-marker.rank-1 { background: #ffbf29; border-color: #fff7dc; color: #ffffff; } .district-map .imap-marker.rank-2 { background: #dce5ee; border-color: #f7fbff; color: #355072; } .district-map .imap-marker.rank-3 { background: #ffb486; border-color: #fff1e6; color: #ffffff; } .district-methodology { align-items: center; background: linear-gradient(90deg, #effcf5, #ffffff); border: 1px solid #d8eee3; border-radius: 8px; display: grid; gap: 18px; grid-template-columns: 48px minmax(0, 1fr) auto; margin-top: 26px; padding: 22px 26px; } .district-methodology > span { align-items: center; background: #dff8eb; border-radius: 999px; color: #0aa35f; display: inline-flex; font-size: 27px; height: 44px; justify-content: center; width: 44px; } .district-methodology p { display: grid; gap: 4px; margin: 0; } .district-methodology strong { color: #14223a; font-size: 13px; font-weight: 950; } .district-methodology small { color: #657284; font-size: 12px; font-weight: 800; } .district-methodology button { background: #ffffff; border: 1px solid #0aa35f; color: #0a8f54; } .negotiation-page { background: #f7fafc; border-top: 1px solid #e6edf3; min-height: calc(100vh - 82px); padding: 24px 0 30px; } .negotiation-shell { margin: 0 auto; max-width: 1780px; padding: 0 44px; } .negotiation-breadcrumb { align-items: center; color: #768398; display: inline-flex !important; font-size: 12px; font-weight: 800; gap: 8px; margin-bottom: 18px; } .negotiation-breadcrumb button, .negotiation-breadcrumb a { background: transparent; border: 0; color: #768398; font-size: 12px; font-weight: 800; padding: 0; } .negotiation-breadcrumb button.active, .negotiation-breadcrumb a.active { color: #14223a; } .negotiation-breadcrumb svg { font-size: 14px; transform: rotate(-90deg); } .valuation-breadcrumb svg { font-size: 12px; transform: rotate(-90deg); } .negotiation-breadcrumb strong { color: #526171; } .negotiation-title { margin-bottom: 18px; } .negotiation-title h1 { color: #14223a; font-size: 42px; margin: 0; } .negotiation-title p { color: #657284; font-size: 14px; font-weight: 750; margin: 8px 0 0; } .negotiation-picker { align-items: center; display: grid; gap: 8px; grid-template-columns: 250px minmax(0, 1fr); margin-bottom: 14px; } .negotiation-picker label { color: #334355; font-size: 13px; font-weight: 900; } .negotiation-picker select { background: #ffffff; border: 1px solid #d8e3ee; border-radius: 8px; color: #26364b; font-size: 13px; font-weight: 750; min-height: 40px; padding: 0 12px; } .negotiation-picker select:focus { border-color: #0fa861; box-shadow: 0 0 0 3px rgba(15, 168, 97, 0.18); outline: 0; } .negotiation-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 370px; } .negotiation-main, .negotiation-side { display: grid; gap: 14px; } .negotiation-card { background: #ffffff; border: 1px solid #e3eaf1; border-radius: 10px; padding: 18px; } .negotiation-offer { align-items: center; display: grid; gap: 16px; grid-template-columns: 190px minmax(0, 1fr) 220px; } .negotiation-offer-photo { background-position: center; background-size: cover; border-radius: 8px; height: 108px; } .negotiation-offer-body h2 { color: #14223a; font-size: 28px; margin: 0; } .negotiation-offer-body p { color: #526171; font-size: 14px; margin: 4px 0; } .negotiation-offer-body small { color: #7b889a; font-size: 12px; font-weight: 800; } .negotiation-price { text-align: right; } .negotiation-price span, .negotiation-price em { color: #6f7d90; font-size: 12px; font-style: normal; font-weight: 800; } .negotiation-price strong { color: #14223a; display: block; font-size: 38px; margin: 6px 0; } .negotiation-range p { color: #334355; font-size: 13px; font-weight: 900; margin: 0; } .negotiation-range-head > div > small { color: #657284; display: block; font-size: 13px; font-weight: 800; margin-bottom: 8px; } .negotiation-range-head { align-items: start; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 230px; } .negotiation-range h3 { color: #0a9e58; font-size: 50px; margin: 6px 0 4px; } .negotiation-range > small { color: #657284; display: block; font-size: 13px; font-weight: 800; margin-bottom: 12px; } .negotiation-range-badge { background: #e9f7ef; border-radius: 5px; color: #0b8f52; display: inline-flex; font-size: 10px; font-style: normal; font-weight: 850; line-height: 1.2; margin-top: 0; padding: 6px 10px; } .negotiation-chance { --chance-color: #10a15e; --needle-rotation: -31deg; background: #ffffff; border: 1px solid #e4ebf2; border-radius: 8px; display: grid; gap: 2px 10px; grid-template-columns: minmax(0, 1fr) 58px; min-height: 106px; padding: 12px 14px; } .negotiation-chance span, .negotiation-chance small { color: #6e7b90; display: block; font-size: 11px; font-weight: 850; } .negotiation-chance strong { color: var(--chance-color); display: block; font-size: 22px; font-weight: 950; letter-spacing: -0.01em; line-height: 1.05; margin: 0; } .negotiation-gauge { align-self: start; height: 38px; justify-self: end; margin-top: 8px; position: relative; width: 54px; } .negotiation-gauge::before { border: 4px solid var(--chance-color); border-bottom: 0; border-radius: 999px 999px 0 0; content: ''; inset: 3px 3px 9px; position: absolute; } .negotiation-gauge::after { background: var(--chance-color); border-radius: 999px; content: ''; height: 3px; left: 50%; position: absolute; top: 22px; transform: translate(0, -50%) rotate(var(--needle-rotation)); transform-origin: 2px 50%; width: 15px; } .negotiation-gauge i { background: #ffffff; border: 3px solid var(--chance-color); border-radius: 999px; display: block; height: 8px; left: 50%; position: absolute; top: 22px; transform: translateX(-50%); width: 8px; } .negotiation-chance span, .negotiation-chance strong, .negotiation-chance small { grid-column: 1; } .negotiation-chance .negotiation-gauge { grid-column: 2; grid-row: 1 / span 3; } .negotiation-chance small { line-height: 1.38; margin-top: 2px; max-width: 205px; } .negotiation-chance.chance-low { --chance-color: #d94141; --needle-rotation: -158deg; } .negotiation-chance.chance-medium { --chance-color: #e58a1a; --needle-rotation: -90deg; } .negotiation-chance.chance-high { --chance-color: #10a15e; --needle-rotation: -22deg; } .negotiation-line { background: #e4ebf2; border-radius: 999px; height: 5px; margin: 8px 12px 12px; position: relative; } .negotiation-line::before { background: #10a15e; border-radius: 999px; content: ''; inset: 0 26% 0 0; position: absolute; } .negotiation-line .dot { background: #ffffff; border: 2px solid #10a15e; border-radius: 999px; height: 11px; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 11px; } .negotiation-line .dot.left { left: 0; } .negotiation-line .dot.middle { left: 74%; } .negotiation-line .dot.right { border-color: #d9e2ec; left: 100%; } .negotiation-line-meta { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .negotiation-line-meta strong { color: #14223a; display: block; font-size: 18px; } .negotiation-line-meta small { color: #6f7d90; font-size: 12px; font-weight: 800; } .negotiation-why h3, .negotiation-side h3 { color: #14223a; font-size: 20px; margin: 0 0 12px; } .negotiation-why-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .negotiation-why-grid article { align-items: start; background: #ffffff; border: 1px solid #edf2f7; border-radius: 8px; display: grid; gap: 8px; grid-template-columns: 22px minmax(0, 1fr); padding: 10px; } .negotiation-why-grid article span { align-items: center; background: #e9f8f0; border-radius: 999px; color: #10a15e; display: inline-flex; font-size: 13px; height: 22px; justify-content: center; width: 22px; } .negotiation-why-grid article span svg { font-size: 12px; } .negotiation-why-grid strong { color: #263850; display: block; font-size: 12px; margin-bottom: 4px; } .negotiation-why-grid small { color: #657284; font-size: 11px; font-weight: 750; } .negotiation-cta { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; } .negotiation-cta strong { color: #14223a; font-size: 16px; } .negotiation-cta p { color: #657284; font-size: 13px; margin: 4px 0 0; } .negotiation-cta button, .negotiation-side .ghost { background: #10a15e; border: 0; border-radius: 8px; color: #ffffff; cursor: pointer; font-size: 13px; font-weight: 900; min-height: 44px; padding: 0 16px; } .negotiation-cta-action { text-align: center; } .negotiation-cta-action small { color: #7b889a; display: block; font-size: 11px; font-weight: 800; margin-top: 6px; } .negotiation-side .ghost { background: #ffffff; border: 1px solid #d7e0eb; color: #334355; margin-top: 12px; width: 100%; } .negotiation-steps { color: #526171; display: grid; gap: 8px; margin: 0; padding-left: 18px; } .negotiation-steps li { font-size: 13px; font-weight: 850; } .negotiation-transactions { display: grid; gap: 10px; } .negotiation-transactions article { align-items: center; display: grid; gap: 10px; grid-template-columns: 68px minmax(0, 1fr) auto; } .negotiation-transactions .photo { background-position: center; background-size: cover; border-radius: 6px; height: 52px; } .negotiation-transactions strong { color: #1f324b; display: block; font-size: 12px; } .negotiation-transactions small, .negotiation-transactions em { color: #6f7d90; display: block; font-size: 11px; font-style: normal; font-weight: 750; } .negotiation-transactions .price { text-align: right; } .negotiation-side .tip strong { color: #0a8f54; display: block; font-size: 14px; } .negotiation-side .tip p { color: #526171; font-size: 13px; margin: 6px 0 0; } .negotiation-note { background: #fffaf1; border-color: #f3e2bf; } .negotiation-note strong { color: #8a6720; display: block; font-size: 13px; } .negotiation-note p { color: #8a6f34; font-size: 12px; font-weight: 750; margin: 6px 0 0; } .negotiation-footer { align-items: center; display: grid; gap: 10px; grid-template-columns: 20px minmax(0, 1fr) auto; padding-top: 12px; padding-bottom: 12px; } .negotiation-footer span { color: #0a9e58; display: inline-flex; font-size: 16px; } .negotiation-footer p, .negotiation-footer small { color: #6e7d90; font-size: 11px; font-weight: 800; margin: 0; } @media (max-width: 1280px) { .negotiation-layout { grid-template-columns: minmax(0, 1fr); } .negotiation-range-head { grid-template-columns: minmax(0, 1fr); } .negotiation-offer { grid-template-columns: 170px minmax(0, 1fr); } .negotiation-price { grid-column: 1 / -1; text-align: left; } .negotiation-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .negotiation-footer { grid-template-columns: 20px minmax(0, 1fr); } .negotiation-footer small { grid-column: 2; } } @media (max-width: 760px) { .negotiation-shell { padding: 0 14px; } .negotiation-picker { grid-template-columns: 1fr; } .negotiation-title h1 { font-size: 32px; } .negotiation-range h3 { font-size: 34px; } .negotiation-line-meta { grid-template-columns: 1fr; } .negotiation-cta { grid-template-columns: 1fr; } } @media (max-width: 1380px) { .district-filter-card { grid-template-columns: repeat(3, minmax(0, 1fr)); } .district-filter-card label { border-right: 0; padding-right: 0; } .district-filter-card button { grid-column: 1 / -1; } .district-ranking-layout { grid-template-columns: minmax(0, 1fr); } .district-ranking-side { grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1fr); } } @media (max-width: 1100px) { .district-ranking-shell { padding: 0 24px; } .district-ranking-tabs, .district-ranking-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } .district-methodology { grid-template-columns: 44px minmax(0, 1fr); } .district-methodology button { grid-column: 1 / -1; } } @media (max-width: 760px) { .district-ranking-page { padding-top: 18px; } .district-ranking-shell { padding: 0 16px; } .district-ranking-title h1 { font-size: 26px; } .district-filter-card, .district-ranking-tabs, .district-ranking-side, .district-methodology { grid-template-columns: 1fr; } .district-filter-card, .district-ranking-table-card, .district-side-card, .district-methodology { padding: 18px; } .district-map { height: 300px; } } @media (max-width: 1380px) { .header { gap: 18px; padding: 0 28px; } .nav { gap: 17px; } .nav button, .nav a, .icon-text span { font-size: 12px; } .post-button { min-width: 210px; } .hero-inner, .search-wrap, .content-shell { padding-left: 32px; padding-right: 32px; } .tool-card { grid-column: span 3; } .home-left-stack .tool-card { grid-column: auto; } .free-card { grid-column: span 12; } .home-right-stack .free-card { grid-column: auto; } .home-feature-grid { grid-template-columns: 1fr; } .main-grid { grid-template-columns: 1fr; } .buy-container { padding-left: 32px; padding-right: 32px; } .buy-results-zone { padding-left: 32px; padding-right: 32px; } .buy-results-zone::before { left: 32px; right: 32px; } .buy-search-row { grid-template-columns: 1fr; } .save-search { justify-self: start; } .buy-layout { grid-template-columns: 270px minmax(0, 1fr); } .map-column { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 380px; position: static; } .satellite-map { height: 420px; } .guides-container { padding-left: 32px; padding-right: 32px; } .guides-layout { grid-template-columns: 1fr; } .guides-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; } .guide-topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .article-grid, .related-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .listing-loop { --listing-step: calc(100% + var(--listing-gap)); } .listing-card { flex-basis: calc((100% - var(--listing-gap)) / 2); } .add-container { padding-left: 32px; padding-right: 32px; } .add-layout { grid-template-columns: minmax(0, 1fr) 330px; } .sell-hero-inner, .sell-container, .valuation-shell { padding-left: 32px; padding-right: 32px; } .valuation-layout { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); } .valuation-result-layout { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); } .valuation-result-hero { grid-template-columns: minmax(0, 1fr) 170px; padding: 30px; } .valuation-result-hero strong { font-size: 36px; } .valuation-result-details > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } .valuation-grid.three, .valuation-grid.four, .valuation-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .valuation-condition-grid, .valuation-amenity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .valuation-benefit-grid { grid-template-columns: 1fr; } .sell-card-grid { grid-template-columns: 1fr; } .sell-feature-strip > div { grid-template-columns: repeat(3, minmax(0, 1fr)); } .services-frame { grid-template-columns: 1fr; padding-left: 32px; padding-right: 32px; } .services-main { padding-right: 0; } .services-preview { border-left: 0; padding-left: 0; } .service-category-grid, .recommended-company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .header { grid-template-columns: 1fr auto; height: auto; padding-bottom: 18px; padding-top: 18px; } .nav { grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; } .nav button, .nav a { padding: 8px 0 12px; } .nav button.active::after, .nav a.active::after { bottom: 3px; } .header-actions { gap: 14px; } .icon-text span { display: none; } .notification-popover { right: -18px; top: calc(100% + 12px); } .notifications-head h1 { font-size: 29px; } .notifications-tabs { border-radius: 16px; flex-wrap: wrap; } .notifications-tabs button { flex: 1 1 calc(50% - 6px); } .notification-row { grid-template-columns: auto minmax(0, 1fr); } .notification-meta { grid-column: 2; justify-content: flex-start; } .hero { min-height: 720px; } .hero-inner { height: 720px; padding-top: 52px; } .hero-gradient { background: linear-gradient(180deg, rgba(244, 247, 251, 0) 62%, rgba(238, 243, 248, 0.84) 100%), linear-gradient(90deg, #f7faff 0%, rgba(247, 250, 255, 0.92) 34%, rgba(247, 250, 255, 0.18) 74%, rgba(247, 250, 255, 0) 100%); } .benefits { grid-template-columns: repeat(2, minmax(0, 220px)); } .ai-card { left: auto; right: 32px; top: 42px; } .tour-card { right: 32px; top: 455px; } .search-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .search-button { grid-column: span 2; } .buy-search-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .buy-search-button { grid-column: span 2; margin: 12px; } .mega-bar { grid-template-columns: 1fr 1fr; } .mega-cell { border-bottom: 1px solid #e9eef4; } .mega-cell-more { grid-column: span 2; } .buy-results-zone { margin-top: 28px; padding-left: 18px; padding-right: 18px; } .buy-results-zone::before { left: 18px; right: 18px; } .mega-cell-more .mega-more { justify-content: center; min-height: 52px; } .mega-search-btn { grid-column: span 2; margin: 12px; } .mega-pop { left: 0; max-width: calc(100vw - 48px); right: auto; width: 100%; } .mega-cell-more .mega-pop { left: 0; right: auto; } .mega-pop-more { width: 100%; } .mega-more-grid { grid-template-columns: 1fr; } .quick-filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .buy-toolbar { gap: 18px; grid-template-columns: 1fr; } .toolbar-actions { justify-content: space-between; } .buy-layout { grid-template-columns: 1fr; } .filters-panel { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .filters-head, .more-filters { grid-column: 1 / -1; } .filter-group { border-top: 1px solid #e6ebf1; } .map-column { grid-template-columns: 1fr; } .guides-hero h1 { font-size: 48px; } .guides-sidebar { grid-template-columns: 1fr; } .add-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } .add-progress div:not(:last-child)::after { display: none; } .add-layout { grid-template-columns: 1fr; } .add-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; } .listing-preview-card { grid-row: span 2; } .add-footer-benefits > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sell-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .valuation-layout { grid-template-columns: 1fr; } .valuation-result-layout { grid-template-columns: 1fr; } .valuation-result-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .valuation-progress { gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .valuation-progress button:not(:last-child)::after { display: none; } .valuation-sidebar { grid-template-columns: 1fr; } .valuation-result-actions { grid-template-columns: 1fr 1fr; } .valuation-result-actions .valuation-next { grid-column: 1 / -1; } .valuation-trust-row { grid-template-columns: 36px minmax(0, 1fr); } .sell-step:not(:last-child)::after { display: none; } .testimonial-grid { grid-template-columns: 1fr; } .testimonial-nav { display: none; } .services-search, .service-mini-search { grid-template-columns: 1fr; } .services-search .search-field, .service-mini-search .search-field { border-right: 0; border-top: 1px solid #e3e9f0; } .services-search .search-field:first-child, .service-mini-search .search-field:first-child { border-top: 0; } .services-search .buy-search-button { margin: 12px; } .service-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-step:not(:last-child)::after { display: none; } .directory-card { grid-template-columns: 120px minmax(0, 1fr); } .directory-card > button, .directory-card > svg { justify-self: start; } .profile-head { grid-template-columns: 82px minmax(0, 1fr); } .profile-head > button { grid-column: 1 / -1; margin-top: 0; } .profile-actions, .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .header { display: flex; flex-wrap: wrap; padding: 16px 18px; } .map-field-num, .map-field-select { flex: 1; width: auto; } .map-offer-card { left: 12px; right: 12px; width: auto; } .brand { min-width: 0; } .brand strong { font-size: 24px; } .header-actions { margin-left: auto; } .post-button { display: none; } .hero { min-height: 760px; } .hero-photo { object-position: 68% center; } .hero-gradient { background: linear-gradient(180deg, rgba(247, 250, 255, 0.94) 0%, rgba(247, 250, 255, 0.82) 54%, #eef3f8 100%); } .hero-inner, .search-wrap, .content-shell { padding-left: 18px; padding-right: 18px; } .hero-inner { height: 760px; padding-top: 44px; } .hero h1 { font-size: 48px; } .hero-copy p { font-size: 18px; margin-top: 30px; } .benefits { gap: 18px; grid-template-columns: 1fr 1fr; margin-top: 34px; } .ai-card { left: 18px; right: auto; top: 388px; width: min(270px, calc(100% - 36px)); } .tour-card { left: 18px; right: auto; top: 590px; } .search-wrap { margin-top: -88px; } .search-tabs { width: 100%; } .search-tabs button { flex: 1; min-width: 0; padding-left: 10px; padding-right: 10px; } .search-panel { grid-template-columns: 1fr; } .search-field { border-right: 0; border-top: 1px solid #e3e9f0; } .search-field:first-child { border-top: 0; } .search-button { grid-column: auto; } .content-shell { margin-top: 34px; } .buy-container { padding-left: 18px; padding-right: 18px; } .buy-hero h1 { font-size: 30px; } .buy-search-panel, .quick-filter-row { grid-template-columns: 1fr; } .buy-search-panel .search-field { border-right: 0; border-top: 1px solid #e3e9f0; } .buy-search-panel .search-field:first-child { border-top: 0; } .buy-search-button { grid-column: auto; } .toolbar-actions { align-items: flex-start; flex-direction: column; } .filters-panel { grid-template-columns: 1fr; } .result-card { grid-template-columns: 1fr; padding: 0; } .result-info, .result-side { padding-left: 18px; padding-right: 18px; } .result-side { align-items: start; justify-items: start; padding-top: 0; } .satellite-map { height: 470px; } .guides-container { padding-left: 18px; padding-right: 18px; } .guides-hero { min-height: 520px; } .guides-hero-shade { background: linear-gradient(180deg, rgba(248, 250, 252, 0.97) 0%, rgba(248, 250, 252, 0.9) 66%, #f8fafc 100%); } .guides-hero-inner > div { padding-top: 42px; } .guides-hero h1 { font-size: 38px; } .guides-hero p { font-size: 16px; } .guides-search { grid-template-columns: 20px minmax(0, 1fr); padding-bottom: 12px; } .guides-search button { grid-column: 1 / -1; } .popular-links { gap: 10px 14px; } .guide-topic-grid, .article-grid, .related-offer-grid, .guides-sidebar { grid-template-columns: 1fr; } .article-image { height: 190px; } .add-container { padding-left: 18px; padding-right: 18px; } .add-title h1 { font-size: 30px; } .add-progress, .add-three-grid, .add-location-grid, .add-checkbox-grid, .add-sidebar, .add-footer-benefits > div { grid-template-columns: 1fr; } .listing-preview-card { grid-row: auto; } .add-form-card, .listing-preview-card, .add-side-card, .add-footer-benefits { padding: 18px; } .preview-image { height: 190px; } .next-step-button { width: 100%; } .add-location-actions { flex-direction: column-reverse; gap: 10px; } .extra-details-grid, .media-option-grid, .amenities-option-grid { grid-template-columns: 1fr; } .media-billing-row { grid-template-columns: 1fr; } .extra-actions .next-step-button { min-width: 0; } .back-step-button { width: 100%; } .sell-hero { min-height: 680px; } .sell-hero-gradient { background: linear-gradient(180deg, rgba(248, 251, 253, 0.97) 0%, rgba(248, 251, 253, 0.9) 58%, #f7fafc 100%); } .sell-hero-inner, .sell-container, .valuation-shell { padding-left: 18px; padding-right: 18px; } .valuation-page { padding-top: 22px; } .valuation-title h1 { font-size: 28px; } .valuation-progress { grid-template-columns: 1fr; margin: 28px 0; } .valuation-progress button { min-height: 34px; } .valuation-grid.two, .valuation-grid.three, .valuation-grid.four, .valuation-grid.five { grid-template-columns: 1fr; } .valuation-result-hero { grid-template-columns: 1fr; padding: 22px; } .valuation-result-hero strong { font-size: 32px; line-height: 1.15; } .valuation-result-details > div, .valuation-result-sidebar, .valuation-result-actions { grid-template-columns: 1fr; } .valuation-result-actions .valuation-back:nth-child(2) { justify-self: stretch; } .valuation-result-actions button { width: 100%; } .valuation-condition-grid, .valuation-amenity-grid { grid-template-columns: 1fr; } .valuation-toggle-wide { max-width: none; } .valuation-form-card, .valuation-preview-card { padding: 18px; } .valuation-actions-row { align-items: stretch; flex-direction: column; gap: 10px; margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; } .valuation-next, .valuation-back { width: 100%; } .valuation-next { min-width: 0; } .valuation-estimate-box { grid-template-columns: 1fr; padding: 20px; } .valuation-house-graphic { height: 116px; } .valuation-benefit-grid, .valuation-trust-row { grid-template-columns: 1fr; } .valuation-trust-row > span { margin-top: 8px; } .sell-copy { padding-top: 36px; } .sell-copy h1 { font-size: 36px; } .sell-benefit-row { align-items: flex-start; flex-direction: column; gap: 12px; } .sell-steps, .sell-feature-strip > div, .testimonial-grid, .sell-bottom-cta { grid-template-columns: 1fr; } .sell-bottom-cta small { grid-column: auto; margin-top: -6px; text-align: left; } .services-frame { padding-left: 18px; padding-right: 18px; } .services-hero { min-height: 310px; } .services-hero::after { background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(248, 250, 252, 0.88) 62%, rgba(248, 250, 252, 0.45) 100%); } .services-hero-copy { padding-top: 32px; } .services-hero h1 { font-size: 31px; } .service-category-grid, .recommended-company-grid, .service-steps, .profile-actions, .profile-stats { grid-template-columns: 1fr; } .service-panel { padding-left: 18px; padding-right: 18px; } .directory-card { grid-template-columns: 1fr; } .directory-photo { min-height: 160px; } .profile-head { grid-template-columns: 1fr; } .profile-logo { margin-top: -41px; } .profile-actions, .profile-tabs, .profile-about, .profile-head { padding-left: 18px; padding-right: 18px; } .profile-tabs { gap: 16px; overflow-x: auto; } .tool-card, .free-card { grid-column: span 12; } .free-card { grid-template-columns: 1fr; } .house-graphic { display: none; } .main-grid { gap: 28px; } .section-head { align-items: flex-start; gap: 12px; } .listing-grid, .city-grid { grid-template-columns: 1fr; } .listing-loop { --listing-step: calc((100% + var(--listing-gap)) / 2); } .listing-card { flex-basis: 100%; } .all-cities { grid-column: auto; } } @media (max-width: 460px) { .hero h1 { font-size: 39px; } .benefits { grid-template-columns: 1fr; } .tour-card { align-items: flex-start; flex-direction: column; top: 610px; } .free-card button { min-width: 0; width: 100%; } .price-row { align-items: flex-start; flex-direction: column; } .view-toggle { width: 100%; } .view-toggle button { flex: 1; justify-content: center; } } @media (max-width: 1280px) { .history-shell { padding-left: 28px; padding-right: 28px; } .history-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .history-search { grid-column: span 2; } .history-layout { grid-template-columns: 1fr; } .history-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .history-page { padding-top: 20px; } .history-shell { padding-left: 18px; padding-right: 18px; } .history-title { margin: 22px 0; } .history-title h1 { font-size: 30px; } .history-filter-panel, .history-chart-card, .history-insights-card, .history-alert-card, .history-side-card { padding: 18px; } .history-filter-grid { grid-template-columns: 1fr 1fr; } .history-field.location, .history-search { grid-column: 1 / -1; } .history-popular-row .history-clear { margin-left: 0; } .history-chart-head { display: grid; } .history-chart-head strong { font-size: 32px; } .history-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .history-stat-grid article { min-height: 116px; } .history-insights-card > div, .history-sidebar { grid-template-columns: 1fr; } .history-insights-card article { align-items: start; } .history-alert-card { align-items: start; grid-template-columns: 48px minmax(0, 1fr); } .history-alert-card button { grid-column: 1 / -1; width: 100%; } } @media (max-width: 620px) { .history-filter-grid, .history-stat-grid { grid-template-columns: 1fr; } .history-field.compact > div, .history-dual-input { grid-template-columns: 1fr 1fr; } .history-chart-head label { align-items: stretch; display: grid; white-space: normal; } .history-months { font-size: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 6px; } .history-side-card.recent article { grid-template-columns: 64px minmax(0, 1fr) 16px; } .history-side-card.recent img { width: 64px; } } .login-shell { background: #f3f5f8; } .login-page { background: #f3f5f8; min-height: calc(100vh - 82px); overflow: hidden; position: relative; } .login-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); gap: 48px; margin: 0 auto; max-width: 1280px; min-height: calc(100vh - 82px); padding: 42px 34px 168px; position: relative; } .login-left, .login-right { position: relative; } .login-left { display: grid; grid-template-rows: auto auto minmax(180px, 1fr); min-width: 0; } .login-right { align-items: start; display: flex; justify-content: center; } .login-room-photo { align-self: end; background-position: center bottom; background-repeat: no-repeat; background-size: cover; border-radius: 12px; height: 280px; margin-top: 18px; width: min(660px, 100%); } .login-room-photo::after { background: linear-gradient(90deg, rgba(243, 245, 248, 0.12) 0%, rgba(243, 245, 248, 0.05) 62%, rgba(243, 245, 248, 0.34) 100%), linear-gradient(180deg, rgba(243, 245, 248, 0.08) 0%, rgba(243, 245, 248, 0.02) 30%, rgba(243, 245, 248, 0) 80%, rgba(243, 245, 248, 0.26) 100%); content: ""; inset: 0; position: absolute; } .login-intro { max-width: 560px; } .login-intro h1 { color: #14223a; font-size: 46px; font-weight: 950; line-height: 1.04; margin: 0; } .login-intro h1 span { color: #128f50; display: block; } .login-intro p { color: #596678; font-size: 16px; font-weight: 700; line-height: 1.5; margin: 16px 0 0; max-width: 560px; } .login-benefits { display: grid; gap: 20px; margin-top: 30px; max-width: 620px; } .login-benefits article { align-items: center; display: flex; gap: 14px; } .login-benefits article > span, .login-trust article > span { align-items: center; background: #e5f4eb; border-radius: 999px; box-shadow: none; color: #16a464; display: grid; flex: 0 0 auto; height: 36px; place-items: center; width: 36px; } .login-benefits svg, .login-trust svg { font-size: 18px; stroke-width: 2; } .login-benefits p, .login-trust p { margin: 0; } .login-benefits strong { color: #14223a; display: block; font-size: 14px; font-weight: 950; } .login-benefits small { color: #5b697a; display: block; font-size: 12px; font-weight: 750; line-height: 1.4; margin-top: 4px; } .login-card { background: #ffffff; border: 1px solid #e1e7ef; border-radius: 10px; box-shadow: 0 16px 42px rgba(20, 37, 62, 0.08); display: grid; gap: 14px; padding: 28px 28px 22px; width: min(430px, 100%); } .login-card-head { text-align: left; } .login-card-head h2 { color: #14223a; font-size: 38px; font-weight: 950; line-height: 1.1; margin: 0; } .login-card-head p { align-items: center; color: #5f7087; display: flex; font-size: 14px; font-weight: 750; gap: 5px; margin: 6px 0 2px; } .login-card-head p button { background: transparent; border: 0; color: #109253; font-size: 14px; font-weight: 900; padding: 0; } .login-field { display: grid; gap: 8px; } .login-field > span { color: #142238; font-size: 12px; font-weight: 900; } .login-field div { position: relative; } .login-field input { background: #ffffff; border: 1px solid #d8e0ea; border-radius: 6px; color: #07142b; font-size: 13px; font-weight: 800; height: 42px; outline: none; padding: 0 38px 0 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 100%; } .login-field input:focus { border-color: #16a464; box-shadow: 0 0 0 3px rgba(22, 164, 100, 0.11); } .login-field input::placeholder { color: #8492a6; } .login-field svg { color: #6b7b90; font-size: 15px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } .login-options-row { align-items: center; display: flex; justify-content: space-between; margin-top: -2px; } .remember-me { align-items: center; color: #647487; display: inline-flex; font-size: 12px; font-weight: 800; gap: 8px; } .remember-me input { accent-color: #109253; margin: 0; } .forgot-password { background: transparent; border: 0; color: #108d50; font-size: 12px; font-weight: 950; padding: 0; } .login-submit { background: #17a960; border: 0; border-radius: 6px; box-shadow: none; color: #ffffff; font-size: 15px; font-weight: 950; height: 44px; width: 100%; } .login-divider { align-items: center; color: #6e7d92; display: grid; font-size: 13px; font-weight: 850; grid-template-columns: 1fr auto 1fr; gap: 9px; } .login-divider::before, .login-divider::after { background: #dfe5ed; content: ""; height: 1px; } .social-login { align-items: center; background: #ffffff; border: 1px solid #dfe5ed; border-radius: 6px; color: #142238; display: flex; font-size: 14px; font-weight: 900; gap: 10px; height: 42px; justify-content: center; width: 100%; } .google-mark, .facebook-mark { align-items: center; display: grid; flex: 0 0 18px; font-size: 14px; font-weight: 950; height: 18px; place-items: center; width: 18px; } .google-mark { color: #1a73e8; font-family: Arial, sans-serif; } .facebook-mark { background: #1877f2; border-radius: 999px; color: #ffffff; font-family: Arial, sans-serif; font-size: 14px; line-height: 1; } .login-security-note { align-items: center; color: #7a8798; display: inline-flex; font-size: 12px; font-weight: 800; gap: 8px; margin: 2px 0 0; } .login-security-note svg { font-size: 14px; } .login-field-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } .terms-checkbox { align-items: flex-start; color: #5f7087; display: flex; font-size: 12px; font-weight: 750; gap: 9px; line-height: 1.4; } .terms-checkbox input { accent-color: #109253; margin-top: 2px; } .register-choice-card { padding-bottom: 26px; } .register-choice-subtitle { color: #5f7087; font-size: 14px; font-weight: 750; margin: 6px 0 2px; } .register-choice-list { display: grid; gap: 12px; margin-top: 6px; } .register-choice-option { align-items: center; background: #ffffff; border: 1px solid #dfe5ed; border-radius: 8px; display: grid; gap: 12px; grid-template-columns: 40px minmax(0, 1fr) 16px; padding: 14px 16px; text-align: left; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .register-choice-option:hover { border-color: #16a464; box-shadow: 0 0 0 3px rgba(22, 164, 100, 0.1); } .register-choice-option > span:first-child { align-items: center; background: #e8f8ef; border-radius: 999px; color: #109253; display: grid; height: 40px; place-items: center; width: 40px; } .register-choice-option > span:first-child svg { height: 18px; width: 18px; } .register-choice-copy { display: grid; gap: 2px; } .register-choice-copy strong { color: #14223a; font-size: 14px; font-weight: 900; } .register-choice-copy small { color: #5f7087; font-size: 12px; font-weight: 700; line-height: 1.35; } .register-choice-option > svg { color: #109253; height: 16px; width: 16px; } .register-choice-footer { color: #5f7087; font-size: 14px; font-weight: 750; margin-top: 4px; text-align: center; } .register-choice-footer button { background: transparent; border: 0; color: #109253; font-size: 14px; font-weight: 900; padding: 0; } .register-type-tabs { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; } .register-type-tabs button { align-items: center; background: #ffffff; border: 1px solid #dfe5ed; border-radius: 999px; color: #5f7087; display: inline-flex; font-size: 12px; font-weight: 850; gap: 7px; height: 38px; justify-content: center; } .register-type-tabs button.active { background: #17a960; border-color: #17a960; color: #ffffff; } @media (max-width: 600px) { .login-field-row, .register-type-tabs { grid-template-columns: 1fr; } } .register-pending-card { justify-items: center; padding: 34px 28px; text-align: center; } .register-pending-icon { align-items: center; background: #fff4e0; border-radius: 999px; color: #b8770a; display: grid; height: 56px; place-items: center; width: 56px; } .register-pending-icon svg { height: 24px; width: 24px; } .register-pending-card h2 { color: #14223a; font-size: 26px; font-weight: 950; margin: 16px 0 0; } .register-pending-lead { color: #14223a; font-size: 14px; font-weight: 750; margin: 10px 0 0; } .register-pending-lead strong { color: #b8770a; } .register-pending-note { color: #5f7087; font-size: 13px; font-weight: 700; line-height: 1.5; margin: 10px 0 20px; } .register-pending-card .login-submit { width: auto; min-width: 220px; padding: 0 24px; } .login-trust { align-items: center; background: #f5f7fa; border-top: 1px solid #e2e8f0; bottom: 0; display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); left: 0; min-height: 122px; padding: 24px 48px; position: absolute; right: 0; } .login-trust article { align-items: center; display: flex; gap: 12px; min-width: 0; } .login-trust article > span { background: #e6f8ef; box-shadow: none; height: 38px; width: 38px; } .login-trust svg { font-size: 17px; } .login-trust strong { color: #14223a; display: block; font-size: 13px; font-weight: 950; line-height: 1.2; } .login-trust small { color: #63748a; display: block; font-size: 11px; font-weight: 750; line-height: 1.35; margin-top: 4px; } @media (max-width: 1080px) { .login-page { background: #f8fafc; min-height: calc(100vh - 82px); overflow: auto; } .login-stage { grid-template-columns: 1fr; gap: 24px; max-width: 760px; min-height: auto; padding: 26px 16px 34px; } .login-left, .login-right { width: 100%; } .login-left { grid-template-rows: auto auto auto; } .login-right { justify-content: stretch; } .login-room-photo { border-radius: 8px; height: 220px; margin-top: 22px; position: relative; width: 100%; } .login-intro, .login-benefits { width: 100%; } .login-intro h1 { font-size: 34px; } .login-intro p { font-size: 13px; max-width: none; } .login-benefits { gap: 14px; margin-top: 18px; } .login-benefits strong { font-size: 13px; } .login-benefits small { font-size: 11px; } .login-card { padding: 22px 16px 18px; width: 100%; } .login-card-head h2 { font-size: 28px; } .login-card-head p, .login-card-head p button, .login-field > span, .login-field input, .remember-me, .forgot-password, .login-submit, .social-login, .login-divider, .login-security-note { font-size: 13px; } .login-card-head h2 { font-size: 22px; } .login-options-row { align-items: flex-start; flex-direction: column; gap: 8px; } .login-field input, .login-submit, .social-login { height: 44px; } .login-trust { border-top: 1px solid #e2e8f0; min-height: 0; padding: 16px; position: static; grid-template-columns: 1fr; } .login-trust article > span { height: 34px; width: 34px; } .login-trust strong { font-size: 12px; } .login-trust small { font-size: 10px; } } .notify-bell { position: relative; } .notify-bell-wrap { position: relative; } .notify-bell.open { color: #0b9152; } .notify-bell i { background: #14a45f; border: 2px solid #ffffff; border-radius: 999px; height: 10px; position: absolute; right: -2px; top: -2px; width: 10px; } .notification-popover { background: #ffffff; border: 1px solid #d8e1ec; border-radius: 12px; box-shadow: 0 30px 60px rgba(16, 28, 52, 0.18); position: absolute; right: 0; top: calc(100% + 16px); width: min(360px, calc(100vw - 24px)); z-index: 60; } .notification-popover::before { background: #ffffff; border-left: 1px solid #d8e1ec; border-top: 1px solid #d8e1ec; content: ""; height: 12px; position: absolute; right: 17px; top: -7px; transform: rotate(45deg); width: 12px; } .notification-popover-head { align-items: center; background: linear-gradient(180deg, #17b567 0%, #109457 100%); border-radius: 12px 12px 0 0; color: #ffffff; display: flex; justify-content: space-between; padding: 13px 14px; } .notification-popover-head h3 { font-size: 13px; margin: 0; } .notification-popover-head button { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 7px; color: #ffffff; font-size: 12px; font-weight: 700; height: 30px; padding: 0 10px; } .notification-popover-list { display: grid; } .notification-popover-item { align-items: start; border-top: 1px solid #eef2f7; display: grid; gap: 9px; grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 11px 14px; } .notification-popover-item strong { color: #15233f; display: block; font-size: 13px; line-height: 1.25; } .notification-popover-item small { color: #5b6880; display: block; font-size: 12px; line-height: 1.35; margin-top: 2px; } .notification-popover-item em { color: #76849c; font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; } .notification-icon { align-items: center; border-radius: 11px; display: grid; flex: 0 0 auto; height: 38px; place-items: center; width: 38px; } .notification-icon svg { font-size: 17px; } .account-menu-wrap { position: relative; } .account-menu-trigger.open { color: #0b9152; } .account-menu-trigger.open svg { color: #0b9152; } .account-popover { background: #ffffff; border: 1px solid #d8e1ec; border-radius: 12px; box-shadow: 0 30px 60px rgba(16, 28, 52, 0.18); display: grid; padding: 8px; position: absolute; right: 0; top: calc(100% + 16px); width: min(240px, calc(100vw - 24px)); z-index: 60; } .account-popover::before { background: #ffffff; border-left: 1px solid #d8e1ec; border-top: 1px solid #d8e1ec; content: ""; height: 12px; position: absolute; right: 17px; top: -7px; transform: rotate(45deg); width: 12px; } .account-popover button { align-items: center; background: transparent; border: 0; border-radius: 8px; color: #1f2d42; display: flex; font-size: 13px; font-weight: 800; gap: 10px; min-height: 42px; padding: 0 10px; text-align: left; width: 100%; } .account-popover button:hover { background: #f2f6fa; } .account-popover button svg { color: #6b7b90; font-size: 16px; } .account-popover-logout { border-top: 1px solid #eef2f7; border-radius: 0 0 8px 8px; color: #c23b3b; margin-top: 4px; padding-top: 12px !important; } .account-popover-logout svg { color: #c23b3b !important; } .account-popover-logout:hover { background: #fdecec !important; } .notification-icon.listing { background: #eef5ff; color: #3d76ec; } .notification-icon.messages { background: #e9f8ef; color: #0e9959; } .notification-icon.system { background: #fff2e6; color: #e3782f; } .notification-unread-dot { background: #15a35f; border-radius: 999px; height: 8px; margin-top: 5px; width: 8px; } .notifications-page { background: #f5f7fa; min-height: calc(100vh - 82px); padding: 20px 18px; } .notifications-shell { margin: 0 auto; max-width: none; } .notifications-panel { background: #ffffff; border: 1px solid #e3e9f0; border-radius: 12px; box-shadow: 0 18px 32px rgba(28, 38, 58, 0.07); max-width: none; padding: 18px; width: 100%; } .notifications-head { align-items: center; display: flex; justify-content: space-between; } .notifications-head h1 { color: #1c2a43; font-size: 37px; letter-spacing: -0.02em; margin: 0; } .notifications-head button { align-items: center; background: transparent; border: 0; border-radius: 999px; color: #556178; display: grid; height: 34px; place-items: center; width: 34px; } .notifications-head button:hover { background: #eef3f8; color: #1d2a45; } .notifications-tabs { background: #f2f5f8; border: 1px solid #ebf0f6; border-radius: 999px; display: flex; gap: 8px; margin-top: 22px; padding: 6px; } .notifications-tabs button { background: transparent; border: 0; border-radius: 999px; color: #526073; font-size: 14px; font-weight: 700; min-height: 40px; padding: 0 20px; } .notifications-tabs button.active { background: linear-gradient(180deg, #17ba67 0%, #129657 100%); box-shadow: 0 8px 14px rgba(18, 150, 87, 0.25); color: #ffffff; } .notifications-group { margin-top: 22px; } .notifications-group h2 { color: #32405a; font-size: 22px; margin: 0 0 10px; } .notifications-list { border-top: 1px solid #eaf0f5; } .notification-row { align-items: center; border-bottom: 1px solid #edf2f7; display: grid; gap: 14px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 15px 2px; } .notification-copy strong { color: #1a2a45; display: block; font-size: 16px; line-height: 1.28; } .notification-copy p { color: #526073; font-size: 14px; line-height: 1.4; margin: 3px 0 0; } .notification-meta { align-items: center; display: flex; gap: 14px; justify-content: flex-end; } .notification-meta small { color: #748399; font-size: 12px; font-weight: 700; white-space: nowrap; } .notification-meta svg { color: #8191a7; font-size: 15px; } .favorites-page { background: #f5f7fa; min-height: calc(100vh - 82px); padding: 24px 20px; } .favorites-shell { margin: 0 auto; max-width: 1420px; } .favorites-head { align-items: start; display: flex; justify-content: space-between; gap: 18px; } .favorites-head h1 { color: #162742; font-size: clamp(36px, 3vw, 52px); letter-spacing: -0.02em; margin: 0; } .favorites-head p { color: #66778f; font-size: 15px; font-weight: 600; margin: 10px 0 0; } .favorites-saved-pill { align-items: center; background: #ffffff; border: 1px solid #dce5ef; border-radius: 999px; color: #1c2e4a; display: inline-flex; font-size: 13px; font-weight: 800; gap: 8px; min-height: 38px; padding: 0 14px; } .favorites-saved-pill svg { color: #16a35f; } .favorites-toolbar { align-items: center; border-bottom: 1px solid #e4ebf3; display: flex; gap: 16px; justify-content: space-between; margin-top: 18px; padding-bottom: 10px; } .favorites-tabs { display: flex; gap: 4px; } .favorites-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #4f617c; font-size: 15px; font-weight: 800; min-height: 38px; padding: 0 10px; } .favorites-tabs button.active { border-bottom-color: #14a15d; color: #14a15d; } .favorites-controls { align-items: center; display: flex; gap: 10px; } .favorites-sort-control { align-items: center; background: #fdfefe; border: 1px solid #d8e1ec; border-radius: 10px; color: #52627b; display: inline-flex; font-size: 12px; font-weight: 700; gap: 4px; min-height: 40px; padding: 0 11px; position: relative; } .favorites-sort-control span { color: #61728b; font-size: 12px; font-weight: 700; } .favorites-sort-control select { appearance: none; background: transparent; border: 0; color: #1f304a; font-size: 13px; font-weight: 800; min-height: 36px; padding: 0 20px 0 2px; } .favorites-sort-control::after { border-bottom: 1.7px solid #52637d; border-right: 1.7px solid #52637d; content: ''; height: 6px; pointer-events: none; position: absolute; right: 12px; top: 50%; transform: translateY(-62%) rotate(45deg); width: 6px; } .favorites-sort-control:focus-within { border-color: #16a15d; box-shadow: 0 0 0 3px rgba(22, 161, 93, 0.14); } .favorites-sort-control select:focus { outline: none; } .favorites-filter-button { align-items: center; background: #fdfefe; border: 1px solid #d8e1ec; border-radius: 10px; color: #22324d; display: inline-flex; font-size: 13px; font-weight: 800; gap: 6px; min-height: 40px; padding: 0 14px; } .favorites-filter-button:hover { background: #ffffff; border-color: #c8d6e7; } .favorites-filter-button.active { background: #eaf7ef; border-color: #bfe7cf; color: #157d4c; } .favorites-filter-button.subtle { color: #4f617a; } .favorites-filters-panel { background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%); border: 1px solid #dce7f3; border-radius: 12px; display: grid; gap: 10px; margin-top: 12px; padding: 12px; } .favorites-search-input { align-items: center; background: #ffffff; border: 1px solid #d5e1ef; border-radius: 10px; display: flex; gap: 8px; min-height: 40px; padding: 0 11px; } .favorites-search-input svg { color: #7387a3; font-size: 14px; } .favorites-search-input input { background: transparent; border: 0; color: #1f304a; flex: 1; font-size: 13px; font-weight: 700; min-width: 0; } .favorites-search-input input:focus { outline: none; } .favorites-quick-toggles { display: flex; flex-wrap: wrap; gap: 8px; } .favorites-quick-toggles button { align-items: center; background: #ffffff; border: 1px solid #d7e3f1; border-radius: 999px; color: #3e5574; display: inline-flex; font-size: 12px; font-weight: 800; gap: 6px; min-height: 34px; padding: 0 11px; } .favorites-quick-toggles button:hover { border-color: #bdd2e8; } .favorites-quick-toggles button.active { background: #e9f7ef; border-color: #b9e4ca; color: #187947; } .favorites-filter-button svg { color: #5f6f86; font-size: 13px; } .favorites-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 300px; margin-top: 18px; } .favorites-list { display: grid; gap: 12px; } .favorite-card { background: #ffffff; border: 1px solid #e2e9f2; border-radius: 14px; box-shadow: 0 8px 20px rgba(20, 38, 63, 0.05); display: grid; gap: 12px; grid-template-columns: 300px minmax(0, 1fr) auto; min-height: 168px; padding: 9px; } .favorite-card.empty { align-items: center; grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 220px; padding: 28px 20px; text-align: center; } .favorite-card.empty .favorite-content { max-width: 460px; padding-top: 0; } .favorite-card.empty .favorite-content p { display: block; margin: 10px 0 0; } .favorite-empty-cta { align-items: center; background: #169a5b; border: 0; border-radius: 10px; color: #ffffff; display: inline-flex; font-size: 13px; font-weight: 800; gap: 8px; margin-top: 14px; min-height: 40px; padding: 0 16px; } .favorite-empty-cta:hover { background: #12844d; } .favorite-empty-cta svg { font-size: 14px; stroke-width: 2.4; } .favorite-photo { background-position: center; background-size: cover; border-radius: 10px; min-height: 148px; position: relative; } .favorite-badge { background: #e8f7ef; border-radius: 8px; color: #129457; font-size: 12px; font-weight: 800; left: 10px; padding: 4px 9px; position: absolute; top: 10px; } .favorite-badge.rent { background: #eaf2ff; color: #3b6fdb; } .favorite-photos-count { align-items: center; background: rgba(17, 27, 42, 0.86); border-radius: 7px; bottom: 8px; color: #ffffff; display: inline-flex; font-size: 12px; font-weight: 700; gap: 6px; left: 8px; min-height: 25px; padding: 0 8px; position: absolute; } .favorite-content { padding-top: 4px; } .favorite-content strong { color: #192a45; display: block; font-size: 22px; line-height: 1; } .favorite-content h3 { color: #14233d; font-size: 17px; margin: 8px 0 0; } .favorite-content p { align-items: center; color: #62738d; display: inline-flex; font-size: 13px; font-weight: 700; gap: 6px; margin: 8px 0 0; } .favorite-content p svg { color: #7a8ca6; font-size: 13px; } .favorite-content ul { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 10px 0 0; padding: 0; } .favorite-content li { align-items: center; color: #455a75; display: inline-flex; font-size: 12px; font-weight: 700; gap: 6px; } .favorite-content li svg { color: #6f819b; font-size: 13px; } .favorite-content small { color: #7a8ca4; display: block; font-size: 12px; font-weight: 700; margin-top: 10px; } .favorite-actions { align-self: start; display: flex; gap: 4px; justify-content: flex-end; position: relative; } .favorite-actions button { align-items: center; background: transparent; border: 0; border-radius: 6px; color: #71829c; display: grid; height: 24px; place-items: center; width: 24px; } .favorite-actions .favorite-like { color: #e14c56; } .favorite-actions .favorite-like svg { fill: currentColor; stroke: none; } .favorite-more { color: #000000; } .favorite-more svg { font-size: 16px; stroke-width: 3.6; } .favorite-actions button:hover { background: transparent; opacity: 0.8; } .favorite-menu { background: #ffffff; border: 1px solid #d6e1ee; border-radius: 10px; box-shadow: 0 14px 28px rgba(24, 40, 62, 0.14); display: grid; min-width: 196px; overflow: hidden; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; } .favorite-menu button { align-items: center; background: #ffffff; border: 0; border-bottom: 1px solid #edf2f7; border-radius: 0; color: #1d2f49; display: flex; font-size: 13px; font-weight: 700; height: auto; justify-content: flex-start; min-height: 38px; opacity: 1; padding: 0 12px; width: 100%; } .favorite-menu button:last-child { border-bottom: 0; } .favorite-menu button:hover { background: #f5f8fc; opacity: 1; } .favorite-menu button:disabled { color: #9aa8ba; cursor: default; } .favorites-feedback { align-items: center; background: #edf7f1; border: 1px solid #cce8d9; border-radius: 10px; color: #2f5f45; display: inline-flex; font-size: 12px; font-weight: 700; margin: 10px 0 0; min-height: 34px; padding: 0 11px; } .favorites-contact-overlay { align-items: center; background: rgba(11, 21, 38, 0.42); backdrop-filter: blur(3px); display: grid; inset: 0; padding: 16px; position: fixed; z-index: 140; } .favorites-contact-modal { background: linear-gradient(180deg, #f4fff9 0%, #ffffff 48%); border: 1px solid #d8ebdf; border-radius: 16px; box-shadow: 0 18px 46px rgba(15, 33, 26, 0.2); margin: 0 auto; max-width: 430px; padding: 20px 18px 16px; position: relative; width: 100%; } .favorites-contact-close { background: transparent; border: 0; border-radius: 8px; color: #60758d; font-size: 30px; line-height: 1; position: absolute; right: 9px; top: 8px; } .favorites-contact-close:hover { background: #edf6f1; } .favorites-contact-badge { align-items: center; background: linear-gradient(180deg, #1db46a 0%, #149558 100%); border-radius: 999px; box-shadow: 0 8px 18px rgba(20, 149, 88, 0.28); color: #ffffff; display: inline-grid; height: 44px; place-items: center; width: 44px; } .favorites-contact-modal h2 { color: #1d3048; font-size: 30px; line-height: 1.08; margin: 12px 28px 10px 0; } .favorites-contact-modal p { margin: 0; } .favorites-contact-modal p strong { color: #1e334d; display: block; font-size: 16px; line-height: 1.3; } .favorites-contact-modal p small { color: #6c8099; display: block; font-size: 12px; font-weight: 700; margin-top: 4px; } .favorites-contact-phone { align-items: center; background: #ffffff; border: 1px solid #cbe4d6; border-radius: 11px; color: #196c42; display: inline-flex; font-size: 20px; font-weight: 900; gap: 10px; margin-top: 14px; min-height: 52px; padding: 0 15px; text-decoration: none; } .favorites-contact-phone:hover { background: #f2fbf6; } .favorites-contact-actions { display: flex; justify-content: flex-end; margin-top: 16px; } .favorites-contact-actions button { background: #ffffff; border: 1px solid #d6e3f0; border-radius: 8px; color: #2f4662; font-size: 14px; font-weight: 800; min-height: 40px; padding: 0 14px; } .favorites-sidebar { align-self: start; display: grid; gap: 12px; position: sticky; top: 96px; } .favorites-side-card, .favorites-side-note { background: #ffffff; border: 1px solid #e1e9f2; border-radius: 12px; padding: 14px; } .favorites-side-card h2 { color: #20304a; font-size: 17px; margin: 0; } .favorites-side-card ul { display: grid; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; } .favorites-side-card li { align-items: center; color: #3f516e; display: flex; justify-content: space-between; } .favorites-side-card li span { align-items: center; display: inline-flex; font-size: 13px; font-weight: 700; gap: 8px; } .favorites-side-card li span svg { color: #16a35f; font-size: 14px; } .favorites-side-card li strong { color: #61728a; font-size: 13px; } .favorites-side-card button { align-items: center; background: transparent; border: 0; border-top: 1px solid #e7edf5; color: #6a7c93; display: inline-flex; font-size: 13px; font-weight: 700; gap: 7px; margin-top: 12px; min-height: 36px; padding: 8px 0 0; } .favorites-side-card button + button { margin-top: 2px; } .favorites-side-note { align-items: start; background: #f2f8f4; border-color: #deece3; display: grid; gap: 10px; grid-template-columns: 28px minmax(0, 1fr); padding: 12px 12px; } .favorites-side-note-icon { align-items: center; align-self: center; color: #19a663; display: inline-flex; height: 28px; justify-content: center; width: 28px; } .favorites-side-note-icon svg { height: 21px; width: 21px; } .favorites-side-note-copy strong { color: #1f3f30; display: block; font-size: 12px; font-weight: 800; line-height: 1.25; } .favorites-side-note-copy p { color: #4d6b5a; font-size: 11px; font-weight: 700; line-height: 1.35; margin: 4px 0 0; } .account-page { background: #f5f7fa; min-height: calc(100vh - 82px); padding: 16px 18px; } .account-layout { display: grid; gap: 14px; grid-template-columns: 256px minmax(0, 1fr); margin: 0 auto; max-width: 1820px; } .account-sidebar, .account-panel, .account-profile-card, .account-stats article { background: #ffffff; border: 1px solid #e3e9f0; border-radius: 10px; } .account-sidebar { align-self: start; background: linear-gradient(180deg, #ffffff 0%, #fcfffd 100%); border: 1px solid #dfe8f2; border-radius: 18px; box-shadow: 0 18px 44px -34px rgba(21, 54, 82, 0.45); display: grid; gap: 10px; padding: 10px; position: sticky; top: 94px; } .account-profile-card { align-items: center; display: grid; gap: 10px; grid-template-columns: 34px minmax(0, 1fr); padding: 10px; } .account-avatar { align-items: center; background: #e8f4ff; border-radius: 999px; color: #20344f; display: grid; font-size: 15px; font-weight: 800; height: 34px; line-height: 1; place-items: center; width: 34px; } .account-profile-card strong { color: #13243d; display: block; font-size: 12px; font-weight: 900; line-height: 1.25; } .account-profile-card small { color: #5f7187; display: block; font-size: 11px; font-weight: 700; line-height: 1.3; margin-top: 2px; } .account-profile-card em { background: #e8f8ef; border-radius: 999px; color: #109253; display: inline-block; font-size: 10px; font-style: normal; font-weight: 850; margin-top: 7px; padding: 3px 8px; } .account-profile-card em.pending { background: #fff4e0; color: #b8770a; } .account-menu { padding: 2px 4px; } .account-menu h3 { color: #6f7d90; font-size: 10px; letter-spacing: 0.02em; margin: 8px 6px 6px; text-transform: uppercase; } .account-menu button, .account-menu a { align-items: center; background: transparent; border: 0; border-radius: 8px; color: #27384f; display: grid; font-size: 12px; font-weight: 800; gap: 8px; grid-template-columns: 14px minmax(0, 1fr) auto; min-height: 33px; padding: 0 8px; text-align: left; width: 100%; } .account-menu button svg, .account-menu a svg { color: #7d8ca0; font-size: 14px; } .account-menu button span, .account-menu a span { background: #e8f8ef; border-radius: 999px; color: #109253; font-size: 10px; font-weight: 900; padding: 1px 6px; } .account-menu button .tag, .account-menu a .tag { border-radius: 4px; font-size: 9px; padding: 1px 5px; } .account-menu button.active, .account-menu a.active { background: #ebf6f0; color: #109253; } .account-premium-card { background: #fbfcfe; border: 1px solid #e3e9f0; border-radius: 10px; display: grid; gap: 10px; margin-top: 6px; padding: 10px; } .account-premium-card strong { align-items: center; color: #22364e; display: inline-flex; font-size: 12px; gap: 6px; } .account-premium-card strong svg { color: #16a464; font-size: 15px; } .account-premium-card p { color: #6d7c8f; font-size: 10px; font-weight: 750; line-height: 1.35; margin: 6px 0 0; } .account-premium-card button { background: #16a464; border: 0; border-radius: 6px; color: #ffffff; font-size: 11px; font-weight: 900; height: 34px; width: 100%; } .account-main { display: grid; gap: 12px; align-content: start; } .account-help-contact-page { background: linear-gradient(180deg, #f6f8fb 0%, #eef3f7 100%); } .help-contact-panel { background: #f6f8fb; border: 1px solid #dee7f0; border-radius: 16px; display: grid; gap: 18px; padding: 18px; } .help-contact-header { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) auto; } .help-contact-header h1 { color: #192b45; font-size: 38px; line-height: 1.02; margin: 0; } .help-contact-header p { color: #5f7187; font-size: 14px; font-weight: 750; line-height: 1.45; margin: 10px 0 0; max-width: 640px; } .help-contact-visual { align-items: center; background: radial-gradient(circle at 20% 20%, rgba(12, 165, 95, 0.13), rgba(12, 165, 95, 0)); border-radius: 999px; display: inline-flex; gap: 14px; padding: 10px 16px; } .help-contact-visual span, .help-contact-visual strong { align-items: center; border-radius: 999px; display: inline-flex; justify-content: center; } .help-contact-visual span { background: #f4fbf7; border: 1px solid #d9ece2; color: #44aa75; font-size: 18px; height: 34px; width: 34px; } .help-contact-visual strong { background: #ddf6e8; border: 1px solid #c9ead9; color: #109a5a; font-size: 22px; font-weight: 700; height: 48px; width: 48px; } .help-contact-section { background: #ffffff; border: 1px solid #dfe7f0; border-radius: 12px; padding: 16px; } .help-contact-section > h2 { color: #1d2f49; font-size: 30px; margin: 0 0 14px; } .help-contact-channel-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .help-contact-channel-card { background: #ffffff; border: 1px solid #e3e9f1; border-radius: 10px; display: grid; gap: 10px; min-height: 190px; padding: 14px; } .help-contact-channel-head { align-items: start; display: grid; gap: 10px; grid-template-columns: 40px minmax(0, 1fr); } .help-contact-channel-icon, .help-contact-more-icon { align-items: center; border-radius: 999px; display: inline-flex; font-size: 19px; height: 40px; justify-content: center; width: 40px; } .help-contact-channel-icon.green, .help-contact-more-icon.green { background: #e6f8ef; color: #109a5a; } .help-contact-channel-icon.blue, .help-contact-more-icon.blue { background: #e8f0ff; color: #2f6de3; } .help-contact-channel-icon.violet { background: #f0ecff; color: #7454d8; } .help-contact-channel-icon.orange { background: #fff0df; color: #ef9123; } .help-contact-more-icon.gold { background: #fff4d8; color: #c78907; } .help-contact-more-icon.red { background: #ffe7eb; color: #d63c5f; } .help-contact-channel-head h3 { color: #1f3049; font-size: 16px; margin: 0; } .help-contact-channel-head em { background: #ddf5e8; border-radius: 999px; color: #109253; display: inline-block; font-size: 10px; font-style: normal; font-weight: 900; margin-top: 5px; padding: 3px 7px; } .help-contact-channel-card p { color: #5f7187; font-size: 13px; font-weight: 750; line-height: 1.42; margin: 0; } .help-contact-channel-action { align-items: center; background: transparent; border: 0; border-top: 1px solid #e5ecf4; color: #3e546f; display: inline-flex; font-size: 12px; font-weight: 850; justify-content: space-between; margin-top: auto; min-height: 40px; padding: 9px 0 0; width: 100%; } .help-contact-channel-action svg { font-size: 15px; transform: rotate(-90deg); } .help-contact-middle-grid { background: transparent; border: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 0; } .help-contact-faq-card, .help-contact-form-card { background: #ffffff; border: 1px solid #dfe7f0; border-radius: 12px; padding: 16px; } .help-contact-form-card { transition: border-color 0.2s ease, box-shadow 0.2s ease; } .help-contact-form-card.is-highlighted { animation: helpContactFormHighlight 3s ease; border-color: #1ab069; box-shadow: 0 0 0 3px rgba(17, 163, 95, 0.22); } @keyframes helpContactFormHighlight { 0% { border-color: #1ab069; box-shadow: 0 0 0 0 rgba(17, 163, 95, 0.35); } 25% { border-color: #14a661; box-shadow: 0 0 0 6px rgba(17, 163, 95, 0.22); } 60% { border-color: #28b975; box-shadow: 0 0 0 4px rgba(17, 163, 95, 0.18); } 100% { border-color: #dfe7f0; box-shadow: 0 0 0 0 rgba(17, 163, 95, 0); } } .help-contact-faq-card header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; } .help-contact-faq-card h2, .help-contact-form-card h2 { color: #1d2f49; font-size: 24px; margin: 0; } .help-contact-faq-card header button { align-items: center; background: transparent; border: 0; color: #0f9c5b; display: inline-flex; font-size: 12px; font-weight: 900; gap: 6px; padding: 0; } .help-contact-faq-card header button svg, .help-contact-more-card button svg { font-size: 14px; } .help-contact-faq-list { display: grid; gap: 8px; } .help-contact-faq-list details { border: 1px solid #e3eaf2; border-radius: 8px; padding: 0 12px; } .help-contact-faq-list summary { align-items: center; color: #2a3d57; cursor: pointer; display: flex; font-size: 14px; font-weight: 800; justify-content: space-between; list-style: none; min-height: 44px; } .help-contact-faq-list summary::-webkit-details-marker { display: none; } .help-contact-faq-list summary svg { color: #7a8ca2; font-size: 14px; transform: rotate(0deg); transition: transform 0.16s ease; } .help-contact-faq-list details[open] summary svg { transform: rotate(180deg); } .help-contact-faq-list details p { color: #60748c; font-size: 12px; font-weight: 740; line-height: 1.42; margin: 0 0 12px; } .help-contact-form-card form { display: grid; gap: 10px; margin-top: 12px; } .help-contact-form-row { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .help-contact-form-card input, .help-contact-form-card select, .help-contact-form-card textarea { background: #fbfdff; border: 1px solid #dde5ef; border-radius: 8px; color: #2a3d57; font-size: 13px; font-weight: 760; min-height: 44px; padding: 0 12px; } .help-contact-form-card textarea { min-height: 128px; padding: 11px 12px; resize: vertical; } .help-contact-form-card button { background: linear-gradient(90deg, #10a15e 0%, #0fbf6b 100%); border: 0; border-radius: 8px; color: #ffffff; font-size: 14px; font-weight: 900; min-height: 44px; } .help-contact-form-card button:disabled { cursor: not-allowed; opacity: 0.72; } .help-contact-form-feedback { border-radius: 8px; font-size: 12px; font-weight: 820; line-height: 1.4; margin: 0; padding: 10px 12px; } .help-contact-form-feedback.success { background: #e8f8ef; border: 1px solid #ccebd9; color: #0b8d4f; } .help-contact-form-feedback.error { background: #fff1f3; border: 1px solid #ffd8de; color: #bd2f54; } .help-contact-more-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .help-contact-more-card { background: #ffffff; border: 1px solid #e3eaf2; border-radius: 10px; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr); min-height: 180px; padding: 14px; } .help-contact-more-card h3 { color: #1f3049; font-size: 15px; margin: 0; } .help-contact-more-card p { color: #5f7187; font-size: 12px; font-weight: 750; line-height: 1.42; margin: 8px 0 14px; } .help-contact-more-card button { align-items: center; background: transparent; border: 0; color: #109253; display: inline-flex; font-size: 12px; font-weight: 900; gap: 6px; padding: 0; } @media (max-width: 1280px) { .help-contact-channel-grid, .help-contact-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .help-contact-middle-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .help-contact-header { grid-template-columns: 1fr; } .help-contact-header h1, .help-contact-section > h2, .help-contact-faq-card h2, .help-contact-form-card h2 { font-size: 24px; } .help-contact-form-row, .help-contact-channel-grid, .help-contact-more-grid { grid-template-columns: 1fr; } } .account-listings-page { background: linear-gradient(180deg, #f4f7fb 0%, #eef3f8 100%); } .listings-head h1 { align-items: center; display: inline-flex; gap: 10px; } .listings-head h1 small { background: #e8f8ef; border-radius: 999px; color: #129357; font-size: 13px; font-weight: 900; padding: 4px 10px; } .listings-toolbar-card, .listings-table { background: #ffffff; border: 1px solid #e3e9f0; border-radius: 10px; padding: 12px; } .listings-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .listings-tabs button { background: #f5f8fc; border: 1px solid #e0e8f2; border-radius: 8px; color: #3a4d67; font-size: 12px; font-weight: 900; height: 34px; padding: 0 12px; } .listings-tabs button.active { background: #14995b; border-color: #14995b; color: #ffffff; } .listings-actions-row { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(240px, 1fr); margin-top: 10px; } .listings-search { align-items: center; border: 1px solid #dce4ee; border-radius: 8px; color: #7a8ba2; display: flex; gap: 8px; height: 38px; padding: 0 10px; } .listings-search input { border: 0; color: #2f445d; flex: 1; font-size: 12px; font-weight: 800; min-width: 0; } .listings-search input:focus { outline: none; } .listings-actions-row select { background: #f8fbff; border: 1px solid #dce4ee; border-radius: 8px; color: #344860; font-size: 12px; font-weight: 800; height: 38px; padding: 0 10px; } .listings-promoted-filter { align-items: center; color: #445a73; display: inline-flex; font-size: 12px; font-weight: 800; gap: 7px; white-space: nowrap; } .listings-promoted-filter input { accent-color: #109253; } .listings-add-new { align-items: center; background: #0f1f39; border: 0; border-radius: 8px; color: #ffffff; display: inline-flex; font-size: 12px; font-weight: 900; gap: 7px; height: 38px; justify-content: center; padding: 0 13px; white-space: nowrap; } .listings-feedback { background: #ecf7f1; border: 1px solid #d5eadc; border-radius: 8px; color: #21553b; font-size: 12px; font-weight: 800; margin: 0; padding: 9px 11px; } .listings-table { display: grid; gap: 8px; } .listings-empty { border: 1px dashed #d8e2ee; border-radius: 9px; color: #576b84; display: grid; gap: 6px; justify-items: center; min-height: 110px; padding: 20px; place-content: center; } .listings-empty strong { color: #22364e; font-size: 13px; } .listings-empty small { font-size: 11px; font-weight: 700; } .listing-row { align-items: center; border: 1px solid #e5ebf2; border-radius: 10px; display: grid; gap: 10px; grid-template-columns: 120px minmax(210px, 1fr) minmax(150px, 0.9fr) 140px 86px 86px minmax(180px, 0.8fr); min-height: 96px; padding: 8px; } .listing-photo { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; height: 74px; width: 120px; } .listing-main-copy h3 { color: #1a2d47; font-size: 16px; margin: 0; } .listing-main-copy p { color: #60748d; font-size: 12px; font-weight: 750; margin: 4px 0 0; } .listing-main-copy small { color: #71849b; display: block; font-size: 11px; font-weight: 800; margin-top: 5px; } .listing-price-box strong { color: #1f3047; display: block; font-size: 26px; line-height: 1; } .listing-price-box small { color: #62748c; display: block; font-size: 11px; font-weight: 800; margin-top: 5px; } .listing-inline-edit { display: grid; gap: 6px; } .listing-inline-edit label { color: #58708a; display: grid; font-size: 10px; font-weight: 900; gap: 4px; } .listing-inline-edit input { border: 1px solid #d6e1ee; border-radius: 7px; color: #1e3047; font-size: 12px; font-weight: 800; height: 32px; padding: 0 8px; } .listing-status span { align-items: center; border-radius: 999px; display: inline-flex; font-size: 11px; font-weight: 900; min-height: 22px; padding: 0 9px; } .listing-status.active span { background: #e9f7ef; color: #129357; } .listing-status.paused span { background: #fff5df; color: #c98a00; } .listing-status.archived span { background: #eff3f7; color: #607084; } .listing-status small { color: #667a93; display: block; font-size: 10px; font-weight: 800; margin-top: 5px; } .listing-status em { background: #e8f1ff; border-radius: 999px; color: #2f68d8; display: inline-block; font-size: 9px; font-style: normal; font-weight: 900; margin-top: 6px; padding: 2px 7px; } .listing-metrics strong { align-items: center; color: #263a53; display: inline-flex; font-size: 18px; font-weight: 900; gap: 5px; } .listing-metrics strong svg { color: #7f8da0; height: 13px; width: 13px; } .listing-metrics small { color: #6f8198; display: block; font-size: 11px; font-weight: 800; margin-top: 4px; } .listing-actions { display: grid; gap: 6px; } .listing-actions button { background: #14995b; border: 0; border-radius: 7px; color: #ffffff; font-size: 11px; font-weight: 900; height: 30px; padding: 0 10px; } .listing-actions button.ghost { background: #ffffff; border: 1px solid #d6e0ec; color: #334a63; } .listing-actions button.ghost.danger { border-color: #f0b9bf; color: #d33a46; } .listing-delete-overlay { align-items: center; background: rgba(19, 31, 51, 0.35); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 50; } .listing-delete-modal { background: #ffffff; border: 1px solid #e4e9f1; border-radius: 16px; max-width: 520px; padding: 18px; position: relative; width: min(100%, 520px); } .listing-delete-close { background: transparent; border: 0; color: #7e8da0; font-size: 26px; line-height: 1; padding: 0; position: absolute; right: 12px; top: 8px; } .listing-delete-icon { align-items: center; background: #ffecee; border-radius: 999px; color: #e33f4b; display: grid; height: 52px; margin: 6px auto 12px; place-items: center; width: 52px; } .listing-delete-icon svg { height: 24px; width: 24px; } .listing-delete-modal h2 { color: #1d3049; font-size: 34px; margin: 0; text-align: center; } .listing-delete-modal > p { color: #5d6f86; font-size: 18px; font-weight: 750; line-height: 1.4; margin: 10px 0 14px; text-align: center; } .listing-delete-reasons > strong { color: #2b3d56; display: block; font-size: 13px; margin-bottom: 8px; } .listing-delete-reasons > strong small { color: #7f8fa4; font-weight: 700; } .listing-delete-reasons { display: grid; gap: 8px; } .listing-delete-reasons button { align-items: center; background: #ffffff; border: 1px solid #dde5ee; border-radius: 10px; color: #20314a; display: grid; gap: 10px; grid-template-columns: 1fr 16px; min-height: 62px; padding: 10px 12px; text-align: left; } .listing-delete-reasons button span b { display: block; font-size: 12px; } .listing-delete-reasons button span small { color: #6f8094; display: block; font-size: 11px; font-weight: 700; margin-top: 4px; } .listing-delete-reasons button i { border: 1px solid #b8c5d4; border-radius: 999px; display: block; height: 14px; width: 14px; } .listing-delete-reasons button.active { border-color: #e9b8bc; } .listing-delete-reasons button.active i { background: #e33f4b; border-color: #e33f4b; } .listing-delete-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 12px; } .listing-delete-actions button { border-radius: 9px; font-size: 13px; font-weight: 900; height: 42px; } .listing-delete-actions .secondary { background: #ffffff; border: 1px solid #d6e0ec; color: #34495f; } .listing-delete-actions .danger { background: #e33f4b; border: 0; color: #ffffff; } .listing-pause-modal { background: #ffffff; border: 1px solid #e4e9f1; border-radius: 16px; max-width: 520px; padding: 18px; position: relative; width: min(100%, 520px); } .listing-pause-icon { align-items: center; background: #fff3e7; border-radius: 999px; color: #ec9a22; display: grid; height: 52px; margin: 6px auto 12px; place-items: center; width: 52px; } .listing-pause-icon svg { height: 23px; width: 23px; } .listing-pause-modal h2 { color: #1d3049; font-size: 34px; margin: 0; text-align: center; } .listing-pause-description { color: #5d6f86; font-size: 18px; font-weight: 750; line-height: 1.4; margin: 10px 0 14px; text-align: center; } .listing-pause-options { display: grid; gap: 8px; } .listing-pause-options > strong { color: #2b3d56; display: block; font-size: 13px; margin-bottom: 2px; } .listing-pause-options button { align-items: center; background: #ffffff; border: 1px solid #dde5ee; border-radius: 10px; color: #20314a; display: grid; gap: 10px; grid-template-columns: 30px 1fr 16px; min-height: 62px; padding: 10px 12px; text-align: left; } .listing-pause-option-icon { align-items: center; background: #f3f7fb; border-radius: 8px; color: #596a81; display: grid; height: 24px; place-items: center; width: 24px; } .listing-pause-option-icon svg { height: 12px; width: 12px; } .listing-pause-options button span b { display: block; font-size: 12px; } .listing-pause-options button span small { color: #6f8094; display: block; font-size: 11px; font-weight: 700; margin-top: 4px; } .listing-pause-options button i { border: 1px solid #b8c5d4; border-radius: 999px; display: block; height: 14px; width: 14px; } .listing-pause-options button.active { border-color: #9cd7b3; } .listing-pause-options button.active .listing-pause-option-icon { background: #e9f7ef; color: #14995b; } .listing-pause-options button.active i { background: #14995b; border-color: #14995b; } .listing-pause-note { align-items: center; background: #ecf8f1; border: 1px solid #d8ecdf; border-radius: 8px; color: #3a6a4f; display: grid; font-size: 9px; font-weight: 600; gap: 6px; grid-template-columns: 12px minmax(0, 1fr); letter-spacing: 0; line-height: 1.25; margin: 8px 0 0; padding: 6px 8px; } .listing-pause-note svg { color: #14995b; height: 10px; width: 10px; } .listing-delete-actions .confirm { background: #14995b; border: 0; color: #ffffff; } @media (max-width: 1460px) { .listing-row { grid-template-columns: 120px minmax(210px, 1fr) minmax(150px, 1fr) 120px 90px 90px; } .listing-actions { grid-column: 2 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1180px) { .listings-actions-row { grid-template-columns: 1fr; } .listing-row { grid-template-columns: 1fr; } .listing-photo { height: 170px; width: 100%; } .listing-actions { grid-template-columns: 1fr 1fr; } } .messages-page { background: #f7f9fc; min-height: calc(100vh - 82px); height: calc(100vh - 82px); display: flex; padding: 12px; } .messages-shell { margin: 0 auto; max-width: 1800px; width: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); } .messages-page .messages-breadcrumb { align-items: center; color: #718094; display: inline-flex; gap: 8px; margin: 2px 0 8px; } .messages-page .messages-breadcrumb button, .messages-page .messages-breadcrumb a { background: transparent; border: 0; color: #718094; font-size: 12px; font-weight: 800; padding: 0; } .messages-page .messages-breadcrumb button.active, .messages-page .messages-breadcrumb a.active { color: #14223a; } .messages-page .messages-breadcrumb svg { font-size: 12px; transform: rotate(-90deg); } .messages-header h1 { color: #13243d; font-size: 46px; line-height: 1; margin: 6px 0 16px; } .messages-grid { display: grid; gap: 10px; grid-template-columns: 320px minmax(0, 1fr) 300px; min-height: 0; } .messages-threads, .messages-chat, .messages-details { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; min-height: 0; height: 100%; } .messages-threads { display: grid; grid-template-rows: auto auto minmax(0, 1fr); } .messages-search-row { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 36px; padding: 12px; } .messages-search-row > button { align-items: center; background: #f8fbff; border: 1px solid #dce4ee; border-radius: 8px; color: #7588a2; display: grid; line-height: 0; place-items: center; padding: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .messages-search-row > button svg { height: 14px; width: 14px; } .messages-search-row > button.active { background: #edf5ff; border-color: #d4e4fb; color: #2f5ea6; } .messages-search-input { align-items: center; border: 1px solid #dce4ee; border-radius: 8px; color: #7a8ba2; display: flex; gap: 8px; height: 38px; padding: 0 10px; } .messages-search-input input { border: 0; color: #31465f; flex: 1; font-size: 13px; font-weight: 700; min-width: 0; } .messages-search-input input:focus, .messages-composer input:focus { outline: none; } .messages-filters { border-top: 1px solid #edf2f7; display: grid; gap: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 0; opacity: 0; overflow: hidden; padding: 8px 10px; pointer-events: none; transform: translateY(-4px); transition: max-height 0.22s ease, opacity 0.2s ease, transform 0.2s ease; } .messages-filters.open { max-height: 64px; opacity: 1; pointer-events: auto; transform: translateY(0); } .messages-filters button { align-items: center; background: #f7f9fc; border: 1px solid #e1e8f1; border-radius: 8px; color: #51667f; display: inline-flex; font-size: 10px; font-weight: 900; gap: 4px; height: 28px; justify-content: center; min-width: 0; padding: 0 6px; width: 100%; white-space: nowrap; } .messages-filters button.active { background: #e9f6ee; border-color: #cbe8d8; color: #167e4e; } .messages-filters button span { align-items: center; background: #ffffff; border-radius: 999px; display: inline-flex; font-size: 10px; height: 16px; justify-content: center; min-width: 16px; padding: 0 5px; } .messages-thread-list { border-top: 1px solid #edf2f7; overflow: auto; } .messages-empty-list { color: #70839c; font-size: 12px; font-weight: 700; margin: 16px 12px; } .messages-thread-list button { align-items: center; background: transparent; border: 0; border-bottom: 1px solid #edf2f7; display: grid; gap: 10px; grid-template-columns: 34px minmax(0, 1fr) 56px; min-height: 72px; padding: 0 12px; text-align: left; width: 100%; } .messages-thread-list button.active { background: #edf7f2; } .messages-thread-avatar, .messages-chat-user > span, .message-avatar { background-color: #dce6f3; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 999px; } .messages-thread-avatar { height: 32px; width: 32px; } .messages-thread-copy { min-width: 0; } .messages-thread-copy strong { color: #1a2d47; display: block; font-size: 13px; line-height: 1.1; } .messages-thread-copy small { color: #637792; display: block; font-size: 12px; line-height: 1.25; margin-top: 4px; } .messages-thread-meta { align-content: center; display: grid; gap: 6px; justify-items: center; min-width: 56px; text-align: center; } .messages-thread-meta em { color: #72839a; font-size: 11px; font-style: normal; font-weight: 800; line-height: 1; white-space: nowrap; justify-self: center; } .messages-thread-meta i { align-items: center; background: #17a764; border-radius: 999px; color: #ffffff; display: inline-flex; font-size: 10px; font-style: normal; font-weight: 900; height: 18px; justify-content: center; line-height: 1; width: 18px; } .messages-chat { display: grid; grid-template-rows: 58px minmax(0, 1fr) 56px; } .messages-chat-head { align-items: center; border-bottom: 1px solid #e8eef5; display: flex; justify-content: space-between; padding: 0 14px; } .messages-chat-user { align-items: center; display: grid; gap: 10px; grid-template-columns: 32px minmax(0, 1fr); } .messages-chat-user > span { height: 32px; width: 32px; } .messages-chat-user strong { color: #162841; display: block; font-size: 15px; line-height: 1; } .messages-chat-user small { color: #6e8199; font-size: 11px; font-weight: 700; } .messages-chat-listing { align-items: center; display: grid; gap: 8px; grid-template-columns: 42px minmax(0, 1fr) auto 18px; } .messages-chat-listing img { border-radius: 6px; height: 32px; object-fit: cover; width: 42px; } .messages-chat-listing strong { color: #162841; display: block; font-size: 12px; line-height: 1.2; } .messages-chat-listing small { color: #182c45; font-size: 12px; font-weight: 900; } .messages-chat-listing button { align-items: center; background: transparent; border: 0; color: #7a8da5; display: grid; line-height: 0; place-items: center; padding: 0; } .messages-chat-listing .messages-mark-read { background: #edf5ff; border: 1px solid #d4e4fb; border-radius: 7px; color: #2e5fa9; display: inline-flex; font-size: 11px; font-weight: 800; height: 26px; line-height: 1; padding: 0 10px; } .messages-bubbles { display: grid; gap: 14px; overflow: auto; padding: 18px 14px; } .message-row { align-items: flex-end; display: grid; gap: 10px; grid-template-columns: 30px minmax(0, auto); } .message-row.mine { grid-template-columns: minmax(0, auto); justify-content: end; } .message-avatar { height: 28px; width: 28px; } .messages-bubbles article { background: #ffffff; border: 1px solid #dfe6ef; border-radius: 10px; max-width: 420px; padding: 12px 14px; } .message-row.mine article { background: #eaf8f0; border-color: #d9ebdf; max-width: 500px; } .messages-bubbles p { color: #23374f; font-size: 13px; line-height: 1.32; margin: 0; } .message-attachment-card { align-items: flex-start; background: #f2f7f4; border: 1px solid #d7e8dd; border-radius: 8px; color: #315847; display: grid; gap: 8px; grid-template-columns: 16px minmax(0, 1fr); margin-bottom: 8px; padding: 8px; } .message-attachment-card > div { min-width: 0; } .message-attachment-card strong { display: block; font-size: 11px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .message-attachment-card small { color: #4c6f60; display: block; font-size: 10px; font-weight: 700; line-height: 1.3; margin-top: 2px; } .message-business-card { background: radial-gradient(120% 140% at 0% 0%, rgba(121, 186, 255, 0.18) 0%, rgba(121, 186, 255, 0) 52%), linear-gradient(180deg, #f8fcff 0%, #eef6ff 100%); border: 1px solid #cfe2f8; border-radius: 12px; box-shadow: 0 8px 16px rgba(60, 105, 173, 0.12); margin-bottom: 8px; padding: 10px; } .message-business-card-top { align-items: center; display: grid; gap: 8px; grid-template-columns: 30px minmax(0, 1fr); margin-bottom: 8px; } .message-business-card-badge { align-items: center; background: linear-gradient(180deg, #3691ee 0%, #1f73cc 100%); border-radius: 999px; color: #ffffff; display: grid; height: 30px; place-items: center; width: 30px; } .message-business-card-badge svg { height: 14px; width: 14px; } .message-business-card-top em { color: #4976a8; display: block; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .message-business-card-top strong { color: #1e3d61; display: block; font-size: 13px; line-height: 1.2; margin-top: 2px; } .message-business-card-grid { display: grid; gap: 6px; } .message-business-card-grid a { align-items: center; background: rgba(255, 255, 255, 0.82); border: 1px solid #d4e3f4; border-radius: 8px; color: #2a4c72; display: inline-flex; font-size: 11px; font-weight: 800; gap: 6px; min-height: 28px; padding: 0 8px; text-decoration: none; } .message-business-card-grid a svg { color: #2f6cab; height: 12px; width: 12px; } .message-business-card-grid a:hover { background: #ffffff; border-color: #b9d1eb; } .message-row.mine .message-business-card { background: radial-gradient(120% 140% at 0% 0%, rgba(88, 201, 132, 0.18) 0%, rgba(88, 201, 132, 0) 52%), linear-gradient(180deg, #f4fcf8 0%, #e8f7ef 100%); border-color: #c8e6d6; box-shadow: 0 8px 16px rgba(28, 116, 74, 0.12); } .message-row.mine .message-business-card-badge { background: linear-gradient(180deg, #21a965 0%, #17834e 100%); } .message-row.mine .message-business-card-top em { color: #2d7d57; } .message-row.mine .message-business-card-top strong { color: #204a38; } .message-row.mine .message-business-card-grid a { border-color: #cbe4d7; color: #25533f; } .message-row.mine .message-business-card-grid a svg { color: #1b8d57; } .messages-bubbles small { align-items: center; color: #7c8da5; display: inline-flex; float: right; font-size: 11px; font-weight: 800; gap: 3px; margin-top: 6px; } .messages-bubbles small svg { color: #90a0b4; height: 12px; width: 12px; } .messages-bubbles small.message-meta.pending svg { color: #90a0b4; } .messages-bubbles small.message-meta.read svg { color: #2d69c7; } .message-checks { align-items: center; display: inline-flex; margin-left: 3px; } .message-checks svg { height: 10px; width: 10px; } .message-checks.pending { color: #8ea0b7; } .message-checks.read { background: transparent; border-radius: 0; color: #2d69c7; gap: 0; padding: 0; } .message-checks.read svg + svg { margin-left: -3px; } .messages-composer { align-items: center; border-top: 1px solid #e8eef5; display: grid; gap: 8px; grid-template-columns: 34px 78px minmax(0, 1fr) 34px; padding: 0 10px; } .messages-composer button { align-items: center; background: #f6f9fd; border: 1px solid #dce4ee; border-radius: 8px; color: #71839d; display: grid; height: 30px; line-height: 0; place-items: center; padding: 0; } .messages-composer button svg { height: 14px; width: 14px; } .messages-composer button.send { background: #16a464; border-color: #16a464; color: #ffffff; } .messages-composer button.send svg { transform: scale(0.85); } .messages-composer button.card-action { background: #edf6ff; border-color: #d1e3f8; color: #245a98; font-size: 11px; font-weight: 900; } .messages-composer input { border: 1px solid #dce4ee; border-radius: 8px; color: #2b4059; font-size: 14px; font-weight: 700; height: 30px; padding: 0 10px; } .messages-composer-note { color: #567089; font-size: 11px; font-weight: 800; margin: 4px 0 0; padding: 0 12px 8px; } .messages-composer-note.moderation { color: #35644d; } .messages-details { display: flex; flex-direction: column; padding: 14px 12px; } .messages-details h2 { color: #1c2f49; font-size: 24px; line-height: 1; margin: 0 0 12px; } .messages-details article { border-top: 1px solid #e8eef5; display: grid; gap: 10px; grid-template-columns: 86px minmax(0, 1fr); padding: 12px 0; } .messages-details article img { border-radius: 8px; height: 68px; object-fit: cover; width: 86px; } .messages-details article strong { color: #1b2d47; display: block; font-size: 13px; line-height: 1.2; } .messages-details article em { color: #21344d; display: block; font-size: 13px; font-style: normal; font-weight: 900; line-height: 1; margin-top: 3px; } .messages-details article p { color: #657992; font-size: 12px; font-weight: 700; margin: 6px 0 0; } .messages-details article small { color: #70839c; font-size: 11px; font-weight: 800; } .messages-details > button { align-items: center; background: #ffffff; border: 0; border-top: 1px solid #e8eef5; color: #4a5f79; display: flex; font-size: 13px; font-weight: 800; justify-content: space-between; min-height: 48px; text-align: left; } .messages-details > button span { align-items: center; display: inline-flex; gap: 8px; } .messages-details > button svg { height: 14px; width: 14px; } .messages-safety-tip { background: #eef8f2; border: 1px solid #d7ebdf; border-radius: 8px; margin-top: auto; padding: 12px; } .messages-safety-tip strong { align-items: center; color: #24563c; display: inline-flex; font-size: 12px; gap: 6px; } .messages-safety-tip p { color: #5a7869; font-size: 12px; font-weight: 700; line-height: 1.35; margin: 6px 0 0; } .block-user-overlay { align-items: center; background: rgba(10, 22, 36, 0.42); backdrop-filter: blur(3px); display: grid; inset: 0; padding: 16px; position: fixed; z-index: 129; } .block-user-modal { background: radial-gradient(120% 120% at 0% 0%, #f2fff8 0%, #ffffff 52%), #ffffff; border: 1px solid #d7e9de; border-radius: 16px; box-shadow: 0 18px 48px rgba(12, 32, 24, 0.2); margin: 0 auto; max-width: 560px; padding: 20px 20px 18px; position: relative; width: 100%; } .block-user-badge { align-items: center; background: linear-gradient(180deg, #1fb86c 0%, #14985a 100%); border-radius: 999px; box-shadow: 0 8px 16px rgba(20, 152, 90, 0.25); color: #ffffff; display: inline-grid; height: 44px; margin-bottom: 12px; place-items: center; width: 44px; } .block-user-badge svg { height: 22px; width: 22px; } .block-user-close { background: transparent; border: 0; border-radius: 8px; color: #5f7289; font-size: 32px; line-height: 1; position: absolute; right: 10px; top: 8px; } .block-user-close:hover { background: #eef6f1; } .block-user-modal h2 { color: #16314c; font-size: 34px; line-height: 1.1; margin: 0 36px 12px 0; } .block-user-modal p { color: #4d637c; font-size: 16px; font-weight: 700; line-height: 1.46; margin: 0; } .block-user-modal p strong { color: #177c49; } .block-user-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; } .block-user-confirm, .block-user-cancel { border-radius: 8px; font-size: 15px; font-weight: 900; min-height: 42px; min-width: 118px; padding: 0 16px; transition: transform 0.12s ease, box-shadow 0.12s ease; } .block-user-confirm { background: linear-gradient(180deg, #1bb066 0%, #149457 100%); border: 0; box-shadow: 0 8px 16px rgba(20, 148, 87, 0.22); color: #ffffff; } .block-user-confirm:hover { transform: translateY(-1px); } .block-user-cancel { background: #ffffff; border: 1px solid #cfe0d8; color: #2b465d; } .block-user-cancel:hover { background: #f5fbf8; } .messages-composer input:disabled, .messages-composer button:disabled { cursor: not-allowed; opacity: 0.65; } .delete-chat-overlay { align-items: center; background: rgba(10, 22, 36, 0.42); backdrop-filter: blur(3px); display: grid; inset: 0; padding: 16px; position: fixed; z-index: 129; } .delete-chat-modal { background: #ffffff; border: 1px solid #edd8da; border-radius: 16px; box-shadow: 0 18px 48px rgba(32, 12, 16, 0.2); margin: 0 auto; max-width: 560px; padding: 20px 20px 18px; position: relative; width: 100%; } .delete-chat-close { background: transparent; border: 0; border-radius: 8px; color: #7f5f67; font-size: 32px; line-height: 1; position: absolute; right: 10px; top: 8px; } .delete-chat-close:hover { background: #fbf1f3; } .delete-chat-badge { align-items: center; background: linear-gradient(180deg, #e15a6a 0%, #c83f50 100%); border-radius: 999px; box-shadow: 0 8px 16px rgba(200, 63, 80, 0.22); color: #ffffff; display: inline-grid; height: 44px; margin-bottom: 12px; place-items: center; width: 44px; } .delete-chat-badge svg { height: 22px; width: 22px; } .delete-chat-modal h2 { color: #4c1f27; font-size: 32px; line-height: 1.1; margin: 0 36px 12px 0; } .delete-chat-modal p { color: #6b4b52; font-size: 16px; font-weight: 700; line-height: 1.45; margin: 0; } .delete-chat-modal p strong { color: #b73647; } .delete-chat-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; } .delete-chat-confirm, .delete-chat-cancel { border-radius: 8px; font-size: 15px; font-weight: 900; min-height: 42px; min-width: 118px; padding: 0 16px; } .delete-chat-confirm { background: linear-gradient(180deg, #e15a6a 0%, #c83f50 100%); border: 0; box-shadow: 0 8px 16px rgba(200, 63, 80, 0.2); color: #ffffff; } .delete-chat-cancel { background: #ffffff; border: 1px solid #e7ced2; color: #6b4b52; } .report-user-overlay { align-items: center; background: rgba(11, 22, 38, 0.5); display: grid; inset: 0; padding: 16px; position: fixed; z-index: 130; } .report-user-modal { background: #ffffff; border-radius: 14px; margin: 0 auto; max-width: 460px; padding: 16px 18px 18px; position: relative; width: 100%; } .report-user-modal.step-3 { max-width: 410px; padding: 20px 24px 24px; } .report-user-close { background: transparent; border: 0; color: #617388; font-size: 25px; line-height: 1; position: absolute; right: 12px; top: 10px; } .report-user-modal h2 { color: #14263f; font-size: 27px; margin: 0 28px 12px; text-align: center; } .report-user-progress { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 6px 18px; } .report-user-progress-segment { background: #dce4ee; border-radius: 999px; height: 4px; } .report-user-progress-segment.active { background: #16a260; } .report-user-modal h3 { color: #12253d; font-size: 21px; margin: 0; text-align: center; } .report-user-step2-title { font-size: 33px; } .report-user-step2-title em { color: #617287; font-size: 0.64em; font-style: normal; font-weight: 700; } .report-user-modal > p { color: #617186; font-size: 13px; line-height: 1.4; margin: 8px auto 12px; max-width: 320px; text-align: center; } .report-user-step2-intro { font-size: 18px; line-height: 1.5; margin: 14px auto 14px; max-width: 410px; } .report-user-anon-note { max-width: 390px; margin-bottom: 14px; text-wrap: pretty; } .report-user-field-label { color: #1c2f47; display: block; font-size: 14px; font-weight: 900; margin: 14px 2px 7px; } .report-user-upload-note { color: #6d7f96; font-size: 12px; font-weight: 700; margin: -3px 2px 8px; } .report-user-reasons { display: grid; gap: 8px; } .report-user-reasons button { align-items: center; background: #ffffff; border: 1px solid #dce5ee; border-radius: 10px; display: grid; gap: 10px; grid-template-columns: 24px minmax(0, 1fr) 18px; min-height: 58px; padding: 8px 10px; text-align: left; width: 100%; } .report-user-reasons button.active { background: #eef8f2; border-color: #14a15f; } .report-user-reason-icon { color: #4d6078; } .report-user-reasons button.active .report-user-reason-icon { color: #119056; } .report-user-reason-copy strong { color: #1b2f47; display: block; font-size: 13px; } .report-user-reason-copy small { color: #6e8097; display: block; font-size: 11px; margin-top: 3px; } .report-user-reasons button i { border: 1px solid #a9b7ca; border-radius: 999px; height: 14px; width: 14px; } .report-user-reasons button.active i { border: 4px solid #18a464; } .report-user-textarea { border: 1px solid #d6e0eb; border-radius: 10px; color: #263b54; font-size: 13px; font-weight: 700; height: 124px; padding: 10px 10px 24px; resize: none; width: 100%; } .report-user-textarea:focus { outline: none; } .report-user-textarea-wrap { position: relative; } .report-user-textarea-wrap small { color: #8e9cae; font-size: 11px; font-weight: 800; position: absolute; right: 10px; bottom: 7px; } .report-user-upload { align-items: center; background: #ffffff; border: 1px dashed #cfd9e6; border-radius: 10px; display: grid; gap: 5px; min-height: 88px; padding: 10px; place-items: center; text-align: center; width: 100%; } .report-user-upload > span { color: #304960; font-size: 18px; } .report-user-upload strong { color: #283d57; font-size: 13px; } .report-user-upload small { color: #6c7f95; font-size: 11px; font-weight: 700; } .report-user-files { margin-top: 8px; } .report-user-files p { align-items: center; display: flex; justify-content: space-between; margin: 0; padding: 4px 2px; } .report-user-files span { color: #29415c; font-size: 12px; font-weight: 700; } .report-user-files button { background: transparent; border: 0; color: #199556; font-size: 11px; font-weight: 900; padding: 0; } .report-user-error { color: #bd2c37; font-size: 12px; font-weight: 800; margin: 6px 2px 0; } .report-user-actions { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 12px; } .report-user-primary, .report-user-secondary { border-radius: 8px; font-size: 13px; font-weight: 900; height: 40px; width: 100%; } .report-user-primary { background: #14a05f; border: 0; color: #ffffff; margin-top: 14px; } .report-user-actions .report-user-primary { margin-top: 0; } .report-user-secondary { background: #ffffff; border: 1px solid #d4dde8; color: #34485f; } .report-user-close:disabled, .report-user-primary:disabled, .report-user-secondary:disabled { cursor: not-allowed; opacity: 0.6; } .report-user-success { align-items: center; background: #eef8f2; border: 1px solid #d5eadc; border-radius: 10px; display: grid; gap: 10px; grid-template-columns: 28px minmax(0, 1fr); margin: 12px 0; padding: 10px; } .report-user-success > span { align-items: center; background: #17a463; border-radius: 999px; color: #ffffff; display: grid; height: 28px; width: 28px; } .report-user-success strong { color: #18573a; display: block; font-size: 13px; } .report-user-success small { color: #3f7058; display: block; font-size: 11px; font-weight: 800; margin-top: 3px; } .report-user-finish-hero { align-items: center; background: #eef4f1; border-radius: 999px; display: grid; height: 132px; margin: 8px auto 14px; place-items: center; position: relative; width: 132px; } .report-user-finish-hero::before, .report-user-finish-hero::after { color: #21a464; content: ""; position: absolute; } .report-user-finish-hero::before { border: 2px solid #21a464; border-radius: 2px; height: 5px; left: -6px; top: 24px; transform: rotate(45deg); width: 5px; } .report-user-finish-hero::after { border-top: 2px solid #21a464; border-bottom: 2px solid #21a464; height: 9px; right: -12px; top: 40px; width: 20px; } .report-user-finish-icon { align-items: center; background: linear-gradient(180deg, #1fb66b 0%, #109457 100%); border-radius: 22px; color: #ffffff; display: grid; height: 72px; place-items: center; width: 72px; } .report-user-finish-icon svg { height: 42px; width: 42px; } .report-user-finish-title { color: #14263f; font-size: 39px; line-height: 1.15; text-align: center; } .report-user-finish-intro { color: #5f7188; font-size: 15px; line-height: 1.48; margin: 10px auto 16px; max-width: 300px; text-align: center; } .report-user-summary { border: 1px solid #d5dde8; border-radius: 8px; margin-bottom: 16px; padding: 16px 16px 12px; } .report-user-summary > strong { color: #20324a; display: block; font-size: 13px; margin-bottom: 14px; } .report-user-summary-grid { display: grid; gap: 12px 16px; grid-template-columns: 132px minmax(0, 1fr); margin-bottom: 12px; } .report-user-summary-grid span { color: #63758c; font-size: 12px; font-weight: 700; line-height: 1.35; } .report-user-summary-grid b { color: #2a3d56; font-size: 12px; font-weight: 800; line-height: 1.35; text-align: left; } .report-user-summary p { align-items: center; color: #546982; display: inline-flex; font-size: 12px; font-weight: 700; gap: 6px; margin: 0; } .report-user-summary p svg { height: 13px; width: 13px; } .report-user-summary small { color: #63758c; display: block; font-size: 11px; font-weight: 700; margin-top: 14px; text-align: right; } @media (max-width: 1300px) { .messages-grid { grid-template-columns: 280px minmax(0, 1fr); } .messages-details { grid-column: 1 / -1; } } @media (max-width: 980px) { .messages-grid { grid-template-columns: 1fr; } .messages-threads, .messages-chat, .messages-details { min-height: auto; } } .account-heading { align-items: flex-start; display: flex; justify-content: space-between; height: fit-content; min-height: 0; padding: 12px 16px; } .account-heading h1 { color: #13243d; font-size: 44px; line-height: 1; margin: 0; } .account-heading h1 span { font-size: 0.78em; vertical-align: 0.06em; } .account-heading p { color: #647487; font-size: 13px; font-weight: 750; margin: 8px 0 0; } .account-heading button { align-items: center; background: #ffffff; border: 1px solid #d9e2ec; border-radius: 7px; color: #32455e; display: inline-flex; font-size: 12px; font-weight: 900; gap: 8px; min-height: 36px; padding: 0 12px; } .account-widget-customizer { display: grid; gap: 8px; justify-items: stretch; } .account-widget-customizer.centered { background: #ffffff; border: 1px solid #e3e9f0; border-radius: 10px; margin: 0 auto; max-width: 1240px; padding: 12px; width: 100%; } .account-widget-customizer-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px; } .account-widget-customizer-head strong { color: #1f334d; font-size: 14px; font-weight: 900; } .account-widget-customizer-head > div:first-child { display: grid; gap: 4px; } .account-widget-customizer-head small { color: #5f748a; font-size: 13px; font-weight: 700; } .account-widget-customizer-head-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .account-widget-customizer-head button { background: #ffffff; border: 1px solid #d8e3ef; border-radius: 7px; color: #304760; font-size: 11px; font-weight: 800; min-height: 30px; padding: 0 10px; } .account-widget-customizer-head button svg { height: 12px; width: 12px; } .account-widget-customizer-head.secondary { border-top: 1px solid #ecf2f7; margin-top: 2px; padding-top: 16px; } .account-widget-customizer-head.secondary strong { font-size: 15px; } .account-widget-catalog { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .account-widget-card { align-items: center; background: #ffffff; border: 1px solid #dde8f2; border-radius: 14px; box-shadow: 0 12px 26px -26px rgba(20, 52, 77, 0.5); display: grid; gap: 12px; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 84px; padding: 14px; } .account-widget-card > span { align-items: center; border-radius: 12px; display: grid; height: 44px; line-height: 0; place-items: center; width: 44px; } .account-widget-card > span svg { height: 17px; width: 17px; } .account-widget-card > div { display: grid; gap: 4px; } .account-widget-card strong { color: #173048; font-size: 13px; font-weight: 900; } .account-widget-card small { color: #6a7f94; font-size: 11px; font-weight: 700; line-height: 1.35; } .account-widget-card button { align-items: center; background: #f5fbf7; border: 1px solid #cae8d8; border-radius: 9px; color: #0f9b59; display: inline-flex; font-size: 11px; font-weight: 900; gap: 6px; height: 32px; padding: 0 11px; } .account-widget-card button svg { height: 11px; width: 11px; } .account-widget-card.green > span { background: #ebf8f0; color: #17a35f; } .account-widget-card.blue > span { background: #edf5ff; color: #3478ec; } .account-widget-card.amber > span { background: #fff5e8; color: #d38a15; } .account-widget-card.pink > span { background: #fff0f4; color: #d64c78; } .account-widget-tip { align-items: center; background: #f6fbff; border: 1px solid #dce9f6; border-radius: 12px; color: #4e6580; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr); min-height: 44px; padding: 0 14px; } .account-widget-tip svg { color: #f0b22d; height: 14px; width: 14px; } .account-widget-tip span { font-size: 12px; font-weight: 700; } .account-widget-launch { align-items: center; background: #ffffff; border: 1px dashed #c7d4e3; border-radius: 8px; color: #2e445f; display: inline-flex; font-size: 13px; font-weight: 900; gap: 8px; justify-content: center; min-height: 42px; min-width: 180px; padding: 0 16px; } .account-widget-editor { background: transparent; border: 0; border-radius: 0; display: grid; gap: 10px; justify-self: stretch; padding: 0; width: 100%; } .account-widget-editor article { align-items: center; background: #ffffff; border: 1px solid #e1eaf3; border-radius: 12px; box-shadow: 0 10px 24px -28px rgba(21, 52, 79, 0.65); cursor: grab; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; min-height: 54px; padding: 10px 12px; } .account-widget-editor article:active { cursor: grabbing; } .account-widget-editor article.drop-target { background: #edf9f2; border-color: #8fd5af; } .account-widget-editor article strong { color: #1c334a; font-size: 13px; font-weight: 900; } .account-widget-editor-controls { align-items: center; display: inline-flex; gap: 8px; } .account-widget-editor-controls select, .account-widget-editor-controls button:not(.account-toggle) { background: #ffffff; border: 1px solid #d3e0ed; border-radius: 8px; color: #304960; font-size: 11px; font-weight: 800; height: 32px; padding: 0 10px; } .account-widget-editor-controls small { color: #7b8899; font-size: 10px; font-weight: 800; } .account-widget-editor-controls button:disabled { opacity: 0.45; } @media (max-width: 980px) { .account-widget-customizer.centered { border-radius: 14px; padding: 16px; } .account-widget-customizer-head { align-items: flex-start; flex-direction: column; } .account-widget-customizer-head-actions { justify-content: flex-start; } .account-widget-catalog { grid-template-columns: 1fr; } } .account-stats { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .account-stats article { display: grid; gap: 8px; grid-template-columns: 34px minmax(0, 1fr); padding: 14px; } .account-stats article > span { align-items: center; background: #ecf6ff; border-radius: 999px; color: #3778ef; display: grid; font-size: 16px; height: 34px; line-height: 0; place-items: center; width: 34px; } .account-stats article > span svg, .account-alerts article > span svg, .account-searches article > span svg, .account-tools article > span svg, .account-menu button svg, .account-menu a svg { height: 14px; width: 14px; } .account-stats article:nth-child(2) > span { background: #fff1f3; color: #ef4968; } .account-stats article:nth-child(3) > span { background: #fff8e8; color: #f3a10b; } .account-stats article:nth-child(4) > span { background: #edf3ff; color: #2f78ff; } .account-stats article strong { color: #15253d; font-size: 29px; line-height: 1; } .account-stats article small { color: #607084; font-size: 12px; font-weight: 750; grid-column: 2; } .account-stats article button { background: transparent; border: 0; color: #109253; display: inline-flex; font-size: 11px; font-weight: 900; gap: 5px; grid-column: 2; justify-self: start; padding: 0; } .account-grid { display: grid; gap: 12px; grid-template-columns: 1.25fr 0.95fr; min-height: 320px; } .account-grid.account-grid-empty { grid-template-columns: 1fr; min-height: calc(100vh - 220px); } .account-grid.account-grid-empty.editor-open { min-height: auto; } .account-widget-slot.wide { grid-column: 1 / -1; } .account-empty-add { align-items: start; display: grid; grid-column: 1 / -1; justify-items: center; min-height: calc(100vh - 320px); padding: 10px 0 0; } .account-empty-state-card { align-items: center; display: grid; justify-items: center; max-width: 860px; text-align: center; } .account-empty-visual { display: block; height: 118px; margin-bottom: 16px; position: relative; width: 286px; } .account-empty-visual::before { background: linear-gradient(180deg, rgba(231, 249, 239, 0.9) 0%, rgba(240, 252, 246, 0.8) 100%); border-radius: 16px; content: ""; height: 76px; left: 42px; position: absolute; top: 22px; width: 196px; } .account-empty-visual::after { border: 2px dashed #c9edd7; border-radius: 999px; content: ""; height: 48px; position: absolute; right: 14px; top: 10px; width: 48px; } .account-empty-visual .left-chip, .account-empty-visual .right-chip { align-items: center; background: #ecf8f1; border: 1px solid #d7ecdf; border-radius: 14px; color: #14a05f; display: grid; height: 46px; line-height: 0; place-items: center; position: absolute; top: 52px; width: 50px; z-index: 2; } .account-empty-visual .left-chip { left: 0; } .account-empty-visual .right-chip { background: #17a65f; border-color: #17a65f; border-radius: 999px; color: #ffffff; height: 46px; left: 236px; top: 40px; width: 46px; } .account-empty-visual .center-chip { align-items: center; background: linear-gradient(180deg, #effaf4 0%, #f7fcf9 100%); border: 1px solid #d7ecdf; border-radius: 16px; color: #14a05f; display: grid; height: 88px; justify-items: center; left: 92px; position: relative; top: 16px; width: 110px; z-index: 2; } .account-empty-visual .center-chip svg { height: 22px; margin-top: 8px; width: 22px; } .account-empty-visual .center-chip i { background: #9fdcba; border-radius: 999px; display: block; height: 6px; margin-top: 2px; width: 40px; } .account-empty-state-card h2 { color: #20334c; font-size: 43px; line-height: 1; margin: 2px 0 10px; } .account-empty-state-card p { color: #6c7c90; font-size: 18px; font-weight: 750; line-height: 1.35; margin: 0 0 20px; max-width: 760px; } .account-empty-add-button { align-items: center; background: #13a15f; border: 0; border-radius: 9px; color: #ffffff; display: inline-flex; font-size: 18px; font-weight: 900; gap: 8px; min-height: 52px; padding: 0 24px; } .account-empty-add-button svg { height: 16px; width: 16px; } .account-panel { padding: 12px; } .account-panel-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; } .account-panel-head h2 { color: #15253d; font-size: 18px; margin: 0; } .account-panel-head button { background: transparent; border: 0; color: #109253; display: inline-flex; font-size: 11px; font-weight: 900; gap: 5px; padding: 0; } .account-listings { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .account-listings article { border: 1px solid #e3e9f0; border-radius: 8px; overflow: hidden; } .account-listings .photo { background-size: cover; height: 118px; } .account-listings article strong, .account-listings article h3, .account-listings article p, .account-listings article small { display: block; padding: 0 10px; } .account-listings article strong { color: #15253d; font-size: 20px; margin-top: 8px; } .account-listings article h3 { color: #1e2f46; font-size: 13px; margin-top: 4px; } .account-listings article p { color: #607084; font-size: 11px; margin-top: 3px; } .account-listings article small { color: #718094; font-size: 10px; margin: 6px 0 4px; } .account-listings article em { color: #7b899b; display: block; font-size: 10px; font-style: normal; margin: 0 0 10px; padding: 0 10px; } .account-alerts { display: grid; gap: 8px; } .account-alerts article { align-items: center; border: 1px solid #e5ebf2; border-radius: 8px; display: grid; gap: 8px; grid-template-columns: 30px minmax(0, 1fr) 28px; min-height: 62px; padding: 8px 10px; } .account-alerts article > span { align-items: center; background: #ebf6f0; border-radius: 999px; color: #109253; display: grid; font-size: 14px; height: 30px; line-height: 0; place-items: center; width: 30px; } .account-alerts strong { color: #1f3047; display: block; font-size: 12px; } .account-alerts small { color: #708094; display: block; font-size: 10px; margin-top: 2px; } .account-alerts em { color: #67788c; display: block; font-size: 10px; font-style: normal; margin-top: 3px; } .account-toggle { background: #d7dee8; border: 0; border-radius: 999px; height: 16px; justify-self: center; padding: 0; position: relative; transition: background-color 0.18s ease; width: 26px; } .account-toggle::after { background: #ffffff; border-radius: 999px; content: ""; height: 10px; left: 3px; position: absolute; top: 3px; transition: transform 0.18s ease; width: 10px; } .account-toggle.on { background: #15a660; } .account-toggle.on::after { transform: translateX(10px); } .account-add-alert { align-items: center; background: transparent; border: 0; color: #2b3d56; display: inline-flex; font-size: 12px; font-weight: 800; gap: 6px; justify-self: start; padding: 2px 0 0; } .account-add-alert svg, .account-new-search svg { color: #109253; font-size: 13px; } .account-searches-panel { grid-column: 1; } .account-searches { display: grid; gap: 4px; } .account-searches article { align-items: center; border-bottom: 1px solid #edf1f5; display: grid; gap: 8px; grid-template-columns: 26px minmax(0, 1fr) 120px 88px 18px; min-height: 58px; padding: 6px 0; } .account-searches article > span { align-items: center; background: #ebf6f0; border-radius: 999px; color: #109253; display: grid; font-size: 13px; height: 26px; line-height: 0; place-items: center; width: 26px; } .account-searches strong { color: #1f3047; display: block; font-size: 12px; } .account-searches small { color: #6f7f92; display: block; font-size: 10px; margin-top: 2px; } .account-searches em, .account-searches b { color: #6f7f92; font-size: 10px; font-style: normal; font-weight: 750; line-height: 1.3; } .account-searches b { color: #243750; font-weight: 900; } .account-searches-empty { color: #6f7f92; font-size: 11px; line-height: 1.5; margin: 6px 0 2px; } .account-searches article > button { align-items: center; background: transparent; border: 0; color: #7f8da0; display: inline-flex; font-size: 15px; justify-content: center; padding: 0; } .account-searches .account-search-remove { color: #d34d4d; font-size: 11px; font-weight: 900; } .account-searches-empty-state { align-items: center; border: 1px dashed #cfd9e5; border-radius: 10px; display: grid; gap: 10px; justify-items: center; margin-top: 10px; padding: 26px 16px; text-align: center; } .account-searches-empty-state strong { color: #1f3047; font-size: 18px; } .account-searches-empty-state p { color: #62748a; font-size: 12px; margin: 0; max-width: 520px; } .account-searches-page-head { align-items: start; gap: 12px; } .account-searches-page-head h1 { color: #12233e; font-size: 42px; letter-spacing: -0.02em; line-height: 1.02; margin: 0; } .account-searches-page-head p { color: #607288; font-size: 13px; font-weight: 760; margin: 10px 0 0; max-width: 760px; } .account-searches-stats { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0; } .account-searches-stats article { background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); border: 1px solid #dce6f2; border-radius: 10px; display: grid; gap: 4px; min-height: 74px; padding: 10px 12px; } .account-searches-stats small { color: #617388; font-size: 11px; font-weight: 800; } .account-searches-stats strong { color: #12233e; font-size: 22px; font-weight: 900; line-height: 1; } .account-searches-toolbar { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(240px, 1fr) auto auto; margin: 6px 0 16px; } .account-searches-input { align-items: center; background: #ffffff; border: 1px solid #d5dfeb; border-radius: 10px; display: grid; gap: 8px; grid-template-columns: 16px minmax(0, 1fr); min-height: 44px; padding: 0 12px; } .account-searches-input svg { color: #7f8ea2; height: 14px; width: 14px; } .account-searches-input input { background: transparent; border: 0; color: #1c2d45; font-size: 13px; font-weight: 750; outline: none; } .account-searches-input input::placeholder { color: #8a97a9; } .account-searches-mode-tabs { background: #f0f4f9; border-radius: 999px; display: inline-flex; padding: 3px; } .account-searches-mode-tabs button { background: transparent; border: 0; border-radius: 999px; color: #5c6f86; font-size: 11px; font-weight: 900; height: 34px; min-width: 88px; padding: 0 14px; } .account-searches-mode-tabs button.active { background: #ffffff; box-shadow: 0 4px 10px rgba(38, 59, 91, 0.12); color: #12233e; } .account-searches-sort { align-items: center; display: inline-flex; gap: 8px; } .account-searches-sort span { color: #667a90; font-size: 11px; font-weight: 850; } .account-searches-sort select { background: #ffffff; border: 1px solid #d3ddea; border-radius: 9px; color: #243850; font-size: 12px; font-weight: 820; height: 36px; padding: 0 10px; } .account-searches-page .account-searches { gap: 8px; } .account-searches-page .account-searches article { align-items: center; background: #ffffff; border: 1px solid #e1e8f2; border-radius: 12px; grid-template-columns: 32px minmax(0, 1fr) auto auto auto auto; min-height: 74px; padding: 10px 12px; } .account-searches-page .account-searches article > span { height: 30px; width: 30px; } .account-searches-page .account-searches small { font-size: 11px; } .account-searches-page .account-searches em { align-items: center; color: #6b7d92; display: inline-flex; font-size: 10px; font-style: normal; font-weight: 900; gap: 5px; white-space: nowrap; } .account-searches-page .account-searches em svg { color: #8a99aa; height: 11px; width: 11px; } .account-searches-page .account-searches .account-search-mode-pill { border-radius: 999px; font-size: 10px; font-weight: 900; line-height: 1; padding: 7px 10px; text-transform: uppercase; } .account-searches-page .account-searches .account-search-mode-pill.buy { background: #ecf7ff; color: #1a5d99; } .account-searches-page .account-searches .account-search-mode-pill.rent { background: #edf9f1; color: #16844d; } .account-searches-page .account-searches .account-search-open { align-items: center; background: #f5f8fc; border: 1px solid #d8e3ef; border-radius: 8px; color: #1f3552; display: inline-flex; font-size: 11px; font-weight: 900; gap: 6px; height: 34px; padding: 0 10px; } .account-searches-page .account-searches .account-search-open svg { height: 12px; width: 12px; } .account-searches-page .account-searches .account-search-remove { align-items: center; color: #c44b4b; display: inline-flex; font-size: 11px; font-weight: 900; gap: 6px; } .account-searches-page .account-searches .account-search-remove svg { height: 12px; width: 12px; } .account-searches-empty-state.filtered { margin-top: 16px; } .account-new-search, .account-tools-more { align-items: center; background: transparent; border: 0; color: #109253; display: inline-flex; font-size: 12px; font-weight: 900; gap: 6px; justify-self: end; margin-top: 8px; padding: 0; } .account-tools { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .account-tools article:last-child { grid-column: 1 / -1; } .account-tools { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .account-tools article { align-items: start; border: 1px solid #e5ebf2; border-radius: 8px; display: grid; gap: 8px; grid-template-columns: 28px minmax(0, 1fr); min-height: 74px; padding: 10px; } .account-tools article > span { align-items: center; background: #eef4ff; border-radius: 8px; color: #3a76e5; display: grid; font-size: 14px; height: 28px; line-height: 0; place-items: center; width: 28px; } .account-tools article:nth-child(2) > span { background: #eef8ff; color: #4a79f0; } .account-tools article:nth-child(3) > span { background: #eef3ff; color: #6b7ef3; } .account-tools article:nth-child(4) > span { background: #edf8f0; color: #3ba75f; } .account-tools article:nth-child(5) > span { background: #f3efff; color: #7e61e9; } .account-tools strong { color: #1f3047; display: block; font-size: 12px; } .account-tools small { color: #6f7f92; display: block; font-size: 10px; margin-top: 3px; } @media (max-width: 1200px) { .account-layout { grid-template-columns: 1fr; } .account-grid { grid-template-columns: 1fr; } .account-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .account-widget-editor article { grid-template-columns: 1fr; } .account-widget-editor-controls { flex-wrap: wrap; } .account-listings, .account-tools { grid-template-columns: 1fr; } .account-searches article { grid-template-columns: 26px minmax(0, 1fr); padding: 8px 0; } .account-searches em, .account-searches b, .account-searches article > button { display: none; } .account-searches-page .account-searches article { gap: 8px; grid-template-columns: 26px minmax(0, 1fr); padding: 10px; } .account-searches-page .account-searches article > button, .account-searches-page .account-searches .account-search-open { display: inline-flex; justify-self: start; } .account-searches-page .account-searches em, .account-searches-page .account-searches b { display: none; } .account-searches-toolbar { grid-template-columns: 1fr; } .account-searches-sort { justify-content: space-between; } .account-searches-stats { grid-template-columns: 1fr; } .account-searches-page-head h1 { font-size: 33px; } .account-tools article:last-child { grid-column: auto; } } .account-settings-page { background: #f5f7fa; min-height: calc(100vh - 82px); padding: 18px; } .account-settings-main { align-content: start; } .price-alerts-page { background: linear-gradient(180deg, #f4f7fb 0%, #eef3f9 100%); } .price-alerts-heading { display: grid; gap: 10px; } .price-alerts-heading small { align-items: center; color: #7a8ba0; display: inline-flex; font-size: 11px; font-weight: 850; gap: 6px; } .price-alerts-heading small svg { color: #a2afc1; font-size: 12px; transform: rotate(-45deg); } .price-alerts-heading h1 { color: #162742; font-size: 38px; letter-spacing: -0.01em; margin: 0; } .price-alerts-heading p { color: #5d7088; font-size: 13px; font-weight: 760; margin: 8px 0 0; max-width: 780px; } .price-alerts-settings { align-items: center; background: #ffffff; border: 1px solid #dbe5f0; border-radius: 9px; color: #2a3e58; display: inline-flex; font-size: 12px; font-weight: 900; gap: 7px; height: 38px; justify-self: end; padding: 0 13px; } .price-alerts-hero { background: #ffffff; border: 1px solid #dfe8f1; border-radius: 14px; display: grid; gap: 14px; grid-template-columns: minmax(280px, 1fr) minmax(220px, 360px) minmax(200px, 280px); padding: 16px; } .price-alerts-hero-main h2 { color: #152841; font-size: 33px; line-height: 1.05; margin: 8px 0 2px; } .price-alerts-hero-main p { color: #2b4059; font-size: 17px; font-weight: 800; margin: 0; } .price-alerts-hero-main > small { align-items: center; color: #5f738c; display: inline-flex; font-size: 12px; font-weight: 700; gap: 5px; margin-top: 9px; } .price-alerts-badge { background: #e9f8ef; border-radius: 999px; color: #0f9657; display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: 0.04em; padding: 3px 9px; text-transform: uppercase; } .price-alerts-pricing { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px 11px; margin-top: 14px; } .price-alerts-pricing strong { color: #129256; font-size: 39px; line-height: 1; } .price-alerts-pricing em { color: #8191a5; font-size: 19px; font-style: normal; font-weight: 700; text-decoration: line-through; } .price-alerts-pricing span { color: #f04444; font-size: 15px; font-weight: 900; } .price-alerts-meta { color: #71839b; display: flex; flex-wrap: wrap; font-size: 12px; font-weight: 750; gap: 8px 18px; margin-top: 8px; } .price-alerts-meta b { color: #2a405a; } .price-alerts-hero-image { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 12px; min-height: 210px; } .price-alerts-hero-side { background: #f4fbf7; border: 1px solid #dfeee6; border-radius: 12px; display: grid; gap: 10px; padding: 14px; } .price-alerts-hero-side strong { color: #148c53; font-size: 14px; } .price-alerts-hero-side ul { color: #3d556d; display: grid; font-size: 12px; font-weight: 760; gap: 6px; list-style: none; margin: 0; padding: 0; } .price-alerts-hero-side b { color: #1f354f; } .price-alerts-hero-side button { align-items: center; background: #17a762; border: 0; border-radius: 8px; color: #ffffff; display: inline-flex; font-size: 12px; font-weight: 900; gap: 7px; height: 35px; justify-content: center; } .price-alerts-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .price-alerts-card { background: #ffffff; border: 1px solid #dfe8f1; border-radius: 12px; display: grid; gap: 10px; padding: 14px; } .price-alerts-card header h3 { color: #182a45; font-size: 18px; margin: 0; } .price-alerts-card header p { color: #6b7d93; font-size: 11px; font-weight: 800; margin: 5px 0 0; } .price-alerts-kpi { align-items: baseline; display: flex; gap: 12px; } .price-alerts-kpi strong { color: #162a44; font-size: 30px; line-height: 1; } .price-alerts-kpi span { color: #14a35f; font-size: 18px; font-weight: 900; } .price-alerts-chart { height: 132px; width: 100%; } .price-alerts-chart-line { fill: none; stroke: #26b36a; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; } .price-alerts-districts { display: grid; gap: 9px; } .price-alerts-districts div { align-items: center; display: grid; gap: 8px; grid-template-columns: 88px minmax(90px, 1fr) auto auto; } .price-alerts-districts strong { color: #233852; font-size: 12px; } .price-alerts-district-bar { background: #edf1f6; border-radius: 999px; display: block; height: 8px; overflow: hidden; } .price-alerts-district-bar i { background: linear-gradient(90deg, #25b269 0%, #5ac987 100%); border-radius: 999px; display: block; height: 100%; } .price-alerts-districts em { color: #2d435e; font-size: 12px; font-style: normal; font-weight: 820; } .price-alerts-districts b { color: #15a35f; font-size: 12px; } .price-alerts-link { background: transparent; border: 0; color: #18a661; font-size: 12px; font-weight: 900; justify-self: start; padding: 0; } .price-alerts-active-list { align-content: start; } .price-alerts-active-items { display: grid; gap: 8px; } .price-alerts-active-items button { align-items: center; background: #fbfcfe; border: 1px solid #e2eaf3; border-radius: 9px; color: #21364f; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; padding: 9px; text-align: left; } .price-alerts-active-items strong { color: #1d3049; display: block; font-size: 12px; } .price-alerts-active-items small { color: #6d7f96; display: block; font-size: 10px; font-weight: 750; margin-top: 2px; } .price-alerts-active-items span { background: #e9f8ef; border-radius: 999px; color: #119659; font-size: 10px; font-weight: 900; padding: 2px 8px; } .price-alerts-manage { background: #f5f8fc; border: 1px solid #dce6f1; border-radius: 8px; color: #334a64; font-size: 12px; font-weight: 900; height: 35px; } @media (max-width: 1300px) { .price-alerts-grid { grid-template-columns: 1fr; } .price-alerts-hero { grid-template-columns: 1fr; } .price-alerts-heading h1 { font-size: 31px; } .price-alerts-settings { justify-self: start; } } @media (max-width: 740px) { .price-alerts-pricing strong { font-size: 30px; } .price-alerts-pricing em { font-size: 15px; } .price-alerts-pricing span { font-size: 12px; } .price-alerts-districts div { grid-template-columns: 1fr; } } .settings-head h1 { color: #1a2c46; font-size: 43px; line-height: 1; margin: 0; } .settings-head p { color: #607084; font-size: 13px; font-weight: 750; margin: 8px 0 0; } .settings-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; } .settings-card { background: #ffffff; border: 1px solid #e3e9f0; border-radius: 10px; padding: 12px; } .settings-card-head { margin-bottom: 8px; } .settings-card-head h2 { color: #1a2c46; font-size: 19px; margin: 0; } .settings-card-head p { color: #6c7b8e; font-size: 11px; font-weight: 750; margin: 5px 0 0; } .settings-card-head.split { align-items: center; display: flex; justify-content: space-between; } .settings-card-head.split > button, .settings-profile-row > button { background: #ffffff; border: 1px solid #d9e2ec; border-radius: 6px; color: #30445d; font-size: 11px; font-weight: 900; min-height: 30px; padding: 0 10px; } .settings-profile-row { align-items: center; background: #fbfcfe; border: 1px solid #e5ebf2; border-radius: 9px; display: grid; gap: 10px; grid-template-columns: 38px minmax(0, 1fr) auto; margin-bottom: 8px; padding: 10px; } .settings-profile-row > span { align-items: center; background: #edf3ff; border-radius: 999px; color: #3c79e8; display: grid; height: 38px; line-height: 0; place-items: center; width: 38px; } .settings-profile-row > span svg { height: 16px; width: 16px; } .settings-profile-row strong { color: #1f3047; display: block; font-size: 12px; } .settings-profile-row small { background: #e7f8ee; border-radius: 999px; color: #109253; display: inline-block; font-size: 10px; font-weight: 900; margin-top: 4px; padding: 2px 8px; } .settings-list { display: grid; } .settings-list article { align-items: center; border-bottom: 1px solid #edf1f5; display: grid; gap: 8px; grid-template-columns: 22px minmax(0, 170px) minmax(0, 1fr) auto; min-height: 50px; padding: 4px 0; } .settings-list article > * { min-width: 0; } .settings-list article:last-child { border-bottom: 0; } .settings-list article > span { align-items: center; color: #7e8ba0; display: grid; height: 22px; line-height: 0; place-items: center; width: 22px; } .settings-list article > span svg { height: 14px; width: 14px; } .settings-list em { color: #25374f; display: block; font-size: 12px; font-style: normal; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-list strong { color: #6f7f92; display: block; font-size: 11px; font-weight: 750; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .settings-list article > svg { color: #7f8da0; font-size: 12px; justify-self: end; transform: rotate(-90deg); } .settings-list .toggle-row { grid-template-columns: 22px 1fr auto; } .settings-list .toggle-row strong { display: none; } .settings-list .toggle-row > button { justify-self: end; } .settings-list .toggle-row > svg { display: none; } .settings-list.compact article { min-height: 46px; } .settings-list .danger em, .settings-list .danger strong, .settings-list .danger > span { color: #d04444; } .settings-list .mini-tag { background: #eef2f7; border: 0; border-radius: 999px; color: #6a7a8d; font-size: 10px; font-weight: 900; justify-self: end; padding: 2px 8px; white-space: nowrap; } .settings-list .cover-upload-tag { align-items: center; background: #edf5ff; border: 1px solid #d6e4f5; color: #2b4e74; cursor: pointer; display: inline-flex; font-size: 10px; font-weight: 900; min-height: 24px; padding: 0 10px; } .settings-list .cover-upload-tag input { display: none; } .settings-list .cover-photo-row strong { font-size: 10px; } .cover-photo-actions-row { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; justify-self: stretch; margin-top: 0; padding: 2px 0 6px; width: 100%; } .cover-preview-button { background: transparent; border: 0; color: #109253; font-size: 10px; font-weight: 900; line-height: 1.2; padding: 0; white-space: nowrap; } .cover-remove-button { background: transparent; border: 0; color: #cf4343; font-size: 10px; font-weight: 900; line-height: 1.2; padding: 0; white-space: nowrap; } .settings-list .mini-tag.profile-preview-cta { align-items: center; background: linear-gradient(90deg, #18b06d 0%, #109253 100%); border: 0; box-shadow: 0 6px 14px rgba(16, 146, 83, 0.24); color: #ffffff; display: inline-flex; font-size: 11px; gap: 5px; padding: 6px 10px; } .settings-list .mini-tag.profile-preview-cta svg { height: 12px; stroke-width: 2.5; width: 12px; } .settings-list .mini-tag.profile-preview-cta:hover { filter: brightness(1.05); } .profile-personalization-list { gap: 0; } .profile-personalization-list article { align-items: start; min-height: 54px; padding: 10px 0; row-gap: 6px; } .profile-personalization-list article > strong { line-height: 1.35; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .profile-personalization-list .cover-photo-row { grid-template-columns: 22px minmax(0, 180px) minmax(0, 1fr) auto; } .profile-personalization-list .cover-photo-row > strong { max-width: 100%; } .profile-personalization-list .cover-photo-actions-row { border-bottom: 1px solid #edf1f5; justify-content: flex-end; justify-self: stretch; margin-top: 0; padding: 0 0 10px; } .profile-personalization-list .profile-visibility-card { margin-top: 0; } .profile-personalization-list .profile-visibility-card > strong { white-space: normal; } .profile-personalization-list .public-profile-row { grid-template-columns: 22px minmax(0, 170px) auto auto; margin-top: 10px; padding-top: 14px; } .profile-personalization-list .public-profile-row > strong { justify-self: end; text-align: right; white-space: nowrap; } @media (max-width: 1100px) { .profile-personalization-list .cover-photo-row { grid-template-columns: 22px 1fr; } .profile-personalization-list .cover-photo-row > em, .profile-personalization-list .cover-photo-row > strong, .profile-personalization-list .cover-photo-row > .cover-upload-tag { grid-column: 2; } .profile-personalization-list .cover-photo-actions-row { padding-left: 0; } .profile-personalization-list .public-profile-row { grid-template-columns: 22px minmax(0, 150px) minmax(0, 1fr) auto; } .profile-personalization-list .public-profile-row > strong { justify-self: start; text-align: left; white-space: nowrap; } } .settings-list article.profile-visibility-card { align-items: start; gap: 8px; grid-template-columns: 22px 1fr; } .settings-list article.profile-visibility-card > span { grid-column: 1; grid-row: 1 / span 3; } .settings-list article.profile-visibility-card > em, .settings-list article.profile-visibility-card > .profile-visibility-options, .settings-list article.profile-visibility-card > strong { grid-column: 2; } .profile-visibility-card .profile-visibility-options { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 4px; width: 100%; } .profile-visibility-card .profile-visibility-options button { background: #f4f8fc; border: 1px solid #d8e1ec; border-radius: 8px; color: #41566f; font-size: 9px; font-weight: 900; min-height: 28px; overflow: hidden; padding: 0 8px; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .profile-visibility-card .profile-visibility-options button.active { background: linear-gradient(90deg, #18b06d 0%, #109253 100%); border-color: #109253; box-shadow: 0 6px 14px rgba(16, 146, 83, 0.2); color: #ffffff; } .settings-export { align-self: start; } .settings-export-box { align-items: start; background: linear-gradient(90deg, #f3fbf7 0%, #edf8f2 100%); border: 1px solid #dcefe4; border-radius: 10px; display: grid; gap: 12px; grid-template-columns: 40px minmax(0, 1fr); margin-top: 8px; padding: 12px; } .settings-export-box > span { align-items: center; background: #dcf4e6; border-radius: 999px; color: #109253; display: grid; height: 40px; line-height: 0; place-items: center; width: 40px; } .settings-export-box strong { color: #1f3047; display: block; font-size: 13px; } .settings-export-box small { color: #6b7b8f; display: block; font-size: 11px; line-height: 1.4; margin-top: 5px; } .settings-export-box button { background: #16a464; border: 0; border-radius: 6px; color: #ffffff; font-size: 11px; font-weight: 900; margin-top: 10px; min-height: 34px; padding: 0 12px; } .settings-footer-note { align-items: center; color: #6f7f92; display: inline-flex; font-size: 11px; font-weight: 750; gap: 8px; margin-top: 14px; } .settings-footer-note svg { color: #8392a5; font-size: 13px; } .account-security-page { background: linear-gradient(180deg, #f4f7fa 0%, #eef4f9 100%); } .security-main { align-content: start; gap: 10px; } .security-head h1 { align-items: center; display: inline-flex; gap: 10px; } .security-head h1 svg { color: #17a261; height: 32px; width: 32px; } .security-overview-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .security-card { background: #ffffff; border: 1px solid #dde6ef; border-radius: 11px; padding: 11px; } .security-card h2, .security-settings-block > h2 { color: #1a2c46; font-size: 17px; font-weight: 900; margin: 0; } .security-score-body { align-items: center; display: grid; gap: 12px; grid-template-columns: 144px minmax(0, 1fr); margin-top: 12px; } .security-score-ring { align-items: center; aspect-ratio: 1; background: conic-gradient(#17a261 calc(var(--score, 0) * 1%), #e7edf4 0); border-radius: 999px; display: grid; padding: 6px; height: 144px; width: 144px; } .security-score-ring > div { background: #ffffff; border-radius: 999px; display: grid; height: 100%; place-items: center; position: relative; width: 100%; } .security-score-ring strong { color: #1a2d47; font-size: 37px; font-weight: 700; line-height: 0.95; margin: 0; transform: translateY(-4px); } .security-score-ring small { color: #179a5c; font-size: 10px; font-weight: 800; left: 50%; line-height: 1; position: absolute; transform: translateX(-50%); white-space: nowrap; bottom: 28px; } .security-score-copy { max-width: 345px; } .security-score-copy > strong { color: #1a2d47; display: block; font-size: 20px; font-weight: 800; line-height: 1.25; } .security-score-copy ul { display: grid; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; } .security-score-copy li { align-items: center; color: #3f5a73; display: inline-flex; font-size: 11px; font-weight: 700; gap: 7px; } .security-score-copy li svg { background: #17a261; border-radius: 999px; color: #ffffff; height: 12px; padding: 2px; width: 12px; } .security-score-copy button { background: linear-gradient(90deg, #19b06c 0%, #0f9f5b 100%); border: 0; border-radius: 6px; color: #ffffff; font-size: 10px; font-weight: 900; margin-top: 12px; min-height: 33px; min-width: 186px; padding: 0 16px; } .security-card-head.split { align-items: center; display: flex; justify-content: space-between; } .security-card-head.split > button { align-items: center; background: transparent; border: 0; color: #159e5d; display: inline-flex; font-size: 10px; font-weight: 900; gap: 5px; padding: 0; } .security-card-head.split > button svg { height: 14px; transform: rotate(-45deg); width: 14px; } .security-activity-list { display: grid; margin-top: 6px; } .security-activity-list article { align-items: center; border-bottom: 1px solid #edf2f6; display: grid; gap: 10px; grid-template-columns: 32px minmax(0, 1fr) auto; min-height: 56px; padding: 4px 0; } .security-activity-list article:last-child { border-bottom: 0; } .security-activity-list article > span { align-items: center; border: 1px solid transparent; border-radius: 999px; display: grid; height: 28px; place-items: center; width: 28px; } .security-activity-list article > span svg { height: 13px; width: 13px; } .security-activity-list .activity-icon.green { background: #e9f7ef; border-color: #dcefe3; color: #16a05f; } .security-activity-list .activity-icon.blue { background: #eef1ff; border-color: #dfe5ff; color: #5e6dd9; } .security-activity-list .activity-icon.orange { background: #fff4e7; border-color: #ffe7cc; color: #e49a36; } .security-activity-list strong { color: #1e324a; display: block; font-size: 12px; font-weight: 900; } .security-activity-list small { color: #6f8196; display: block; font-size: 10px; font-weight: 800; margin-top: 1px; } .security-activity-meta { display: grid; justify-items: end; } .security-activity-meta em { color: #6b7e93; font-size: 10px; font-style: normal; font-weight: 800; } .security-activity-meta i { background: #e8f8ef; border-radius: 999px; color: #139658; display: inline-block; font-size: 9px; font-style: normal; font-weight: 900; margin-top: 5px; padding: 1px 8px; } .security-settings-block { display: grid; gap: 8px; } .security-settings-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } .security-setting-card { align-items: center; background: #ffffff; border: 1px solid #dfe8f0; border-radius: 10px; display: grid; gap: 10px; grid-template-columns: 32px minmax(0, 1fr) auto; min-height: 88px; padding: 10px; } .security-setting-card > span { align-items: center; border: 1px solid transparent; border-radius: 999px; display: grid; height: 30px; place-items: center; width: 30px; } .security-setting-card > span svg { height: 14px; width: 14px; } .security-setting-card.tone-green > span { background: #eaf8ef; border-color: #daefdf; color: #139d5b; } .security-setting-card.tone-blue > span { background: #eef0ff; border-color: #dfe5ff; color: #5e6ddb; } .security-setting-card.tone-yellow > span { background: #fff8e7; border-color: #ffebbe; color: #e4af24; } .security-setting-card.tone-purple > span { background: #f1eeff; border-color: #e2dafb; color: #7a61db; } .security-setting-card.tone-pink > span { background: #ffeef3; border-color: #ffd6e3; color: #d95a78; } .security-setting-card strong { color: #1c3048; display: block; font-size: 14px; font-weight: 900; } .security-setting-card p { color: #65788f; font-size: 11px; font-weight: 800; line-height: 1.35; margin: 1px 0 0; } .security-setting-card small { color: #0f8c50; display: block; font-size: 11px; font-weight: 900; margin-top: 3px; } .security-setting-card button { background: #ffffff; border: 1px solid #d5dfe9; border-radius: 7px; color: #2f445d; font-size: 10px; font-weight: 900; min-height: 34px; min-width: 96px; padding: 0 12px; } .security-setting-card.danger small { color: #6f8196; } .security-setting-card.danger button { border-color: #efc0ca; color: #ce4657; } .security-setting-card.ok small { color: #0f8c50; } .security-setting-card.neutral small { color: #2d7b57; } @media (max-width: 1280px) { .settings-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 1180px) { .security-overview-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } .settings-list article { grid-template-columns: 22px 1fr auto; } .settings-list strong { text-align: left; } .security-score-body { grid-template-columns: 1fr; justify-items: center; } .security-score-copy { width: 100%; } .security-score-copy > strong { font-size: 28px; } .security-settings-grid { grid-template-columns: 1fr; } .security-setting-card { grid-template-columns: 34px minmax(0, 1fr); } .security-setting-card button { grid-column: 2; justify-self: end; } } .settings-breadcrumb { align-items: center; color: #728197; display: inline-flex; font-size: 12px; font-weight: 800; gap: 6px; margin-bottom: 10px; } .settings-breadcrumb strong { color: #1f3047; } .settings-breadcrumb svg { font-size: 12px; transform: rotate(-90deg); } .meetings-page { background: linear-gradient(180deg, #f5f8f6 0%, #eef5f2 100%); } .meetings-main { align-content: start; } .meetings-head h1 { font-size: 40px; } .meetings-grid { display: grid; gap: 14px; grid-template-columns: minmax(320px, 360px) minmax(0, 1fr); margin-top: 14px; } .meetings-calendar-card, .meetings-list-card { background: #ffffff; border: 1px solid #e0e8e3; border-radius: 12px; box-shadow: 0 10px 24px rgba(37, 67, 49, 0.08); padding: 14px; } .meetings-month-nav { align-items: center; display: grid; gap: 10px; grid-template-columns: 30px minmax(0, 1fr) 30px; } .meetings-month-nav button { align-items: center; background: #f4faf6; border: 1px solid #d5e7da; border-radius: 8px; color: #2f6e4e; display: grid; height: 30px; place-items: center; } .meetings-month-nav button:last-child svg { transform: rotate(180deg); } .meetings-month-nav strong { color: #234634; font-size: 16px; font-weight: 900; text-align: center; text-transform: capitalize; } .meetings-today-button { background: transparent; border: 0; color: #169b5d; font-size: 11px; font-weight: 900; margin-top: 8px; padding: 0; } .meetings-weekdays { color: #698278; display: grid; font-size: 11px; font-weight: 900; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 12px; text-align: center; } .meetings-days-grid { display: grid; gap: 4px; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 8px; } .meetings-days-grid button { align-items: center; background: #f7fbf8; border: 1px solid #e0ebe5; border-radius: 8px; color: #335847; display: grid; font-size: 12px; font-weight: 800; gap: 5px; justify-items: center; min-height: 40px; padding: 4px 0; } .meetings-days-grid button.outside { color: #9aa9a0; opacity: 0.7; } .meetings-days-grid button.past { background: #f1f3f1; border-color: #d7ddda; color: #8a9590; } .meetings-days-grid button.past i { background: #9ea7a1; } .meetings-days-grid button i { background: #169b5d; border-radius: 999px; display: block; height: 5px; width: 5px; } .meetings-days-grid button.active { background: linear-gradient(180deg, #18a765 0%, #119156 100%); border-color: #109253; color: #ffffff; } .meetings-days-grid button.past.active { background: linear-gradient(180deg, #d8ddda 0%, #c7ceca 100%); border-color: #b9c1bc; color: #46514c; } .meetings-days-grid button.active i { background: #ffffff; } .meetings-days-grid button.past.active i { background: #67736d; } .meetings-add-button { align-items: center; background: #169b5d; border: 0; border-radius: 8px; color: #ffffff; display: inline-flex; font-size: 12px; font-weight: 900; gap: 8px; justify-content: center; margin-top: 12px; min-height: 38px; width: 100%; } .meetings-add-button:disabled { background: #d3ddd7; color: #4f6057; cursor: not-allowed; } .meetings-filters-card { border-top: 1px solid #e8f0eb; margin-top: 14px; padding-top: 12px; } .meetings-filters-card h3 { color: #264937; font-size: 13px; margin: 0 0 8px; } .meetings-filters-card label { align-items: center; color: #486053; display: flex; font-size: 12px; font-weight: 700; gap: 8px; margin-top: 6px; } .meetings-filters-card input { accent-color: #109253; } .meetings-list-card > header { border-bottom: 1px solid #e9efeb; margin-bottom: 10px; padding-bottom: 10px; } .meetings-list-card > header h2 { color: #1f3f2f; font-size: 19px; margin: 0; text-transform: capitalize; } .meetings-day-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .meetings-day-summary span { background: #eef8f3; border-radius: 999px; color: #2b5a43; font-size: 10px; font-weight: 900; padding: 4px 8px; } .meetings-history-note { color: #5a6861; font-size: 11px; font-weight: 800; margin: 8px 0 0; } .meetings-list { display: grid; gap: 10px; } .meetings-list article { align-items: center; background: #f8fcfa; border: 1px solid #deece5; border-radius: 10px; display: grid; gap: 12px; grid-template-columns: 94px minmax(0, 1fr) auto; min-height: 74px; padding: 10px; } .meetings-list .time { color: #214634; font-size: 17px; font-weight: 900; } .meetings-list .time small { color: #708477; display: block; font-size: 11px; font-weight: 700; margin-top: 2px; } .meetings-list .info strong { align-items: center; color: #1f3848; display: inline-flex; font-size: 13px; gap: 8px; } .meetings-list .info p { color: #5e7488; font-size: 11px; font-weight: 700; margin: 3px 0 0; } .meetings-list .info small { color: #667f72; display: block; font-size: 11px; margin-top: 4px; } .meetings-list .info i { border-radius: 999px; display: inline-block; height: 9px; width: 9px; } .meetings-list .info i.buy { background: #169b5d; } .meetings-list .info i.rent { background: #356ce8; } .meetings-list .info i.own { background: #f5a524; } .meetings-list article em { background: #e9f7ef; border-radius: 999px; color: #169b5d; font-size: 10px; font-style: normal; font-weight: 900; padding: 4px 8px; } .meetings-list article em.status-completed { background: #e6f2ff; color: #2e69db; } .meetings-list article em.status-cancelled { background: #fbe7e7; color: #c84343; } .meeting-side-actions { align-items: end; display: grid; gap: 8px; justify-items: end; } .meeting-row-actions { display: inline-flex; gap: 5px; } .meeting-row-actions button { align-items: center; background: #ffffff; border: 1px solid #d8e6de; border-radius: 7px; color: #4e6459; display: grid; height: 26px; place-items: center; width: 26px; } .meeting-row-actions button:last-child { color: #c74747; } .meeting-row-actions button svg { height: 13px; width: 13px; } .meetings-empty { color: #6f8378; font-size: 13px; font-weight: 700; margin: 8px 0; } .meetings-create-form { background: #f4faf6; border: 1px solid #deece5; border-radius: 10px; margin-top: 12px; padding: 12px; } .meetings-create-form h3 { color: #214634; font-size: 14px; margin: 0; } .meetings-create-form .fields { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 10px; } .meetings-create-form label { color: #446052; display: grid; font-size: 11px; font-weight: 800; gap: 6px; } .meetings-create-form input, .meetings-create-form select { background: #ffffff; border: 1px solid #d7e6dd; border-radius: 7px; color: #1f3047; font-size: 12px; min-height: 36px; padding: 0 10px; } .meetings-error { color: #b73a3a; font-size: 12px; font-weight: 800; margin: 8px 0 0; } .meetings-create-form .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; } .meetings-create-form .actions button { border-radius: 7px; font-size: 12px; font-weight: 900; min-height: 34px; padding: 0 12px; } .meetings-create-form .actions .secondary { background: #ffffff; border: 1px solid #cfddd5; color: #3e5c4d; } .meetings-create-form .actions .primary { background: #14995b; border: 0; color: #ffffff; } @media (max-width: 1180px) { .meetings-grid { grid-template-columns: 1fr; } .meetings-create-form .fields { grid-template-columns: 1fr; } .meetings-list article { grid-template-columns: 1fr; } .meeting-side-actions { justify-items: start; } } .profile-edit-head h1 { font-size: 36px; } .profile-edit-layout { display: grid; gap: 12px; grid-template-columns: 1.15fr 0.95fr; } .profile-edit-main-card { align-self: start; } .profile-photo-row { align-items: center; display: grid; gap: 14px; grid-template-columns: 74px minmax(0, 1fr); } .profile-photo-avatar { background: #eaf2ff; border: 2px solid #d7e2f2; border-radius: 999px; color: #2f6cd3; display: grid; font-size: 22px; font-weight: 900; height: 74px; place-items: center; width: 74px; } .profile-photo-avatar img { border-radius: 999px; height: 100%; object-fit: cover; width: 100%; } .profile-photo-row small { color: #77869a; display: block; font-size: 11px; } .profile-photo-actions { align-items: center; display: flex; gap: 10px; margin-top: 8px; } .profile-photo-actions label, .profile-photo-actions button { background: #ffffff; border: 1px solid #d9e2ec; border-radius: 6px; color: #344860; cursor: pointer; font-size: 11px; font-weight: 900; min-height: 30px; padding: 0 12px; } .profile-photo-actions label input { display: none; } .profile-photo-actions button { border: 0; color: #d14646; padding: 0; } .settings-separator { border-top: 1px solid #edf1f5; margin: 14px 0; } .profile-form-grid { display: grid; gap: 10px; } .profile-form-grid.two-col { grid-template-columns: 1fr 1fr; margin-bottom: 10px; } .profile-extra-form { margin-bottom: 8px; } .profile-form-grid label { display: grid; gap: 6px; } .profile-form-grid label > span { color: #25374f; font-size: 11px; font-weight: 900; } .profile-form-grid input, .profile-form-grid select, .profile-form-grid textarea { border: 1px solid #d9e2ec; border-radius: 6px; color: #20314a; font-size: 12px; min-height: 40px; outline: none; padding: 0 12px; } .profile-form-grid textarea { min-height: 76px; padding: 10px 12px; resize: vertical; } .profile-form-grid small { color: #6f7f92; font-size: 10px; font-weight: 750; } .input-action-row { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 106px; width: 100%; } .input-action-row button, .phone-row button { background: #f7fafc; border: 1px solid #d9e2ec; border-radius: 6px; box-sizing: border-box; color: #3a4d66; font-size: 11px; font-weight: 900; min-height: 40px; padding: 0 12px; width: 100%; text-align: center; white-space: nowrap; } .phone-row { display: grid; gap: 8px; grid-template-columns: 140px minmax(0, 1fr) auto; width: 100%; } .phone-row.verified-row .phone-country-trigger { border-color: #1aa766; box-shadow: 0 0 0 2px rgba(26, 167, 102, 0.12); } .input-action-row > input, .phone-row > input, .phone-row > select { box-sizing: border-box; min-width: 0; width: 100%; } .phone-prefix { box-sizing: border-box; min-width: 0; width: 100%; } .phone-prefix { text-align: center; } .phone-prefix-select { appearance: none; background: #ffffff; border: 1px solid #d9e2ec; border-radius: 6px; color: #2e425b; font-size: 12px; font-weight: 800; min-height: 40px; padding: 0 8px; text-align: left; } .phone-number-input.invalid { border-color: #d14646; box-shadow: inset 0 0 0 1px rgba(209, 70, 70, 0.15); } .phone-number-input.verified { border-color: #1aa766; box-shadow: 0 0 0 3px rgba(26, 167, 102, 0.16), inset 0 0 0 1px rgba(26, 167, 102, 0.12); } .phone-error-message { color: #cf4343; display: block; font-size: 10px; font-weight: 900; margin-top: 5px; } .phone-verified-message { color: #109958; display: block; font-size: 10px; font-weight: 900; margin-top: 5px; } .phone-country-picker { position: relative; } .phone-country-trigger { align-items: center; background: #ffffff; border: 1px solid #d9e2ec; border-radius: 6px; color: #2e425b; display: flex; font-size: 12px; font-weight: 800; gap: 6px; height: 40px; padding: 0 8px; width: 100%; } .phone-country-trigger img { border-radius: 2px; height: 14px; width: 20px; } .phone-country-trigger svg { height: 12px; margin-left: auto; transform: rotate(0deg); width: 12px; } .phone-country-menu { background: #ffffff; border: 1px solid #d9e2ec; border-radius: 8px; box-shadow: 0 8px 22px rgba(22, 38, 58, 0.14); display: grid; left: 0; margin-top: 6px; max-height: 260px; overflow-y: auto; padding: 6px; position: absolute; top: 100%; width: 280px; z-index: 30; } .phone-country-menu button { align-items: center; background: transparent; border: 0; border-radius: 6px; display: grid; gap: 8px; grid-template-columns: 20px 42px minmax(0, 1fr); min-height: 28px; padding: 4px 6px; text-align: left; } .phone-country-menu button:hover, .phone-country-menu button.active { background: #eef4fb; } .phone-country-menu button img { border-radius: 2px; height: 14px; width: 20px; } .phone-country-menu button span { color: #1f324a; font-size: 11px; font-weight: 900; } .phone-country-menu button small { color: #607287; font-size: 11px; font-weight: 750; } .phone-action-buttons { align-items: center; display: inline-flex; gap: 8px; } .phone-action-buttons button { min-width: 106px; width: auto; } .phone-action-buttons .phone-confirm-button { background: #edf5ff; border: 1px solid #d6e4f5; color: #2b4e74; font-size: 10px; min-width: 176px; } .phone-action-buttons .phone-confirm-button.phone-confirmed { background: #eaf8ef; border-color: #1aa766; color: #0f8f53; } .phone-verify-modal-overlay { align-items: center; background: rgba(11, 22, 38, 0.45); display: grid; inset: 0; padding: 16px; position: fixed; z-index: 120; } .phone-verify-modal { background: #ffffff; border-radius: 14px; margin: 0 auto; max-width: 420px; padding: 14px 18px 18px; position: relative; width: 100%; } .phone-verify-close { background: transparent; border: 0; color: #617388; font-size: 16px; font-weight: 900; position: absolute; right: 12px; top: 10px; } .phone-verify-progress { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-right: 34px; } .phone-verify-progress span { background: #dfe8f2; border-radius: 999px; height: 4px; } .phone-verify-progress span.active { background: #14a15f; } .phone-verify-illustration { align-items: center; display: flex; justify-content: center; margin: 16px 0 10px; min-height: 104px; position: relative; } .phone-verify-shield { align-items: center; color: #17a363; display: inline-flex; justify-content: center; left: 0; position: absolute; top: 50%; transform: translateY(-50%); } .phone-verify-shield svg { height: 28px; width: 28px; } .phone-verify-phone { align-items: center; background: linear-gradient(180deg, #f4f9f7 0%, #edf4f1 100%); border-radius: 999px; color: #18a867; display: inline-flex; height: 104px; justify-content: center; width: 104px; } .phone-verify-phone svg { height: 34px; width: 34px; } .phone-verify-modal h2 { color: #13253d; font-size: 35px; font-weight: 900; margin-top: 2px; text-align: center; } .phone-verify-modal > p { color: #5f7085; font-size: 15px; line-height: 1.45; margin: 8px auto 12px; max-width: 320px; text-align: center; } .phone-verify-number-box { background: #ffffff; border: 1px solid #d9e2ec; border-radius: 9px; padding: 8px 10px; } .phone-verify-number-box small { color: #6e7e92; display: block; font-size: 11px; font-weight: 800; } .phone-verify-number-box div { align-items: center; display: flex; gap: 8px; margin-top: 4px; } .phone-verify-number-box strong { color: #1b2f47; font-size: 14px; } .phone-verify-number-box span { color: #25384f; font-size: 14px; font-weight: 800; } .phone-verify-note { align-items: flex-start; background: #eef8f3; border-radius: 9px; display: grid; gap: 10px; grid-template-columns: 24px minmax(0, 1fr); margin-top: 12px; padding: 10px 12px; } .phone-verify-note > span { color: #1da364; } .phone-verify-note > span svg { height: 20px; width: 20px; } .phone-verify-note strong { color: #1d6d4b; display: block; font-size: 13px; } .phone-verify-note small { color: #3f5b4a; display: block; font-size: 12px; line-height: 1.4; margin-top: 3px; } .phone-verify-send { align-items: center; background: #11a25f; border: 0; border-radius: 8px; color: #ffffff; display: inline-flex; font-size: 14px; font-weight: 900; gap: 7px; height: 42px; justify-content: center; margin-top: 12px; width: 100%; } .phone-verify-send:disabled { background: #9bc8b1; cursor: not-allowed; } .phone-verify-send svg { height: 14px; width: 14px; } .phone-verify-change { background: transparent; border: 0; color: #14995b; display: block; font-size: 13px; font-weight: 900; margin: 10px auto 0; } .phone-verify-modal footer { align-items: flex-start; color: #738398; display: flex; font-size: 11px; gap: 7px; line-height: 1.4; margin-top: 14px; } .phone-verify-modal footer svg { color: #5d748f; flex-shrink: 0; font-size: 13px; } .phone-code-hero { align-items: center; display: grid; margin: 14px auto 14px; min-height: 168px; place-items: center; position: relative; width: 230px; } .phone-code-hero::before { background: radial-gradient(circle, rgba(50, 177, 111, 0.18) 0%, rgba(50, 177, 111, 0) 70%); border-radius: 999px; content: ''; height: 168px; position: absolute; width: 168px; } .phone-code-hero::after { border: 1px solid rgba(23, 173, 102, 0.24); border-radius: 999px; content: ''; height: 138px; position: absolute; width: 138px; } .phone-code-device { background: linear-gradient(180deg, #ffffff 0%, #eef2f8 100%); border: 4px solid #111923; border-radius: 24px; box-shadow: 0 12px 26px rgba(19, 34, 54, 0.22); height: 132px; position: relative; width: 96px; z-index: 1; } .phone-code-notch { background: #111923; border-radius: 0 0 11px 11px; height: 12px; left: 50%; position: absolute; top: 0; transform: translateX(-50%); width: 40px; } .phone-code-badge { align-items: center; background: linear-gradient(145deg, #16b369 0%, #0f9c58 100%); border: 2px solid #ffffff; border-radius: 16px; bottom: 28px; box-shadow: 0 12px 20px rgba(20, 160, 96, 0.32); color: #ffffff; display: inline-flex; height: 36px; justify-content: center; left: 10px; position: absolute; width: 36px; z-index: 2; } .phone-code-badge svg { height: 16px; width: 16px; } .phone-code-bubble { align-items: center; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid #e6ebf2; border-radius: 14px; bottom: 54px; box-shadow: 0 14px 28px rgba(20, 36, 56, 0.2); color: #15a05f; display: inline-flex; font-size: 23px; font-weight: 900; height: 56px; justify-content: center; letter-spacing: 0.7px; min-width: 142px; padding: 0 18px; position: absolute; right: 4px; z-index: 2; } .phone-code-bubble::after { border-color: #f8fafc transparent transparent #f8fafc; border-style: solid; border-width: 12px 12px 0 0; bottom: -8px; content: ''; left: 22px; position: absolute; transform: rotate(20deg); } .phone-code-number-line { align-items: center; display: flex; gap: 12px; justify-content: center; margin-top: 2px; } .phone-code-number-line strong { color: #1f3046; font-size: 18px; font-weight: 900; } .phone-code-number-line button { background: transparent; border: 0; color: #17995c; font-size: 14px; font-weight: 900; line-height: 1.2; padding: 0; } .phone-code-inputs { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 14px; } .phone-code-inputs input { background: #ffffff; border: 1px solid #d3dcea; border-radius: 10px; color: #1a2d46; font-size: 26px; font-weight: 800; height: 54px; text-align: center; } .phone-code-inputs input:focus { border-color: #16ab65; box-shadow: 0 0 0 3px rgba(22, 171, 101, 0.14); outline: none; } .phone-code-inputs.is-error input { border-color: #dc4f4f; } .phone-code-error { color: #cb3f3f; font-size: 12px; font-weight: 800; margin-top: 8px; text-align: center; } .phone-code-timer { color: #57697f; font-size: 12px; margin-top: 12px; text-align: center; } .phone-code-timer strong { color: #13a460; } .phone-code-note { margin-top: 10px; } .phone-code-note strong { color: #395461; } .phone-code-note small { color: #566f79; } .phone-code-question { color: #64778e; font-size: 12px; margin-top: 14px; text-align: center; } .phone-code-resend { background: transparent; border: 0; color: #169e5f; display: block; font-size: 16px; font-weight: 900; margin: 0 auto; padding: 0; } .phone-code-resend:disabled { color: #86a49a; cursor: default; } .phone-success-hero { align-items: center; display: grid; margin: 18px auto 12px; min-height: 148px; place-items: center; position: relative; width: 180px; } .phone-success-hero::before { background: radial-gradient(circle, rgba(26, 168, 101, 0.14) 0%, rgba(26, 168, 101, 0) 72%); border-radius: 999px; content: ''; height: 148px; position: absolute; width: 148px; } .phone-success-badge { align-items: center; background: linear-gradient(150deg, #14b064 0%, #0f9958 100%); border-radius: 999px; box-shadow: 0 14px 28px rgba(18, 152, 92, 0.35); display: inline-flex; height: 82px; justify-content: center; position: relative; width: 82px; z-index: 2; } .phone-success-check { border-bottom: 8px solid #ffffff; border-right: 8px solid #ffffff; display: block; height: 26px; margin-top: -3px; transform: rotate(45deg); width: 14px; } .phone-success-decoration { background: #1cb068; border-radius: 999px; position: absolute; z-index: 1; } .phone-success-decoration-left-top { height: 8px; left: 18px; top: 22px; width: 8px; } .phone-success-decoration-left-bottom { height: 8px; left: 20px; top: 108px; width: 8px; } .phone-success-decoration-right-top { border-radius: 999px; height: 4px; right: 12px; top: 48px; width: 22px; } .phone-success-decoration-right-top::after { background: #1cb068; border-radius: 999px; content: ''; height: 4px; left: 15px; position: absolute; top: 8px; width: 12px; } .phone-success-number-box { align-items: center; border: 1px solid #dde5ef; border-radius: 9px; display: grid; gap: 12px; grid-template-columns: 52px minmax(0, 1fr); margin-top: 12px; padding: 12px; } .phone-success-number-icon { align-items: center; background: #eef7f2; border-radius: 999px; color: #19a764; display: inline-flex; height: 52px; justify-content: center; width: 52px; } .phone-success-number-icon svg { height: 22px; width: 22px; } .phone-success-number-box small { color: #6f8092; display: block; font-size: 12px; font-weight: 800; } .phone-success-number-box strong { color: #1a2e47; display: block; font-size: 16px; font-weight: 900; margin-top: 2px; } .phone-success-note { align-items: flex-start; display: grid; gap: 10px; grid-template-columns: 28px minmax(0, 1fr); margin-top: 14px; } .phone-success-note > span { align-items: center; background: #eaf5ef; border-radius: 999px; color: #1b9f60; display: inline-flex; height: 28px; justify-content: center; width: 28px; } .phone-success-note > span svg { height: 17px; width: 17px; } .phone-success-note strong { color: #33495f; display: block; font-size: 13px; } .phone-success-note small { color: #566f83; display: block; font-size: 12px; line-height: 1.45; margin-top: 3px; } .profile-form-actions { align-items: center; display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; } .profile-form-actions button { background: #16a464; border: 0; border-radius: 6px; color: #ffffff; font-size: 12px; font-weight: 900; min-height: 36px; padding: 0 14px; } .profile-form-actions .profile-message { font-size: 11px; font-weight: 900; } .profile-form-actions .profile-message.success { color: #109253; } .profile-form-actions .profile-message.error { color: #cf4343; } .profile-form-actions .profile-message.info { color: #2f6cd3; } .profile-edit-side { display: grid; gap: 12px; } .delete-account-button { align-items: center; background: #ffffff; border: 1px solid #f0bcbc; border-radius: 6px; color: #cf4343; display: inline-flex; font-size: 12px; font-weight: 900; gap: 8px; justify-content: center; min-height: 36px; width: 100%; } @media (max-width: 1200px) { .profile-edit-layout { grid-template-columns: 1fr; } } @media (max-width: 900px) { .profile-form-grid.two-col { grid-template-columns: 1fr; } .input-action-row { grid-template-columns: minmax(0, 1fr) 106px; } .phone-row { grid-template-columns: 132px minmax(0, 1fr) auto; } .profile-form-actions { align-items: stretch; flex-direction: column; } } .public-profile-head { align-items: center; display: flex; justify-content: space-between; gap: 12px; } .public-profile-head > button { align-items: center; background: #ffffff; border: 1px solid #d9e2ec; border-radius: 8px; color: #344860; display: inline-flex; font-size: 12px; font-weight: 900; gap: 6px; min-height: 36px; padding: 0 14px; } .public-profile-head > button svg { height: 14px; width: 14px; } .public-profile-cover-card { background: #ffffff; border: 1px solid #dfe7f0; border-radius: 12px; margin-bottom: 12px; overflow: hidden; } .public-profile-cover { background-size: cover; height: 134px; } .public-profile-summary { align-items: center; display: grid; gap: 14px; grid-template-columns: 76px 1.2fr 1fr auto; padding: 12px 16px 16px; } .public-profile-avatar { align-items: center; background: #eaf2ff; border: 3px solid #ffffff; border-radius: 999px; box-shadow: 0 6px 14px rgba(29, 52, 82, 0.16); color: #2f6cd3; display: grid; font-size: 26px; font-weight: 900; height: 76px; margin-top: -30px; width: 76px; } .public-profile-user h2 { font-size: 31px; line-height: 1.05; margin-bottom: 6px; } .public-profile-meta { display: flex; flex-wrap: wrap; gap: 12px; } .public-profile-meta span { align-items: center; color: #607287; display: inline-flex; font-size: 11px; font-weight: 800; gap: 6px; } .public-profile-meta svg { height: 13px; width: 13px; } .public-profile-rating { align-items: center; display: flex; gap: 8px; margin-top: 6px; } .public-profile-rating strong { color: #18293f; font-size: 16px; } .public-profile-rating span { color: #f2b51e; display: inline-flex; gap: 2px; } .public-profile-rating span svg { fill: currentColor; height: 13px; stroke: currentColor; width: 13px; } .public-profile-rating small { color: #6f7f92; font-size: 11px; font-weight: 750; } .public-profile-summary blockquote { color: #3a4d66; font-size: 12px; font-style: italic; font-weight: 700; line-height: 1.5; margin: 0; } .public-profile-stats { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(64px, 1fr)); } .public-profile-stats div { text-align: center; } .public-profile-stats strong { color: #11243a; display: block; font-size: 20px; line-height: 1; } .public-profile-stats small { color: #6f7f92; font-size: 10px; font-weight: 750; } .public-profile-grid { align-items: start; display: grid; gap: 12px; grid-template-columns: 1.35fr 0.95fr; margin-bottom: 12px; } .public-profile-listings { align-self: start; } .public-listing-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .public-listing-card { border: 1px solid #e4ebf3; border-radius: 10px; overflow: hidden; } .public-listing-photo { position: relative; background-size: cover; border-bottom: 1px solid #e4ebf3; height: 88px; } .public-listing-badge { border-radius: 999px; font-size: 9px; font-weight: 900; left: 8px; line-height: 1; padding: 4px 7px; position: absolute; top: 8px; } .public-listing-badge.sale { background: #ddf5e8; color: #109253; } .public-listing-badge.rent { background: #ece6ff; color: #7a59c4; } .public-listing-body { padding: 10px; } .public-listing-body strong { color: #11243a; display: block; font-size: 20px; font-weight: 900; letter-spacing: 0; line-height: 1.1; white-space: nowrap; } .public-listing-body h3 { color: #1d3047; font-size: 12px; font-weight: 850; line-height: 1.2; margin-top: 5px; } .public-listing-body small { align-items: center; color: #6f7f92; display: flex; font-size: 9px; font-weight: 800; gap: 4px; margin-top: 3px; } .public-listing-body small svg { height: 12px; width: 12px; } .public-listing-meta { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; } .public-listing-meta span { align-items: center; color: #617388; display: inline-flex; font-size: 9px; font-weight: 800; gap: 4px; min-width: 0; } .public-listing-meta span svg { height: 11px; width: 11px; } .public-listing-foot { align-items: center; display: flex; justify-content: space-between; margin-top: 8px; } .public-listing-foot em { color: #7d8b9c; font-size: 9px; font-style: normal; font-weight: 750; } .public-listing-foot button { align-items: center; background: transparent; border: 0; color: #708094; display: inline-flex; justify-content: center; padding: 0; } .public-listing-foot button svg { height: 14px; width: 14px; } .public-profile-reviews .settings-card-head, .public-profile-listings .settings-card-head { align-items: center; display: flex; justify-content: space-between; } .public-profile-reviews .settings-card-head .ghost, .public-profile-listings .settings-card-head .ghost { border: 0; color: #109253; font-size: 11px; font-weight: 900; padding: 0; } .public-review-list { display: grid; gap: 10px; } .public-review-item { border-bottom: 1px solid #eef2f7; display: grid; gap: 10px; grid-template-columns: 34px minmax(0, 1fr); padding-bottom: 10px; } .public-review-item:last-child { border-bottom: 0; padding-bottom: 0; } .public-review-avatar { align-items: center; background: #e7eef8; border: 1px solid #d6e0ee; border-radius: 999px; color: #2f557f; display: grid; font-size: 11px; font-weight: 900; height: 34px; overflow: hidden; width: 34px; } .public-review-avatar img { height: 100%; object-fit: cover; width: 100%; } .public-review-content strong { color: #1a2c43; display: block; font-size: 12px; font-weight: 900; } .public-review-stars { color: #f2b51e; display: inline-flex; gap: 2px; margin: 2px 0 6px; } .public-review-stars svg { fill: currentColor; height: 12px; stroke: currentColor; width: 12px; } .public-review-content p { color: #53667c; font-size: 11px; line-height: 1.45; } .public-profile-about h2 { margin-bottom: 8px; } .public-profile-about p { color: #53667c; font-size: 12px; line-height: 1.5; } .public-profile-badges { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; } .public-profile-badges span { align-items: center; background: #f5faf7; border: 1px solid #d8ebdf; border-radius: 8px; color: #2a4a37; display: inline-flex; font-size: 11px; font-weight: 850; gap: 6px; min-height: 32px; padding: 0 10px; } .public-profile-badges span svg { height: 13px; width: 13px; } @media (max-width: 1240px) { .public-profile-summary { grid-template-columns: 76px 1fr; } .public-profile-summary blockquote, .public-profile-stats { grid-column: 1 / -1; } .public-profile-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .public-profile-head { align-items: flex-start; flex-direction: column; } .public-listing-grid { grid-template-columns: 1fr; } .public-profile-badges { grid-template-columns: 1fr; } } @media (max-width: 1380px) { .favorites-head h1 { font-size: 40px; } .favorites-tabs button { font-size: 14px; } .favorite-card { grid-template-columns: 260px minmax(0, 1fr) auto; } .favorite-content strong { font-size: 20px; } .favorite-content h3 { font-size: 16px; } } @media (max-width: 1100px) { .favorites-head { align-items: flex-start; flex-direction: column; } .favorites-toolbar { align-items: flex-start; flex-direction: column; } .favorites-controls { width: 100%; } .favorites-layout { grid-template-columns: 1fr; } .favorites-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .favorite-card { grid-template-columns: 220px minmax(0, 1fr) auto; } } @media (max-width: 760px) { .favorites-head h1 { font-size: 31px; } .favorites-tabs { width: 100%; } .favorites-tabs button { flex: 1; font-size: 15px; padding: 0 4px; } .favorites-controls { flex-wrap: wrap; } .favorites-sort-control, .favorites-filter-button { width: 100%; } .favorite-card { grid-template-columns: 1fr; padding: 8px; } .favorite-photo { min-height: 188px; } .favorite-content strong { font-size: 20px; } .favorite-content h3 { font-size: 16px; } .favorite-content ul { gap: 10px; } .favorite-actions { display: flex; justify-content: flex-end; } .favorites-sidebar { grid-template-columns: 1fr; } } /* ===== Auth / Panel admina (logowanie, rejestracja, moderacja) ===== */ .login-error { background: #fdecec; border: 1px solid #f5c2c2; border-radius: 8px; color: #b3261e; font-size: 13px; font-weight: 700; margin: 0; padding: 8px 12px; } .login-eye { background: transparent; border: none; color: #64748b; cursor: pointer; display: inline-flex; padding: 0; } .login-eye svg { height: 18px; width: 18px; } .publish-feedback { align-items: center; border-radius: 10px; display: flex; font-size: 14px; font-weight: 700; gap: 8px; margin: 12px 0 0; padding: 12px 14px; } .publish-feedback.success { background: #e8f8ef; border: 1px solid #b7e6cd; color: #0f7a48; } .publish-feedback.error { background: #fdecec; border: 1px solid #f5c2c2; color: #b3261e; } .publish-feedback svg { height: 18px; width: 18px; } .admin-page { background: #f5f7fa; min-height: calc(100vh - 82px); padding: 24px 18px; } .admin-shell { margin: 0 auto; max-width: 1280px; } .admin-shell-with-sidebar { align-items: start; display: grid; gap: 16px; grid-template-columns: 250px minmax(0, 1fr); max-width: 1480px; } .admin-sidebar { background: #ffffff; border: 1px solid #e3e9f0; border-radius: 12px; display: grid; gap: 14px; padding: 14px; position: sticky; top: 94px; } .admin-sidebar-badge { justify-self: start; } .admin-nav { display: grid; gap: 3px; } .admin-nav button, .admin-nav a { align-items: center; background: transparent; border: 0; border-radius: 8px; color: #33475f; cursor: pointer; display: grid; font-size: 13px; font-weight: 800; gap: 9px; grid-template-columns: 16px minmax(0, 1fr) auto; min-height: 38px; padding: 0 10px; text-align: left; } .admin-nav button svg, .admin-nav a svg { color: #7186a0; height: 15px; width: 15px; } .admin-nav button.active, .admin-nav a.active { background: #ebf6f0; color: #109253; } .admin-nav button.active svg, .admin-nav a.active svg { color: #109253; } .admin-nav button b, .admin-nav a b { background: #129357; border-radius: 999px; color: #ffffff; font-size: 10px; min-width: 18px; padding: 1px 6px; text-align: center; } .admin-nav-group-label { color: #93a3b8; font-size: 10px; font-weight: 900; letter-spacing: 0.03em; margin: 2px 4px -6px; text-transform: uppercase; } .admin-sidebar-status { background: #f3fbf7; border: 1px solid #d8efe4; border-radius: 10px; display: grid; gap: 6px; padding: 12px; } .admin-sidebar-status strong { align-items: center; color: #109253; display: inline-flex; font-size: 12px; gap: 6px; } .admin-sidebar-status p { color: #5f748a; font-size: 11px; font-weight: 700; line-height: 1.4; margin: 0; } .admin-sidebar-status button { background: transparent; border: 0; color: #109253; font-size: 11px; font-weight: 900; justify-self: start; padding: 0; } .admin-sidebar .admin-back { border-top: 1px solid #eef2f7; margin-top: 0; padding-top: 12px; } .admin-main { min-width: 0; } .admin-dashboard { display: grid; gap: 14px; } .admin-stats-grid { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); } .admin-stat-card { align-items: center; background: #ffffff; border: 1px solid #e3e9f0; border-radius: 11px; display: grid; gap: 10px; grid-template-columns: 36px minmax(0, 1fr); padding: 12px; } .admin-stat-icon { align-items: center; border-radius: 999px; display: grid; height: 36px; place-items: center; width: 36px; } .admin-stat-icon svg { height: 16px; width: 16px; } .admin-stat-icon.tone-green { background: #eaf8ef; color: #139d5b; } .admin-stat-icon.tone-blue { background: #eef0ff; color: #5e6ddb; } .admin-stat-icon.tone-yellow { background: #fff8e7; color: #e4af24; } .admin-stat-icon.tone-purple { background: #f1eeff; color: #7a61db; } .admin-stat-icon.tone-pink { background: #ffeef3; color: #d95a78; } .admin-stat-card strong { color: #13243d; display: block; font-size: 20px; line-height: 1.1; } .admin-stat-card small { color: #7186a0; display: block; font-size: 11px; font-weight: 750; margin-top: 2px; } .admin-dashboard-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .admin-card-head { align-items: center; display: flex; justify-content: space-between; padding: 14px 18px 0; } .admin-card-head h2 { color: #13243d; font-size: 16px; margin: 0; } .admin-card-head button { background: transparent; border: 0; color: #159e5d; font-size: 11px; font-weight: 900; } .admin-table-compact .admin-row { grid-template-columns: 2fr 1fr 1.4fr 1fr; padding: 10px 18px; } .admin-activity-list { display: grid; gap: 2px; list-style: none; margin: 10px 0 0; padding: 0 18px 14px; } .admin-activity-list li { align-items: center; border-bottom: 1px solid #eef2f7; display: grid; gap: 10px; grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 56px; padding: 6px 0; } .admin-activity-list li:last-child { border-bottom: 0; } .admin-activity-avatar { align-items: center; background: #e8f4ff; border-radius: 999px; color: #20344f; display: grid; font-size: 12px; font-weight: 900; height: 30px; place-items: center; width: 30px; } .admin-activity-list strong { color: #13243d; display: block; font-size: 12px; } .admin-activity-list small { color: #7186a0; display: block; font-size: 11px; font-weight: 700; margin-top: 2px; } .admin-activity-list em { color: #93a3b8; font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; } .admin-quick-actions-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 18px 18px; } .admin-quick-actions-grid button { align-items: center; background: #f8fbff; border: 1px solid #e0e8f2; border-radius: 9px; color: #2f445d; display: flex; font-size: 12px; font-weight: 800; gap: 8px; min-height: 42px; padding: 0 12px; } .admin-quick-actions-grid button svg:first-child { color: #109253; } .admin-quick-actions-grid button svg:last-child { margin-left: auto; opacity: 0.6; } .admin-placeholder { align-items: center; display: grid; justify-items: center; min-height: 220px; padding: 32px; text-align: center; } .admin-placeholder span { align-items: center; background: #ebf6f0; border-radius: 999px; color: #109253; display: grid; height: 44px; margin-bottom: 12px; place-items: center; width: 44px; } .admin-placeholder strong { color: #13243d; font-size: 16px; } .admin-placeholder p { color: #7186a0; font-size: 12px; font-weight: 700; margin: 6px 0 0; max-width: 320px; } .admin-stats-live { display: grid; gap: 14px; } .admin-stats-top-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-stats-top-card { align-items: center; background: #ffffff; border: 1px solid #e3e9f0; border-radius: 12px; display: grid; gap: 12px; grid-template-columns: 48px minmax(0, 1fr); min-height: 86px; padding: 14px 16px; } .admin-stats-top-card span { align-items: center; background: #edf3ff; border-radius: 999px; color: #1b63de; display: grid; font-size: 20px; height: 44px; place-items: center; width: 44px; } .admin-stats-top-card strong { color: #13243d; display: block; font-size: 38px; line-height: 1; } .admin-stats-top-card small { color: #5f748a; font-size: 13px; font-weight: 760; } .admin-stats-layout { display: grid; gap: 14px; grid-template-columns: 260px minmax(0, 1fr); } .admin-stats-sidebar, .admin-stats-main { background: #ffffff; border: 1px solid #e3e9f0; border-radius: 12px; } .admin-stats-sidebar { padding: 16px; } .admin-stats-sidebar h3 { color: #13243d; font-size: 15px; margin: 0 0 10px; text-transform: uppercase; } .admin-stats-period-buttons { display: grid; gap: 8px; } .admin-stats-period-buttons button { align-items: center; background: #ffffff; border: 1px solid #dbe5ef; border-radius: 8px; color: #33475f; display: inline-flex; font-size: 14px; font-weight: 780; gap: 8px; min-height: 40px; padding: 0 12px; } .admin-stats-period-buttons button.active { background: #eef3fb; border-color: #c7d7ea; color: #1b63de; } .admin-stats-side-summary { border-top: 1px solid #e6ecf3; margin-top: 14px; padding-top: 12px; } .admin-stats-custom-range { background: #f8fbff; border: 1px solid #e1e9f3; border-radius: 10px; display: grid; gap: 10px; margin-top: 10px; padding: 10px; } .admin-stats-custom-range label { display: grid; gap: 5px; } .admin-stats-custom-range span { color: #4f6682; font-size: 12px; font-weight: 760; } .admin-stats-custom-range input { background: #ffffff; border: 1px solid #d9e3ef; border-radius: 8px; color: #13243d; font-family: inherit; font-size: 13px; font-weight: 760; min-height: 38px; padding: 0 10px; } .admin-stats-custom-range select { background: #ffffff; border: 1px solid #d9e3ef; border-radius: 8px; color: #13243d; font-family: inherit; font-size: 13px; font-weight: 760; min-height: 38px; padding: 0 10px; } .admin-stats-side-summary strong, .admin-stats-side-summary p { color: #33475f; display: block; font-size: 13px; font-weight: 760; margin: 0 0 8px; } .admin-stats-main { display: grid; gap: 12px; padding: 16px; } .admin-stats-main-head { align-items: center; display: flex; justify-content: space-between; } .admin-stats-main-head h2 { color: #13243d; font-size: 36px; margin: 0; } .admin-stats-cards-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .admin-stats-card { background: #ffffff; border: 1px solid #e4eaf2; border-radius: 12px; min-height: 110px; padding: 14px; } .admin-stats-card h4 { align-items: center; color: #4f6682; display: inline-flex; font-size: 15px; font-weight: 780; gap: 8px; margin: 0; } .admin-stats-card h4 svg { color: #1b63de; } .admin-stats-card strong { color: #13243d; display: block; font-size: 44px; line-height: 1; margin-top: 10px; } .admin-stats-history { background: #ffffff; border: 1px solid #e4eaf2; border-radius: 12px; overflow: hidden; } .admin-stats-history header { align-items: center; display: flex; justify-content: space-between; padding: 12px 14px 0; } .admin-stats-history h3 { color: #13243d; font-size: 18px; margin: 0; } .admin-stats-history small { color: #7186a0; font-size: 11px; font-weight: 760; } .admin-table-stats-history .admin-row { grid-template-columns: 1.1fr repeat(5, minmax(0, 1fr)); } @media (max-width: 1180px) { .admin-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .admin-dashboard-grid { grid-template-columns: 1fr; } .admin-stats-layout { grid-template-columns: 1fr; } .admin-stats-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .admin-shell-with-sidebar { grid-template-columns: 1fr; } .admin-sidebar { position: static; } .admin-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-quick-actions-grid { grid-template-columns: 1fr; } .admin-stats-top-grid, .admin-stats-cards-grid { grid-template-columns: 1fr; } } .admin-head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 18px; } .admin-head h1 { color: #13243d; font-size: 32px; margin: 8px 0 6px; } .admin-head p { color: #5f748a; font-size: 14px; margin: 0; } .admin-badge { align-items: center; background: #e8f8ef; border-radius: 999px; color: #0f7a48; display: inline-flex; font-size: 12px; font-weight: 800; gap: 6px; padding: 5px 12px; text-transform: uppercase; } .admin-badge svg { height: 14px; width: 14px; } .admin-refresh { align-items: center; background: #ffffff; border: 1px solid #d8e3ef; border-radius: 8px; color: #304760; cursor: pointer; display: inline-flex; font-weight: 800; gap: 8px; min-height: 40px; padding: 0 16px; } .admin-refresh:disabled { opacity: 0.6; cursor: default; } .admin-error { background: #fdecec; border: 1px solid #f5c2c2; border-radius: 8px; color: #b3261e; font-weight: 700; margin: 0 0 14px; padding: 10px 14px; } .admin-empty { color: #5f748a; font-weight: 700; padding: 24px; text-align: center; } .admin-card { background: #ffffff; border: 1px solid #e3e9f0; border-radius: 12px; overflow: hidden; } .admin-table { display: flex; flex-direction: column; } .admin-table-reports .admin-row-report { grid-template-columns: 2.15fr 1.25fr 1fr 1fr 0.95fr 1.05fr 1.25fr; } .admin-table-reports .admin-row-report > span:nth-child(5), .admin-table-reports .admin-row-report > span:nth-child(6) { text-align: center; } .admin-table-reports .admin-row-report > span:nth-child(5) .admin-btn, .admin-table-reports .admin-row-report > span:nth-child(6) .admin-btn { width: 100%; } .admin-row { align-items: center; border-bottom: 1px solid #eef2f7; display: grid; gap: 12px; grid-template-columns: 2.4fr 1.3fr 1fr 1.6fr 1fr 1.6fr; padding: 14px 18px; } .admin-table-users .admin-row { grid-template-columns: 1.7fr 0.8fr 1fr 0.9fr 1fr 1.1fr 0.9fr 0.95fr 1.15fr; } .admin-table-message-inbox .admin-row { grid-template-columns: 1.25fr 1.9fr 1.2fr 0.8fr; } .admin-message-inbox .admin-cell-main small { white-space: normal; } .admin-row:last-child { border-bottom: none; } .admin-row-head { background: #f7f9fc; color: #7186a0; font-size: 12px; font-weight: 800; text-transform: uppercase; } .admin-row span { color: #33475f; font-size: 14px; min-width: 0; overflow-wrap: anywhere; } .admin-cell-main { display: grid; gap: 2px; min-width: 0; } .admin-cell-main strong, .admin-cell-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-cell-main strong { color: #13243d; font-size: 14px; } .admin-cell-main small { color: #7186a0; font-size: 12px; } .admin-cell-owner { color: #5f748a; font-size: 13px; } .admin-status { border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 800; padding: 4px 10px; white-space: nowrap; } .admin-status.pending { background: #fff5e5; color: #b8770a; } .admin-status.approved { background: #e8f8ef; color: #0f7a48; } .admin-status.rejected { background: #fdecec; color: #b3261e; } .admin-status.company { background: #f2e9fc; color: #7c3aed; } .admin-cell-verification { align-items: flex-start; display: grid; gap: 6px; justify-items: start; } .admin-cell-preview { align-items: flex-start; display: grid; justify-items: start; } .admin-verify-modal { background: #ffffff; border: 1px solid #e4e9f1; border-radius: 16px; max-width: 460px; padding: 22px; position: relative; width: min(100%, 460px); } .admin-message-modal { background: #ffffff; border: 1px solid #e4e9f1; border-radius: 16px; max-width: 480px; padding: 22px; position: relative; width: min(100%, 480px); } .admin-message-modal h2 { color: #13243d; font-size: 20px; margin: 0 28px 0 0; } .admin-message-refresh { background: transparent; border: 1px solid #dbe4ef; border-radius: 999px; color: #33475f; cursor: pointer; font-size: 12px; font-weight: 700; margin-top: 10px; padding: 5px 12px; } .admin-message-error { background: #fdecec; border-radius: 8px; color: #b3261e; font-size: 12px; font-weight: 700; margin: 10px 0 0; padding: 8px 10px; } .admin-message-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; max-height: 320px; overflow-y: auto; padding-right: 4px; } .admin-message-bubble { background: #f7f9fc; border-radius: 12px; max-width: 85%; padding: 8px 12px; } .admin-message-bubble p { color: #13243d; font-size: 13px; margin: 0; overflow-wrap: anywhere; } .admin-message-bubble small { color: #7186a0; display: block; font-size: 11px; margin-top: 4px; } .admin-message-bubble.mine { align-self: flex-end; background: #e8f8ef; } .admin-message-composer { display: grid; gap: 10px; } .admin-message-composer textarea { border: 1px solid #dbe4ef; border-radius: 10px; font-family: inherit; font-size: 13px; padding: 10px 12px; resize: vertical; } .admin-message-composer button { justify-self: end; } .admin-verify-icon { align-items: center; background: #e8f8ef; border-radius: 999px; color: #109253; display: grid; height: 52px; margin: 6px auto 12px; place-items: center; width: 52px; } .admin-verify-icon svg { height: 24px; width: 24px; } .admin-verify-modal h2 { color: #13243d; font-size: 24px; margin: 0; text-align: center; } .admin-verify-subtitle { color: #5f748a; font-size: 13px; font-weight: 700; line-height: 1.4; margin: 8px 0 16px; text-align: center; } .admin-verify-details { display: grid; gap: 10px; margin-bottom: 6px; } .admin-verify-details article { align-items: center; background: #f7f9fc; border-radius: 9px; display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; } .admin-verify-details span { color: #7186a0; font-size: 12px; font-weight: 800; } .admin-verify-details strong { color: #13243d; font-size: 13px; font-weight: 900; overflow-wrap: anywhere; text-align: right; } .admin-verify-reject-note { background: #fdecec; border-radius: 8px; color: #b3261e; font-size: 11px; font-weight: 750; line-height: 1.4; margin: 12px 0 0; padding: 8px 10px; text-align: center; } .admin-actions { display: flex; flex-wrap: wrap; gap: 6px; } .admin-account-actions-cell { align-items: center; display: flex; } .admin-account-actions-table { border: 1px solid #e3e9f0; border-radius: 8px; display: grid; gap: 4px; padding: 5px; width: 100%; } .admin-account-actions-table .admin-btn { justify-content: center; width: 100%; } .admin-btn { background: #ffffff; border: 1px solid #d8e3ef; border-radius: 7px; color: #304760; cursor: pointer; font-size: 12px; font-weight: 800; padding: 6px 12px; } .admin-btn-compact { font-size: 11px; padding: 5px 8px; } .admin-btn:disabled { opacity: 0.55; cursor: default; } .admin-btn.approve { background: #129357; color: #ffffff; } .admin-btn.reject { background: #ffffff; border-color: #d8e3ef; color: #b8770a; } .admin-btn.danger { background: #ffffff; border-color: #f2c4c4; color: #b3261e; } .admin-forbidden-words { display: grid; gap: 14px; padding-bottom: 16px; } .admin-forbidden-add { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; padding: 0 18px; } .admin-forbidden-add input { border: 1px solid #d8e3ef; border-radius: 8px; color: #22364e; font-size: 14px; font-weight: 700; min-height: 40px; outline: none; padding: 0 12px; } .admin-forbidden-add input:focus { border-color: #129357; } .admin-forbidden-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px; } .admin-forbidden-chip { align-items: center; background: #f3f7fc; border: 1px solid #dce5f0; border-radius: 999px; color: #33475f; display: inline-flex; font-size: 12px; font-weight: 800; gap: 6px; padding: 5px 6px 5px 12px; } .admin-forbidden-remove { align-items: center; background: transparent; border: none; border-radius: 999px; color: #b0473b; cursor: pointer; display: inline-flex; height: 22px; justify-content: center; padding: 0; width: 22px; } .admin-forbidden-remove svg { height: 14px; width: 14px; } .admin-forbidden-remove:hover:not(:disabled) { background: #fbe4e1; } .admin-forbidden-remove:disabled { cursor: not-allowed; opacity: 0.45; } .admin-forbidden-count { color: #6b7f96; font-size: 13px; font-weight: 700; } .admin-forbidden-search { align-items: center; border: 1px solid #d8e3ef; border-radius: 8px; display: flex; gap: 8px; margin: 0 18px; padding: 0 12px; } .admin-forbidden-search:focus-within { border-color: #129357; } .admin-forbidden-search svg { color: #8496ab; flex-shrink: 0; height: 18px; width: 18px; } .admin-forbidden-search input { background: transparent; border: none; color: #22364e; flex: 1; font-size: 14px; font-weight: 700; min-height: 40px; outline: none; padding: 0; } .admin-forbidden-search-clear { background: transparent; border: none; color: #8496ab; cursor: pointer; font-size: 20px; line-height: 1; padding: 0 2px; } .admin-users-search-bar { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin: 16px 18px 12px; } .admin-users-search { align-items: center; background: #ffffff; border: 1px solid #d8e3ef; border-radius: 10px; display: flex; gap: 8px; min-height: 42px; padding: 0 12px; width: min(100%, 420px); } .admin-users-search:focus-within { border-color: #129357; } .admin-users-search svg { color: #8496ab; flex-shrink: 0; height: 18px; width: 18px; } .admin-users-search input { background: transparent; border: none; color: #22364e; flex: 1; font-size: 14px; font-weight: 700; min-height: 38px; outline: none; padding: 0; } .admin-users-search-clear { background: transparent; border: none; color: #8496ab; cursor: pointer; font-size: 20px; line-height: 1; padding: 0 2px; } .admin-users-search-count { color: #7186a0; font-size: 12px; font-weight: 800; } .admin-muted { color: #93a3b8; font-size: 12px; font-weight: 700; } .admin-back { align-items: center; background: transparent; border: none; color: #129357; cursor: pointer; display: inline-flex; font-weight: 800; gap: 8px; margin-top: 18px; padding: 8px 0; } @media (max-width: 900px) { .admin-row, .admin-table-users .admin-row { grid-template-columns: 1fr 1fr; } .admin-row-head { display: none; } .admin-cell-main { grid-column: 1 / -1; } .admin-actions { grid-column: 1 / -1; } .admin-account-actions-cell { grid-column: 1 / -1; } .admin-forbidden-add { grid-template-columns: 1fr; } .admin-users-search-bar { align-items: stretch; flex-direction: column; } .admin-users-search { width: 100%; } } /* ===== Ogloszenia z API: paski na Kupuje/Wynajmuje i Moje oferty ===== */ .real-listings-band { background: #eef7f1; border: 1px solid #cfe8d8; border-radius: 14px; margin-bottom: 18px; padding: 16px; } .real-listings-band-head { align-items: center; display: flex; gap: 10px; margin-bottom: 12px; } .real-listings-band-head h3 { color: #0f5132; font-size: 15px; margin: 0; } .real-listings-band-head span { background: #129357; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 800; padding: 2px 9px; } .real-listings-grid, .listings-api-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .real-listing-card, .listings-api-card { background: #fff; border: 1px solid #e2e9f1; border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; padding: 0; text-align: left; transition: box-shadow 0.15s, transform 0.15s; } .real-listing-card:hover, .listings-api-card:hover { box-shadow: 0 10px 24px rgba(19, 36, 61, 0.12); transform: translateY(-2px); } .real-listing-photo, .listings-api-thumb { background-color: #dce5f0; background-position: center; background-size: cover; height: 140px; position: relative; } .real-listing-photo .green-tag { background: #129357; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; left: 10px; padding: 3px 9px; position: absolute; top: 10px; } .real-listing-info, .listings-api-body { display: flex; flex-direction: column; gap: 3px; padding: 12px; } .real-listing-info h3, .listings-api-body strong { color: #13243d; font-size: 14px; margin: 0; } .real-listing-info p, .listings-api-body small { color: #64748b; font-size: 12px; margin: 0; } .real-listing-info small { color: #94a3b8; font-size: 12px; } .real-listing-info strong { color: #0f5132; font-size: 16px; margin-top: 4px; } .listings-api-body em { color: #0f5132; font-size: 15px; font-style: normal; font-weight: 800; margin-top: 2px; } .listings-api-band { margin-bottom: 20px; } .listings-api-band > header { align-items: center; display: flex; gap: 10px; margin-bottom: 12px; } .listings-api-band > header h2 { color: #13243d; font-size: 17px; margin: 0; } .listings-api-band > header span { background: #129357; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 800; padding: 2px 9px; } .listings-api-note { color: #64748b; font-size: 14px; } .listings-api-thumb { border-radius: 0; } .ld-status { border-radius: 999px; font-size: 11px; font-weight: 800; padding: 3px 9px; } .listings-api-thumb .ld-status { left: 10px; position: absolute; top: 10px; } .ld-status-pending { background: #fff4d6; color: #92600a; } .ld-status-approved { background: #d6f3e2; color: #0f7a43; } .ld-status-rejected { background: #fbe0dd; color: #b0473b; } /* ===== Widok szczegolow ogloszenia ===== */ .listing-detail-page { margin: 0 auto; max-width: 1180px; padding: 24px 20px 60px; } .listing-detail-state { align-items: center; color: #47597a; display: flex; flex-direction: column; gap: 14px; justify-content: center; min-height: 320px; } .listing-detail-back, .listing-detail-crumbs button { align-items: center; background: none; border: none; color: #129357; cursor: pointer; display: inline-flex; font: inherit; font-weight: 700; gap: 6px; } .listing-detail-crumbs { align-items: center; color: #8496ab; display: flex; flex-wrap: wrap; font-size: 13px; gap: 8px; margin-bottom: 18px; } .listing-detail-crumbs strong { color: #13243d; } .listing-detail-layout { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 360px; } .listing-detail-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .listing-detail-gallery-main { border-radius: 16px; overflow: hidden; position: relative; } .listing-detail-gallery-main img { aspect-ratio: 16 / 10; display: block; height: auto; object-fit: cover; width: 100%; } .listing-detail-badges { display: flex; gap: 8px; left: 14px; position: absolute; top: 14px; } .ld-badge { background: rgba(255, 255, 255, 0.92); border-radius: 999px; color: #13243d; font-size: 12px; font-weight: 800; padding: 4px 11px; } .ld-badge-green { background: #129357; color: #fff; } .listing-detail-gallery-count { background: rgba(15, 23, 42, 0.72); border-radius: 999px; bottom: 14px; color: #fff; font-size: 12px; font-weight: 700; left: 14px; padding: 4px 10px; position: absolute; } .listing-detail-thumbs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin-top: 8px; } .listing-detail-thumbs button { border: 2px solid transparent; border-radius: 10px; cursor: pointer; overflow: hidden; padding: 0; } .listing-detail-thumbs button.active { border-color: #129357; } .listing-detail-thumbs img { aspect-ratio: 1 / 1; display: block; height: 100%; object-fit: cover; width: 100%; } .listing-detail-card { background: #fff; border: 1px solid #e6ecf3; border-radius: 16px; padding: 20px 22px; } .listing-detail-card-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; } .listing-detail-card-head h2 { margin: 0; } .listing-detail-report-btn { align-items: center; background: #ffffff; border: 1px solid #f4b2a8; border-radius: 8px; color: #df2f17; cursor: pointer; display: inline-flex; font-size: 12px; font-weight: 900; gap: 6px; padding: 6px 10px; } .listing-detail-report-btn:hover { background: #fff5f3; } .listing-detail-gallery-main-image { background: transparent; border: 0; cursor: zoom-in; display: block; padding: 0; width: 100%; } .listing-detail-gallery-main-image img { display: block; } .listing-detail-gallery-main-image:focus-visible { outline: none; } .listing-detail-meta-actions { align-items: center; border-top: 1px solid #d6e0ea; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 12px; padding-top: 12px; } .listing-detail-meta-actions .listing-detail-meta { flex: 1 1 auto; margin-right: auto; } .listing-detail-card h2 { color: #13243d; font-size: 18px; margin: 0 0 14px; } .listing-detail-meta { color: #8496ab; display: flex; flex-wrap: wrap; font-size: 13px; gap: 14px; margin-top: 14px; margin-bottom: 0; } .listing-detail-meta span { align-items: center; display: inline-flex; gap: 5px; } .listing-detail-meta svg { height: 15px; width: 15px; } .listing-detail-description { color: #37475d; line-height: 1.65; margin: 0; white-space: pre-line; } .listing-detail-tour-embed { aspect-ratio: 16 / 9; border: 1px solid #d9e4f0; border-radius: 12px; margin-bottom: 12px; overflow: hidden; } .listing-detail-tour-embed iframe { border: 0; display: block; height: 100%; width: 100%; } .listing-detail-tour-link { align-items: center; color: #0d7d47; display: inline-flex; font-size: 13px; font-weight: 800; gap: 6px; text-decoration: none; } .listing-detail-tour-link svg { height: 14px; width: 14px; } .listing-detail-specs { display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); } .listing-detail-spec { align-items: center; background: #fff; display: flex; justify-content: space-between; padding: 11px 4px; } .listing-detail-spec span { color: #7688a0; font-size: 14px; } .listing-detail-spec strong { color: #13243d; font-size: 14px; font-weight: 700; text-align: right; } .listing-detail-chips { display: flex; flex-wrap: wrap; gap: 8px; } .listing-detail-chips span { align-items: center; background: #f1f6fb; border: 1px solid #e0e8f1; border-radius: 999px; color: #33475f; display: inline-flex; font-size: 13px; font-weight: 600; gap: 6px; padding: 6px 12px; } .listing-detail-chips svg { color: #129357; height: 15px; width: 15px; } .listing-detail-address { color: #37475d; font-weight: 600; margin: 0 0 12px; } .listing-detail-map { border-radius: 14px; overflow: hidden; } .listing-detail-map .satellite-map { height: 300px; } .listing-detail-map-hint { color: #5f7086; font-size: 12px; font-weight: 700; margin: 8px 2px 0; } .listing-lightbox-overlay { align-items: center; background: rgba(8, 14, 24, 0.82); display: flex; inset: 0; justify-content: center; padding: 16px; position: fixed; z-index: 70; } .listing-lightbox-modal { align-items: center; display: flex; justify-content: center; max-height: 75vh; max-width: 75vw; position: relative; } .listing-lightbox-image { border-radius: 12px; box-shadow: 0 30px 60px rgba(6, 12, 22, 0.45); display: block; max-height: 75vh; max-width: 75vw; object-fit: cover; width: auto; } .listing-lightbox-close { background: transparent; border: 0; border-radius: 999px; color: #ffffff; cursor: pointer; font-size: 34px; font-weight: 300; height: 36px; line-height: 1; position: absolute; right: 8px; top: 8px; width: 36px; z-index: 3; } .listing-lightbox-arrow { align-items: center; background: rgba(16, 29, 49, 0.58); border: 0; border-radius: 999px; color: #ffffff; cursor: pointer; display: inline-flex; height: 44px; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; z-index: 3; } .listing-lightbox-arrow svg { height: 18px; width: 18px; } .listing-lightbox-prev { left: 12px; } .listing-lightbox-prev svg { transform: rotate(90deg); } .listing-lightbox-next { right: 12px; } .listing-lightbox-next svg { transform: rotate(-90deg); } .listing-lightbox-counter { background: rgba(10, 18, 30, 0.78); border-radius: 999px; bottom: -44px; color: #f7fbff; font-size: 12px; font-weight: 800; left: 50%; padding: 7px 12px; position: absolute; transform: translateX(-50%); } @media (max-width: 960px) { .listing-lightbox-modal { max-height: 75vh; max-width: 92vw; } .listing-lightbox-image { max-height: 75vh; max-width: 92vw; } .listing-lightbox-prev { left: 8px; } .listing-lightbox-next { right: 8px; } .listing-lightbox-close { right: 8px; top: 8px; } .listing-lightbox-counter { bottom: 10px; } } .listing-report-overlay { align-items: center; background: rgba(12, 21, 36, 0.45); display: flex; inset: 0; justify-content: center; padding: 16px; position: fixed; z-index: 50; } .listing-report-modal { background: #ffffff; border-radius: 14px; box-shadow: 0 22px 40px rgba(16, 28, 46, 0.25); max-width: 520px; padding: 22px; position: relative; width: 100%; } .listing-report-close { background: transparent; border: 0; color: #5f7086; cursor: pointer; font-size: 24px; line-height: 1; position: absolute; right: 12px; top: 8px; } .listing-report-modal h3 { color: #13243d; font-size: 22px; margin: 0 0 8px; } .listing-report-modal p { color: #53647c; margin: 0 0 14px; } .listing-report-reasons { display: grid; gap: 8px; margin-bottom: 12px; } .listing-report-reasons button { background: #ffffff; border: 1px solid #dbe4ee; border-radius: 10px; color: #1c2e46; cursor: pointer; font-size: 14px; font-weight: 800; padding: 10px 12px; text-align: left; } .listing-report-reasons button.active { border-color: #ee513a; box-shadow: inset 0 0 0 1px #ee513a; } .listing-report-field { color: #23374f; display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px; } .listing-report-textarea { border: 1px solid #d6e0ea; border-radius: 10px; font-family: inherit; font-size: 14px; min-height: 110px; padding: 10px 12px; resize: vertical; width: 100%; } .listing-report-textarea:focus { border-color: #2f78ff; box-shadow: 0 0 0 3px rgba(47, 120, 255, 0.12); outline: 0; } .listing-report-error { color: #cf2d17; font-size: 12px; font-weight: 800; margin: 8px 0 0; } .listing-report-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; } .listing-report-actions button { border: 1px solid #d5dfeb; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 800; padding: 9px 12px; } .listing-report-actions button.primary { background: #df2f17; border-color: #df2f17; color: #fff; } .listing-report-actions button:disabled { cursor: not-allowed; opacity: 0.6; } .listing-report-case { color: #13243d; font-size: 14px; font-weight: 900; } .listing-detail-side { position: sticky; top: 90px; } .listing-detail-price-card { background: #fff; border: 1px solid #e6ecf3; border-radius: 16px; box-shadow: 0 12px 30px rgba(19, 36, 61, 0.08); display: flex; flex-direction: column; gap: 12px; padding: 22px; } .listing-detail-price-card h1 { color: #13243d; font-size: 20px; margin: 0; } .listing-detail-loc { color: #7688a0; font-size: 14px; margin: 0; } .listing-detail-price-row { align-items: baseline; display: flex; flex-wrap: wrap; gap: 10px; } .listing-detail-price-row strong { color: #0f5132; font-size: 26px; } .listing-detail-price-row span { color: #7688a0; font-size: 14px; font-weight: 600; } .listing-detail-stats { border-block: 1px solid #eef2f7; display: grid; gap: 6px; grid-template-columns: repeat(2, 1fr); padding: 14px 0; } .listing-detail-stats > div { align-items: center; display: flex; flex-direction: column; gap: 2px; text-align: center; } .listing-detail-stats svg { color: #129357; height: 20px; width: 20px; } .listing-detail-stats strong { color: #13243d; font-size: 15px; } .listing-detail-stats span { color: #94a3b8; font-size: 12px; } .listing-detail-primary { align-items: center; background: #129357; border: none; border-radius: 10px; color: #fff; cursor: pointer; display: inline-flex; font-size: 15px; font-weight: 700; gap: 8px; justify-content: center; padding: 13px; } .listing-detail-primary:hover { background: #0f7a48; } .listing-detail-secondary { align-items: center; background: #fff; border: 1px solid #cfe0d7; border-radius: 10px; color: #0f5132; cursor: pointer; display: inline-flex; font-size: 14px; font-weight: 700; gap: 8px; justify-content: center; padding: 11px; } .listing-detail-secondary svg { height: 17px; width: 17px; } .listing-detail-seller { align-items: center; background: #f7fafd; border-radius: 12px; display: flex; gap: 12px; padding: 12px; } .listing-detail-seller-avatar { align-items: center; background: #129357; border-radius: 50%; color: #fff; display: flex; flex-shrink: 0; font-weight: 800; height: 44px; justify-content: center; width: 44px; } .listing-detail-seller div, .listing-detail-seller-card div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .listing-detail-seller strong, .listing-detail-seller-card strong { color: #13243d; font-size: 14px; line-height: 1.25; } .listing-detail-seller small, .listing-detail-seller-card small { color: #7688a0; font-size: 12px; line-height: 1.35; } .listing-detail-seller a { align-items: center; color: #129357; display: inline-flex; font-size: 13px; font-weight: 700; gap: 5px; text-decoration: none; } .listing-detail-seller a svg { height: 14px; width: 14px; } .listing-detail-fav { align-items: center; background: none; border: 1px solid #e2e9f1; border-radius: 10px; color: #47597a; cursor: pointer; display: inline-flex; font-size: 14px; font-weight: 700; gap: 8px; justify-content: center; padding: 10px; } .listing-detail-fav svg { height: 17px; width: 17px; } .listing-detail-fav.active { border-color: #f3c4bd; color: #d5493c; } .listing-detail-alert { align-items: center; background: #f6fbf8; border: 1px solid #cfe8d8; border-radius: 10px; color: #17653e; cursor: pointer; display: inline-flex; font-size: 14px; font-weight: 700; gap: 8px; justify-content: center; padding: 10px; } .listing-detail-alert svg { height: 16px; width: 16px; } .listing-detail-alert.active { background: #129357; border-color: #129357; color: #fff; } .listing-detail-seller-card { align-items: center; background: #f7fafd; border-radius: 12px; display: flex; gap: 12px; padding: 12px; } .listing-detail-profile-btn { background: #fff; border: 1px solid #e2e9f1; border-radius: 10px; color: #47597a; cursor: pointer; font-size: 14px; font-weight: 700; padding: 10px; } .listing-detail-share { border: 1px solid #e8edf4; border-radius: 10px; display: grid; gap: 10px; padding: 10px 12px; } .listing-detail-share strong { color: #13243d; font-size: 13px; } .listing-detail-share-actions { display: flex; gap: 8px; } .listing-detail-share-actions button { align-items: center; background: #f2f6fb; border: 1px solid #dde6f0; border-radius: 999px; color: #304760; cursor: pointer; display: inline-flex; font-size: 12px; font-weight: 800; height: 30px; justify-content: center; min-width: 30px; padding: 0 8px; } .listing-detail-share-actions button:hover { background: #e9f1f8; } .listing-detail-share-actions button svg { height: 14px; width: 14px; } .listing-detail-share-hint { color: #7588a0; font-size: 12px; font-weight: 600; } @media (max-width: 900px) { .listing-detail-layout { grid-template-columns: 1fr; } .listing-detail-side { position: static; } } /* ===== Ekran sukcesu po publikacji ogloszenia ===== */ .publish-success-panel { align-items: center; background: #eef7f1; border: 1px solid #cfe8d8; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding: 26px 22px; text-align: center; } .final-virtual-tour-block { background: #eef5ff; border: 1px solid #d6e6fb; border-radius: 10px; padding: 12px; } .final-virtual-tour-block h3 { color: #13243d; font-size: 14px; margin: 0 0 6px; } .final-virtual-tour-block p { color: #4e647d; font-size: 13px; line-height: 1.45; margin: 0; } .publish-success-icon { align-items: center; background: #129357; border-radius: 50%; color: #fff; display: flex; height: 48px; justify-content: center; width: 48px; } .publish-success-icon svg { height: 24px; width: 24px; } .publish-success-panel h3 { color: #0f5132; font-size: 19px; margin: 0; } .publish-success-panel p { color: #37475d; line-height: 1.6; margin: 0; max-width: 620px; } .publish-success-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; } .publish-success-actions .next-step-button, .publish-success-actions .back-step-button { align-items: center; display: inline-flex; gap: 8px; } /* ===== Panel admina: przycisk podgladu i modal ogloszenia ===== */ .admin-btn.view { background: #eef2f8; color: #33475f; } .admin-btn.view:hover { background: #e0e8f2; } .admin-preview-overlay { align-items: center; background: rgba(15, 23, 42, 0.55); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 1000; } .admin-preview-modal { background: #fff; border-radius: 16px; display: flex; flex-direction: column; max-height: 90vh; max-width: 900px; overflow: hidden; position: relative; width: 100%; } .admin-report-details-modal { background: #fff; border-radius: 16px; max-height: 90vh; max-width: 900px; overflow-y: auto; padding: 22px; position: relative; width: 100%; } .admin-report-details-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 16px; padding-right: 44px; } .admin-report-details-head h2 { color: #13243d; font-size: 22px; margin: 0; } .admin-report-details-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-report-details-grid article { background: #f7f9fc; border: 1px solid #e4ebf3; border-radius: 10px; display: grid; gap: 4px; padding: 12px; } .admin-report-details-grid span { color: #7186a0; font-size: 12px; font-weight: 800; } .admin-report-details-grid strong { color: #13243d; font-size: 14px; } .admin-report-details-grid small { color: #61758f; font-size: 12px; } .admin-report-details-section { margin-top: 18px; } .admin-report-details-section h3 { color: #13243d; font-size: 16px; margin: 0 0 8px; } .admin-report-details-section p { color: #37475d; font-size: 14px; line-height: 1.55; margin: 0; } .admin-report-attachments { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .admin-report-attachments article { background: #f7f9fc; border: 1px solid #e4ebf3; border-radius: 10px; display: grid; gap: 6px; overflow: hidden; padding: 8px; } .admin-report-attachments img, .admin-report-attachment-placeholder { background: #e7edf5; border-radius: 8px; height: 120px; object-fit: cover; width: 100%; } .admin-report-attachment-preview { background: transparent; border: 0; cursor: zoom-in; display: block; padding: 0; } .admin-report-attachment-preview img { transition: transform 0.15s ease, box-shadow 0.15s ease; } .admin-report-attachment-preview:hover img { box-shadow: 0 8px 18px rgba(19, 36, 61, 0.18); transform: scale(1.01); } .admin-report-attachment-placeholder { align-items: center; color: #6a7f97; display: grid; justify-content: center; } .admin-report-attachments strong { color: #13243d; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-report-attachments small { color: #7186a0; font-size: 11px; } .admin-attachment-lightbox { align-items: center; background: rgba(10, 16, 28, 0.84); display: flex; inset: 0; justify-content: center; position: fixed; z-index: 1100; } .admin-attachment-lightbox-modal { max-height: 86vh; max-width: 86vw; position: relative; } .admin-attachment-lightbox-modal img { border-radius: 12px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35); display: block; max-height: 86vh; max-width: 86vw; object-fit: contain; } .admin-attachment-lightbox-close { align-items: center; background: rgba(255, 255, 255, 0.96); border: 0; border-radius: 999px; color: #1f324a; cursor: pointer; display: inline-flex; font-size: 24px; height: 34px; justify-content: center; position: absolute; right: 10px; top: 10px; width: 34px; } .admin-preview-close { background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; color: #33475f; cursor: pointer; font-size: 22px; height: 34px; line-height: 1; position: absolute; right: 14px; top: 14px; width: 34px; z-index: 2; } .admin-preview-content { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow-y: auto; padding: 22px; } .admin-preview-main { background-color: #dce5f0; background-position: center; background-size: cover; border-radius: 12px; height: 260px; } .admin-preview-thumbs { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); margin-top: 8px; } .admin-preview-thumbs button { background-color: #dce5f0; background-position: center; background-size: cover; border: 2px solid transparent; border-radius: 8px; cursor: pointer; height: 52px; } .admin-preview-thumbs button.active { border-color: #129357; } .admin-preview-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .admin-preview-head { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; } .admin-preview-head h2 { color: #13243d; font-size: 18px; margin: 0; } .admin-preview-loc { color: #7688a0; font-size: 13px; margin: 0; } .admin-preview-price strong { color: #0f5132; font-size: 22px; } .admin-preview-specs { display: grid; gap: 1px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-preview-specs > div { align-items: center; border-bottom: 1px solid #f0f3f8; display: flex; justify-content: space-between; padding: 7px 0; } .admin-preview-specs span { color: #7688a0; font-size: 13px; } .admin-preview-specs strong { color: #13243d; font-size: 13px; text-align: right; } .admin-preview-desc h3 { color: #13243d; font-size: 15px; margin: 6px 0 4px; } .admin-preview-desc p { color: #37475d; font-size: 14px; line-height: 1.55; margin: 0; white-space: pre-line; } .admin-preview-chips { display: flex; flex-wrap: wrap; gap: 6px; } .admin-preview-chips span { background: #f1f6fb; border: 1px solid #e0e8f1; border-radius: 999px; color: #33475f; font-size: 12px; font-weight: 600; padding: 4px 10px; } .admin-preview-contact { background: #f7fafd; border-radius: 10px; color: #47597a; font-size: 13px; line-height: 1.7; padding: 10px 12px; } .admin-preview-actions { border-top: 1px solid #eef2f7; display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px; } @media (max-width: 720px) { .admin-preview-content { grid-template-columns: 1fr; } .admin-report-details-grid { grid-template-columns: 1fr; } } /* ===== Realne ogloszenia na Kupuje/Wynajmuje: karty jak makiety (pion) ===== */ .real-listings-section { margin-bottom: 18px; } .real-listings-heading { align-items: center; display: flex; gap: 10px; margin-bottom: 12px; } .real-listings-heading h3 { color: #13243d; font-size: 16px; margin: 0; } .real-listings-heading span { background: #129357; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 800; padding: 2px 9px; } .real-result-card { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; } .real-result-card:hover { box-shadow: 0 12px 26px rgba(19, 36, 61, 0.12); transform: translateY(-2px); } .real-result-card .result-photo { position: relative; } .real-photo-badges { align-items: flex-start; display: flex; flex-direction: column; gap: 6px; left: 12px; position: absolute; top: 12px; z-index: 2; } .real-photo-badges .green-tag { align-items: center; background: #e8f8ef; border: 1px solid #cfeedd; border-radius: 999px; color: #0f7a48; display: inline-flex; font-size: 12px; font-weight: 800; letter-spacing: 0.01em; line-height: 1; padding: 6px 12px; } .real-result-card .real-favorite-button { align-items: center; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(130, 146, 167, 0.32); border-radius: 50%; color: #607289; display: flex; height: 28px; justify-content: center; line-height: 0; padding: 0; position: absolute; right: 12px; top: 12px; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; width: 28px; z-index: 3; } .real-result-card .real-favorite-button:hover, .real-result-card .real-favorite-button:focus-visible { background: #ffffff; border-color: rgba(95, 116, 141, 0.55); color: #3f536f; transform: translateY(-1px); } .real-result-card .real-favorite-button svg { color: inherit; display: block; height: 14px; stroke: currentColor; stroke-width: 2; width: 14px; } .real-result-card .real-favorite-button.saved { background: #10a15e; border-color: #10a15e; box-shadow: 0 5px 12px rgba(16, 161, 94, 0.3); color: #ffffff; } .real-result-card .real-favorite-button.saved svg { fill: currentColor; stroke: #ffffff; stroke-width: 1.75; } /* ===== Strzalki galerii w widoku szczegolow ===== */ .ld-gallery-arrow { align-items: center; background: rgba(19, 36, 61, 0.62); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28); color: #ffffff; cursor: pointer; display: flex; height: 46px; justify-content: center; line-height: 0; position: absolute; top: 50%; transform: translateY(-50%); transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; width: 46px; z-index: 3; } .ld-gallery-arrow:hover { background: rgba(19, 36, 61, 0.78); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.34); transform: translateY(-50%) scale(1.04); } .ld-gallery-arrow:active { transform: translateY(-50%) scale(0.98); } .ld-gallery-arrow-icon { height: 18px; width: 18px; } .ld-gallery-prev .ld-gallery-arrow-icon { transform: rotate(90deg); } .ld-gallery-next .ld-gallery-arrow-icon { transform: rotate(-90deg); } .ld-gallery-prev { left: 14px; } .ld-gallery-next { right: 14px; } @media (max-width: 900px) { .ld-gallery-arrow { height: 40px; width: 40px; } .ld-gallery-arrow-icon { height: 16px; width: 16px; } } .comparison-page { background: #f6f8fb; min-height: calc(100vh - 82px); padding: 22px 0; } .comparison-layout { display: grid; gap: 18px; grid-template-columns: 300px minmax(0, 1fr); margin: 0 auto; max-width: 1900px; padding: 0 18px; } .comparison-main { display: grid; gap: 14px; min-width: 0; } .comparison-breadcrumb { align-items: center; color: #708099; display: inline-flex; font-size: 12px; font-weight: 800; gap: 6px; } .comparison-breadcrumb button, .comparison-breadcrumb a { background: transparent; border: 0; color: inherit; font: inherit; padding: 0; } .comparison-breadcrumb button.active, .comparison-breadcrumb a.active { color: #152640; } .comparison-head { align-items: start; display: flex; justify-content: space-between; } .comparison-head h1 { color: #14223a; font-size: 34px; font-weight: 950; margin: 0; } .comparison-head p { color: #5c6d82; font-size: 15px; font-weight: 800; margin: 6px 0 0; } .comparison-head-actions { display: inline-flex; gap: 10px; } .comparison-head-actions > button { background: #ffffff; border: 1px solid #ced8e5; border-radius: 10px; color: #1d314f; font-size: 13px; font-weight: 850; min-height: 40px; padding: 0 14px; } .comparison-head-actions > button.ghost { border-color: #d3dee9; } .comparison-head-actions > button:disabled { opacity: 0.45; } .comparison-workspace { align-items: start; display: grid; gap: 14px; grid-template-columns: 330px minmax(0, 1fr); min-width: 0; } .comparison-workspace > * { min-width: 0; } .comparison-summary-column { display: grid; gap: 12px; position: static; } .comparison-controls { background: #ffffff; box-sizing: border-box; border: 1px solid #dbe4ef; border-radius: 12px; display: grid; gap: 10px; min-width: 0; padding: 16px; } .comparison-mode-switch { background: #edf2f8; border-radius: 12px; display: inline-grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; padding: 5px; } .comparison-mode-switch button { background: transparent; border: 0; border-radius: 8px; color: #4a5f79; font-size: 13px; font-weight: 850; min-height: 36px; } .comparison-mode-switch button.active { background: #ffffff; color: #0f9c5b; } .comparison-picker-row { align-items: stretch; display: grid; gap: 8px; grid-template-columns: 1fr; } .comparison-picker-row input, .comparison-picker-row select { background: #ffffff; border: 1px solid #cfd9e6; border-radius: 10px; box-sizing: border-box; color: #183152; font-size: 13px; font-weight: 700; height: 42px; max-width: 100%; min-width: 0; overflow: hidden; padding: 0 12px; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .comparison-picker-row button { background: #0f9c5b; border: 0; border-radius: 10px; color: #ffffff; font-size: 13px; font-weight: 850; height: 42px; } .comparison-picker-row button:disabled { opacity: 0.45; } .comparison-controls small { color: #6b7b91; font-size: 12px; font-weight: 800; } .comparison-controls h3 { color: #1b2f4f; font-size: 18px; font-weight: 900; margin: 4px 0 0; } .comparison-summary-card { background: #ffffff; box-sizing: border-box; border: 1px solid #dbe4ef; border-radius: 12px; min-width: 0; padding: 16px; } .comparison-summary-card h3 { color: #1b2f4f; font-size: 20px; font-weight: 950; line-height: 24px; margin: 0 0 14px; } .comparison-summary-card > div { display: grid; gap: 0; } .comparison-summary-card article { align-items: start; border-bottom: 1px solid #e4ebf2; display: grid; gap: 10px; grid-template-columns: 18px minmax(0, 1fr); min-height: 60px; padding: 14px 0; } .comparison-summary-card article:last-child { border-bottom: 0; } .comparison-summary-card span { align-self: start; color: #3e526d; display: grid; font-size: 14px; place-items: center; } .comparison-summary-card p { margin: 0; } .comparison-summary-card strong { color: #1f3555; display: block; font-size: 13px; font-weight: 900; } .comparison-summary-card small { color: #7a889a; display: block; font-size: 11px; font-weight: 700; } .comparison-content { background: #ffffff; box-sizing: border-box; border: 1px solid #dbe4ef; border-radius: 12px; min-width: 0; overflow-x: auto; padding: 10px; position: relative; } .comparison-cards-row { display: grid; gap: 10px; grid-template-columns: repeat(1, minmax(210px, 1fr)); margin-bottom: 10px; } .comparison-empty-state { border: 1px dashed #cfd9e6; border-radius: 10px; color: #455a74; margin: 0; padding: 32px; text-align: center; } .comparison-empty-state h2 { color: #14223a; font-size: 21px; margin: 0 0 8px; } .comparison-empty-state p { margin: 0; } .comparison-values-grid { display: grid; gap: 0; min-width: 840px; } .comparison-cell { border-bottom: 1px solid #e4ebf2; border-left: 1px solid #edf2f7; color: #20344f; display: grid; gap: 4px; min-height: 60px; padding: 14px 12px; } .comparison-offer-head { background: #ffffff; border: 1px solid #e4ebf2; border-left: 1px solid #e4ebf2; border-radius: 10px; border-left: 1px solid #edf2f7; display: grid; gap: 8px; min-height: 232px; padding: 14px 14px 16px; position: relative; } .comparison-offer-photo { background-color: #e8eef5; background-position: center; background-size: cover; border-radius: 10px; height: 112px; } .comparison-offer-head strong { color: #172a45; font-size: 14px; font-weight: 900; line-height: 1.3; } .comparison-offer-head small { color: #5f7289; font-size: 12px; font-weight: 750; } .comparison-offer-head > button { background: #f1f6ff; border: 1px solid #cfdaea; border-radius: 9px; color: #204067; font-size: 12px; font-weight: 850; justify-self: start; min-height: 34px; padding: 0 10px; } .comparison-offer-head em { color: #0f9c5b; font-size: 22px; font-style: normal; font-weight: 950; } .comparison-add-tile { align-content: center; align-items: center; border: 1px dashed #cfd9e6; border-radius: 10px; cursor: pointer; display: grid; justify-items: center; min-height: 232px; padding: 12px; text-align: center; } .comparison-add-tile span { align-items: center; border: 1px solid #cfe0d4; border-radius: 50%; color: #0f9c5b; display: grid; font-size: 20px; height: 34px; margin-bottom: 8px; place-items: center; width: 34px; } .comparison-add-tile strong { color: #20344f; font-size: 15px; } .comparison-add-tile small { color: #7a889a; font-size: 11px; font-weight: 700; } .comparison-card-empty { background: #f9fbfd; border: 1px solid #e4ebf2; border-radius: 10px; min-height: 232px; } .comparison-remove { align-items: center; background: rgba(20, 34, 58, 0.82) !important; border: 0 !important; border-radius: 50% !important; color: #ffffff !important; display: inline-grid; font-size: 20px !important; height: 28px; justify-items: center; line-height: 1; min-height: 28px !important; padding: 0 !important; position: absolute; right: 10px; top: 10px; width: 28px; } .comparison-cell span { font-size: 13px; font-weight: 850; } .comparison-cell em { color: #0f9c5b; font-size: 10px; font-style: normal; font-weight: 900; text-transform: uppercase; } .comparison-rating { background: #f5fbf7; } .comparison-cell-empty { background: #f9fbfd; } .comparison-rating strong { color: #0f9c5b; font-size: 24px; font-weight: 950; } .comparison-rating small { color: #48667e; font-size: 11px; font-weight: 900; } @media (max-width: 1500px) { .comparison-layout { grid-template-columns: minmax(0, 1fr); } .comparison-workspace { grid-template-columns: minmax(0, 1fr); } .comparison-summary-column { position: static; } } @media (max-width: 900px) { .comparison-layout { padding: 0 10px; } .comparison-head { align-items: start; flex-direction: column; gap: 10px; } .comparison-head-actions { width: 100%; } .comparison-head-actions > button { flex: 1; } .comparison-head h1 { font-size: 27px; } .comparison-cards-row { grid-template-columns: 1fr !important; } } /* ===== Poradnik: Kupno mieszkania ===== */ .guide-article { background: linear-gradient(180deg, #f8fafc 0%, #f3f7fb 100%); min-height: calc(100vh - 82px); padding-bottom: 56px; } .guide-hero { min-height: 340px; overflow: hidden; position: relative; } .guide-hero img { height: 100%; inset: 0; object-fit: cover; object-position: right center; position: absolute; width: 100%; } .guide-hero-shade { background: linear-gradient(180deg, rgba(248, 250, 252, 0) 72%, #f8fafc 100%), linear-gradient(90deg, #f8fafc 0%, rgba(248, 250, 252, 0.97) 40%, rgba(248, 250, 252, 0.6) 62%, rgba(248, 250, 252, 0.06) 96%); inset: 0; position: absolute; } .guide-hero-inner { min-height: 340px; padding: 30px 48px 46px; position: relative; z-index: 1; } .guide-back { align-items: center; background: rgba(255, 255, 255, 0.72); border: 1px solid #dce4ec; border-radius: 999px; color: #14223a; cursor: pointer; display: inline-flex; font-size: 12px; font-weight: 850; gap: 6px; padding: 7px 14px 7px 10px; } .guide-back svg { height: 15px; transform: rotate(180deg); width: 15px; } .guide-hero-badge { align-items: center; background: #0b9f5c; border-radius: 999px; color: #ffffff; display: inline-flex; font-size: 12px; font-weight: 900; gap: 7px; margin-top: 20px; padding: 7px 14px; } .guide-hero-badge svg { height: 15px; width: 15px; } .guide-hero h1 { color: #14223a; font-size: clamp(38px, 3.8vw, 60px); line-height: 1.02; margin: 16px 0 0; max-width: 720px; } .guide-hero-lead { color: #4a5766; font-size: 17px; font-weight: 650; line-height: 1.5; margin: 16px 0 0; max-width: 680px; } .guide-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .guide-hero-chips span { align-items: center; background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; color: #33465c; display: inline-flex; font-size: 12px; font-weight: 800; gap: 7px; padding: 8px 12px; } .guide-hero-chips svg { color: #0b9f5c; height: 15px; width: 15px; } .guide-article-layout { align-items: start; display: grid; gap: 28px; grid-template-columns: 232px minmax(0, 1fr) 312px; margin-top: 26px; } /* Spis treści */ .guide-toc { position: sticky; top: 20px; } .guide-toc-inner { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 18px 16px; } .guide-toc-inner h2 { color: #14223a; font-size: 15px; margin: 0 0 12px; } .guide-toc-inner ol { counter-reset: none; display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; } .guide-toc-inner li button { align-items: center; background: transparent; border: 0; border-radius: 6px; color: #46586c; cursor: pointer; display: flex; font-size: 13px; font-weight: 700; gap: 10px; padding: 7px 8px; text-align: left; width: 100%; } .guide-toc-inner li button span { align-items: center; background: #eef3f8; border-radius: 6px; color: #0b9f5c; display: grid; flex-shrink: 0; font-size: 11px; font-weight: 900; height: 22px; place-items: center; width: 22px; } .guide-toc-inner li button:hover { background: #f2f7fb; color: #14223a; } /* Blok główny */ .guide-body { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .guide-block-head h2 { color: #14223a; font-size: 22px; margin: 0; } .guide-block-head p { color: #607085; font-size: 14px; font-weight: 650; margin: 6px 0 0; } /* Proces 12 kroków */ .guide-process { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; padding: 22px; } .guide-process-grid { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 18px; } .guide-process-card { background: #f8fafc; border: 1px solid #e6edf3; border-radius: 8px; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; position: relative; } .guide-process-num { align-items: center; background: #0b9f5c; border-radius: 6px; color: #ffffff; display: grid; font-size: 12px; font-weight: 900; height: 24px; place-items: center; width: 24px; } .guide-process-icon { color: #13a360; } .guide-process-icon svg { height: 22px; width: 22px; } .guide-process-card strong { color: #14223a; font-size: 13px; font-weight: 900; line-height: 1.25; } .guide-process-card small { color: #64748b; font-size: 11px; font-weight: 650; line-height: 1.35; } /* Rozdziały */ .guide-chapter { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; padding: 26px 28px; position: relative; scroll-margin-top: 20px; } .guide-chapter-index { color: #d7e6dc; font-size: 40px; font-weight: 950; letter-spacing: -1px; line-height: 1; } .guide-chapter h2 { color: #14223a; font-size: 24px; margin: 8px 0 14px; } .guide-chapter p { color: #3f4d5e; font-size: 15px; font-weight: 550; line-height: 1.62; margin: 0 0 14px; } .guide-chapter p:last-child { margin-bottom: 0; } .guide-list { color: #3f4d5e; display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 4px 0 14px; padding: 0; } .guide-list li { font-size: 15px; font-weight: 550; line-height: 1.5; padding-left: 22px; position: relative; } .guide-list li::before { background: #0b9f5c; border-radius: 50%; content: ""; height: 7px; left: 4px; position: absolute; top: 9px; width: 7px; } .guide-list li strong { color: #14223a; } /* Callouty */ .guide-callout { border-radius: 8px; display: grid; gap: 12px; grid-template-columns: 24px minmax(0, 1fr); margin-top: 6px; padding: 16px 18px; } .guide-callout svg { height: 22px; margin-top: 2px; width: 22px; } .guide-callout strong { display: block; font-size: 14px; font-weight: 900; margin-bottom: 4px; } .guide-callout p { font-size: 14px !important; margin: 0 !important; } .guide-callout-tip { background: #edf8f1; border: 1px solid #c6e8d4; } .guide-callout-tip svg, .guide-callout-tip strong { color: #0b7a47; } .guide-callout-warn { background: #fef6ec; border: 1px solid #f6dcb6; } .guide-callout-warn svg, .guide-callout-warn strong { color: #b9791b; } .guide-callout-info { background: #eef4fd; border: 1px solid #cfe0f7; } .guide-callout-info svg, .guide-callout-info strong { color: #2c62c6; } .guide-callout p, .guide-callout-tip p, .guide-callout-warn p, .guide-callout-info p { color: #3f4d5e; } /* Tabela kosztów */ .guide-table-wrap { border: 1px solid #e2e9f0; border-radius: 8px; margin: 4px 0 16px; overflow-x: auto; } .guide-table { border-collapse: collapse; min-width: 560px; width: 100%; } .guide-table th { background: #f4f8fb; border-bottom: 1px solid #e2e9f0; color: #52627a; font-size: 11px; font-weight: 900; letter-spacing: 0.03em; padding: 11px 14px; text-align: left; text-transform: uppercase; } .guide-table td { border-bottom: 1px solid #eef2f6; color: #3f4d5e; font-size: 13px; font-weight: 600; padding: 12px 14px; vertical-align: top; } .guide-table tr:last-child td { border-bottom: 0; } .guide-table td strong { color: #14223a; } /* Dwie kolumny (za/przeciw, rynki) */ .guide-two-col { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-top: 4px; } .guide-pro, .guide-con, .guide-market { border: 1px solid #e2e9f0; border-radius: 8px; padding: 16px 18px; } .guide-pro { background: #edf8f1; border-color: #c6e8d4; } .guide-con { background: #fbfdff; } .guide-market { background: #f8fafc; } .guide-pro h4, .guide-con h4, .guide-market h4 { align-items: center; color: #14223a; display: flex; font-size: 15px; gap: 8px; margin: 0 0 12px; } .guide-pro h4 svg, .guide-market h4 svg { color: #0b9f5c; height: 17px; width: 17px; } .guide-con h4 svg { color: #2c62c6; height: 17px; width: 17px; } .guide-pro ul, .guide-con ul, .guide-market ul { color: #3f4d5e; display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; } .guide-pro li, .guide-con li, .guide-market li { font-size: 13px; font-weight: 600; line-height: 1.45; padding-left: 18px; position: relative; } .guide-pro li::before, .guide-con li::before, .guide-market li::before { color: #0b9f5c; content: "›"; font-weight: 900; left: 3px; position: absolute; top: 0; } /* Checklista */ .guide-checklist { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; padding: 24px 26px; scroll-margin-top: 20px; } .guide-checklist-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 16px 0 18px; } .guide-checklist-item { align-items: flex-start; background: #f8fafc; border: 1px solid #e6edf3; border-radius: 8px; color: #33465c; cursor: pointer; display: flex; font-size: 13px; font-weight: 650; gap: 10px; line-height: 1.4; padding: 12px 14px; } .guide-checklist-item input { display: none; } .guide-check-box { align-items: center; background: #ffffff; border: 1.5px solid #cdd7e1; border-radius: 5px; color: transparent; display: grid; flex-shrink: 0; height: 20px; place-items: center; width: 20px; } .guide-check-box svg { height: 13px; width: 13px; } .guide-checklist-item input:checked ~ .guide-check-box { background: #0b9f5c; border-color: #0b9f5c; color: #ffffff; } .guide-checklist-item input:checked ~ span:last-child { color: #8a97a6; text-decoration: line-through; } .guide-download-btn, .guide-cta button { align-items: center; background: #0b9f5c; border: 0; border-radius: 8px; color: #ffffff; cursor: pointer; display: inline-flex; font-size: 14px; font-weight: 900; gap: 8px; padding: 12px 20px; } .guide-download-btn svg { height: 17px; width: 17px; } .guide-download-btn:hover, .guide-cta button:hover { background: #0a8b50; } /* Najczęstsze błędy */ .guide-mistakes { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 4px; } .guide-mistake { background: #fef6ec; border: 1px solid #f6dcb6; border-radius: 8px; display: grid; gap: 12px; grid-template-columns: 34px minmax(0, 1fr); padding: 14px 16px; } .guide-mistake-icon { align-items: center; background: #fbe4c4; border-radius: 8px; color: #b9791b; display: grid; height: 34px; place-items: center; width: 34px; } .guide-mistake-icon svg { height: 18px; width: 18px; } .guide-mistake strong { color: #14223a; display: block; font-size: 14px; font-weight: 900; margin-bottom: 4px; } .guide-mistake p { color: #4a5766 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.45 !important; margin: 0 !important; } /* FAQ */ .guide-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .guide-faq-item { background: #f8fafc; border: 1px solid #e6edf3; border-radius: 8px; padding: 0 16px; } .guide-faq-item summary { align-items: center; color: #14223a; cursor: pointer; display: flex; font-size: 15px; font-weight: 850; gap: 12px; justify-content: space-between; list-style: none; padding: 15px 0; } .guide-faq-item summary::-webkit-details-marker { display: none; } .guide-faq-item summary svg { color: #0b9f5c; flex-shrink: 0; height: 18px; transition: transform 0.2s ease; width: 18px; } .guide-faq-item[open] summary svg { transform: rotate(180deg); } .guide-faq-item p { color: #4a5766 !important; font-size: 14px !important; font-weight: 550 !important; line-height: 1.6 !important; margin: 0 !important; padding: 0 0 16px !important; } /* Podsumowanie + CTA */ .guide-summary { background: #f5faf7; border-color: #cfe9da; } .guide-summary-note { align-items: flex-start; background: #ffffff; border: 1px solid #e2e9f0; border-radius: 8px; display: grid; gap: 10px; grid-template-columns: 20px minmax(0, 1fr); margin-top: 8px; padding: 14px 16px; } .guide-summary-note svg { color: #8793a3; height: 18px; width: 18px; } .guide-summary-note p { color: #64748b !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.5 !important; margin: 0 !important; } .guide-cta { align-items: center; background: linear-gradient(120deg, #0b9f5c 0%, #0c7f4c 100%); border-radius: 10px; color: #ffffff; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; padding: 26px 30px; } .guide-cta h2 { color: #ffffff; font-size: 22px; margin: 0; } .guide-cta p { color: rgba(255, 255, 255, 0.9); font-size: 14px; font-weight: 650; margin: 6px 0 0; } .guide-cta button { background: #ffffff; color: #0b7a47; } .guide-cta button:hover { background: #f0f5f2; } .guide-cta button svg { height: 16px; width: 16px; } /* Prawy sidebar */ .guide-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; } .guide-aside-card { background: #ffffff; border: 1px solid #dce4ec; border-radius: 8px; padding: 18px; } .guide-aside-card h3 { align-items: center; color: #14223a; display: flex; font-size: 15px; gap: 8px; margin: 0 0 14px; } .guide-aside-card h3 svg { color: #0b9f5c; height: 17px; width: 17px; } .guide-aside-list, .guide-aside-downloads { display: flex; flex-direction: column; gap: 8px; } .guide-aside-list button, .guide-aside-downloads button { align-items: center; background: #f8fafc; border: 1px solid #e6edf3; border-radius: 8px; color: #14223a; cursor: pointer; display: flex; gap: 10px; padding: 11px 12px; text-align: left; width: 100%; } .guide-aside-list button:hover, .guide-aside-downloads button:hover { background: #eef4f9; border-color: #d3e0ea; } .guide-aside-list button > span, .guide-aside-downloads button > span { display: flex; flex-direction: column; flex: 1; gap: 2px; min-width: 0; } .guide-aside-list strong, .guide-aside-downloads strong { font-size: 13px; font-weight: 850; } .guide-aside-list small, .guide-aside-downloads small { color: #64748b; font-size: 11px; font-weight: 650; } .guide-aside-list button > svg { color: #9aa5b4; flex-shrink: 0; height: 16px; transform: rotate(-90deg); width: 16px; } .guide-aside-downloads button > svg:first-child { color: #0b9f5c; flex-shrink: 0; height: 20px; width: 20px; } .guide-aside-downloads button > svg:last-child { color: #9aa5b4; flex-shrink: 0; height: 16px; width: 16px; } .guide-aside-mistakes ul { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; } .guide-aside-mistakes li { align-items: center; color: #46586c; display: flex; font-size: 13px; font-weight: 700; gap: 9px; line-height: 1.35; } .guide-aside-mistakes li svg { color: #d99a3a; flex-shrink: 0; height: 15px; width: 15px; } @media (max-width: 1200px) { .guide-article-layout { grid-template-columns: minmax(0, 1fr) 300px; } .guide-toc { display: none; } .guide-process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { .guide-hero-inner { padding: 24px 20px 34px; } .guide-article-layout { grid-template-columns: minmax(0, 1fr); padding: 0 20px; } .guide-aside { position: static; } .guide-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .guide-two-col, .guide-checklist-grid, .guide-mistakes { grid-template-columns: 1fr; } } @media (max-width: 560px) { .guide-chapter { padding: 20px 18px; } .guide-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-cta { flex-direction: column; align-items: flex-start; } } /* ---- Kalkulator zdolności kredytowej ---- */ .credit-page { background: #f4f7fb; padding: 34px 20px 70px; } .credit-shell { margin: 0 auto; max-width: 1240px; } .credit-breadcrumb { margin-bottom: 18px; } .credit-title { align-items: center; display: flex; gap: 18px; margin-bottom: 26px; } .credit-title-icon { align-items: center; background: #e6f6ee; border-radius: 14px; color: #0b9f5c; display: flex; flex: 0 0 auto; font-size: 26px; height: 56px; justify-content: center; width: 56px; } .credit-title h1 { color: #14223a; font-size: 30px; font-weight: 950; margin: 0 0 6px; } .credit-title p { color: #526171; font-size: 14px; font-weight: 700; line-height: 1.55; margin: 0; max-width: 780px; } .credit-layout { align-items: start; display: grid; gap: 22px; grid-template-columns: minmax(320px, 430px) minmax(0, 1fr); } .credit-form-column, .credit-result-column { display: grid; gap: 18px; min-width: 0; } .credit-card { background: #ffffff; border: 1px solid #dfe7ef; border-radius: 12px; box-shadow: 0 12px 32px rgba(24, 35, 57, 0.05); padding: 22px 22px 20px; } .credit-card h2 { align-items: center; color: #14223a; display: flex; font-size: 16px; font-weight: 950; gap: 12px; margin: 0 0 18px; } .credit-step-badge { align-items: center; background: #0b9f5c; border-radius: 50%; color: #ffffff; display: inline-flex; font-size: 13px; font-weight: 950; height: 26px; justify-content: center; width: 26px; } .credit-grid { display: grid; gap: 16px; } .credit-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .credit-field { display: grid; gap: 8px; min-width: 0; } .credit-field-wide { grid-column: 1 / -1; } .credit-field > span { color: #27364d; font-size: 13px; font-weight: 900; } .credit-field small { color: #7a8798; font-size: 11.5px; font-weight: 800; } .credit-field input, .credit-field select { background: #ffffff; border: 1px solid #d5dee8; border-radius: 8px; color: #14223a; font-size: 14px; font-weight: 800; min-height: 48px; padding: 0 13px; width: 100%; } .credit-field input:focus, .credit-field select:focus { border-color: #0b9f5c; box-shadow: 0 0 0 3px rgba(11, 159, 92, 0.14); outline: none; } .credit-input-suffix { align-items: center; background: #ffffff; border: 1px solid #d5dee8; border-radius: 8px; display: flex; min-height: 48px; overflow: hidden; padding-right: 12px; } .credit-input-suffix:focus-within { border-color: #0b9f5c; box-shadow: 0 0 0 3px rgba(11, 159, 92, 0.14); } .credit-input-suffix input { border: none; box-shadow: none; min-height: 46px; } .credit-input-suffix input:focus { border: none; box-shadow: none; } .credit-input-suffix em { color: #7a8798; font-size: 13px; font-style: normal; font-weight: 900; } .credit-stepper { align-items: center; border: 1px solid #d5dee8; border-radius: 8px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; min-height: 48px; overflow: hidden; } .credit-stepper button { background: #f4f7fb; border: none; color: #0b9f5c; font-size: 22px; font-weight: 900; height: 100%; } .credit-stepper button:hover { background: #e6f6ee; } .credit-stepper strong { color: #14223a; font-size: 16px; font-weight: 950; text-align: center; } .credit-segmented { background: #eef2f7; border-radius: 8px; display: grid; gap: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; } .credit-segmented button { background: transparent; border: none; border-radius: 6px; color: #526171; font-size: 13px; font-weight: 900; padding: 11px 8px; } .credit-segmented button.active { background: #ffffff; box-shadow: 0 2px 8px rgba(24, 35, 57, 0.12); color: #0b9f5c; } .credit-range-value { color: #0b9f5c; font-weight: 950; } .credit-range { -webkit-appearance: none; appearance: none; background: linear-gradient(#d5dee8, #d5dee8) no-repeat; background-size: 100% 6px; background-position: 0 center; border-radius: 6px; height: 24px; width: 100%; } .credit-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background: #0b9f5c; border: 3px solid #ffffff; border-radius: 50%; box-shadow: 0 2px 8px rgba(11, 159, 92, 0.4); height: 22px; width: 22px; } .credit-range::-moz-range-thumb { background: #0b9f5c; border: 3px solid #ffffff; border-radius: 50%; height: 22px; width: 22px; } .credit-range-scale { color: #97a3b2; display: flex; font-size: 11px; font-weight: 800; justify-content: space-between; } .credit-actions { display: flex; flex-wrap: wrap; gap: 12px; } .credit-btn-primary, .credit-btn-ghost { align-items: center; border-radius: 10px; display: inline-flex; font-size: 14px; font-weight: 900; gap: 9px; justify-content: center; min-height: 50px; padding: 0 22px; } .credit-btn-primary { background: #0b9f5c; border: none; color: #ffffff; flex: 1 1 auto; } .credit-btn-primary:hover { background: #0a8b50; } .credit-btn-ghost { background: #ffffff; border: 1px solid #d5dee8; color: #27364d; } .credit-btn-ghost:hover { border-color: #b7c2cf; } /* Wynik */ .credit-result-hero { border-radius: 14px; color: #ffffff; overflow: hidden; padding: 26px 28px 24px; position: relative; } .credit-tone-verysafe, .credit-tone-safe { background: linear-gradient(135deg, #0b9f5c, #0a8b50); } .credit-tone-moderate { background: linear-gradient(135deg, #d98a13, #c2790a); } .credit-tone-high { background: linear-gradient(135deg, #e0592f, #c8461f); } .credit-tone-none, .credit-tone-empty { background: linear-gradient(135deg, #4a5a70, #35435a); } .credit-result-hero.pulse { animation: creditPulse 0.9s ease; } @keyframes creditPulse { 0% { transform: scale(1); } 40% { transform: scale(1.014); } 100% { transform: scale(1); } } .credit-hero-top { align-items: center; display: flex; gap: 12px; justify-content: space-between; } .credit-hero-top > span:first-child { font-size: 14px; font-weight: 850; opacity: 0.92; } .credit-badge { background: rgba(255, 255, 255, 0.22); border-radius: 999px; font-size: 12px; font-weight: 900; padding: 6px 12px; white-space: nowrap; } .credit-result-hero strong { display: block; font-size: 44px; font-weight: 950; letter-spacing: -0.5px; line-height: 1; margin: 18px 0 12px; } .credit-stars { display: flex; gap: 3px; } .credit-stars span { color: rgba(255, 255, 255, 0.4); font-size: 17px; } .credit-stars span.on { color: #ffd873; } .credit-stars span svg { fill: currentColor; stroke: none; } .credit-result-hero p { font-size: 13px; font-weight: 750; line-height: 1.5; margin: 14px 0 0; opacity: 0.94; } .credit-tiles { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .credit-tile { background: #ffffff; border: 1px solid #dfe7ef; border-radius: 12px; box-shadow: 0 12px 32px rgba(24, 35, 57, 0.05); display: grid; gap: 6px; padding: 16px 16px 15px; } .credit-tile small { color: #7a8798; font-size: 12px; font-weight: 850; } .credit-tile strong { color: #14223a; font-size: 20px; font-weight: 950; } .credit-tile em { color: #0b9f5c; font-size: 11.5px; font-style: normal; font-weight: 850; } .credit-details-head { align-items: center; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 250px; margin-bottom: 18px; } .credit-details h3 { color: #14223a; font-size: 16px; font-weight: 950; margin: 0; } .credit-donut-wrap { align-items: center; display: grid; gap: 6px; justify-items: center; } .credit-donut { height: 128px; width: 128px; } .credit-donut circle { fill: none; stroke-width: 13; } .credit-donut-track { stroke: #eef2f7; } .credit-donut-you { stroke: #0b9f5c; stroke-linecap: round; } .credit-donut-partner { stroke: #3f8bff; stroke-linecap: round; } .credit-donut-value { dominant-baseline: middle; fill: #14223a; font-size: 20px; font-weight: 900; stroke: none; text-anchor: middle; } .credit-donut-label { dominant-baseline: middle; fill: #7a8798; font-size: 10px; font-weight: 800; stroke: none; text-anchor: middle; } .credit-donut-legend { display: grid; gap: 6px; list-style: none; margin: 4px 0 0; padding: 0; width: 100%; } .credit-donut-legend li { align-items: center; color: #526171; display: flex; font-size: 12px; font-weight: 800; gap: 7px; } .credit-donut-legend b { color: #14223a; margin-left: auto; } .credit-donut-legend i { border-radius: 3px; flex: 0 0 auto; height: 11px; width: 11px; } .credit-dot-you { background: #0b9f5c; } .credit-dot-partner { background: #3f8bff; } .credit-detail-rows { display: grid; gap: 0; margin: 0; } .credit-detail-row { align-items: center; border-top: 1px solid #eef2f7; display: flex; gap: 12px; justify-content: space-between; padding: 11px 0; } .credit-detail-row dt { color: #526171; font-size: 13px; font-weight: 750; } .credit-detail-row dd { color: #14223a; font-size: 14px; font-weight: 950; margin: 0; text-align: right; } .credit-detail-positive dd { color: #0b9f5c; } .credit-detail-negative dd { color: #d64545; } .credit-cta-band { align-items: center; background: linear-gradient(135deg, #e6f6ee, #f0f9f4); border: 1px solid #bfe6d2; border-radius: 12px; display: flex; gap: 16px; justify-content: space-between; padding: 20px 22px; } .credit-cta-band strong { color: #14223a; display: block; font-size: 15px; font-weight: 950; } .credit-cta-band span { color: #4b6a58; display: block; font-size: 13px; font-weight: 750; margin-top: 4px; } .credit-cta-band button { align-items: center; background: #0b9f5c; border: none; border-radius: 10px; color: #ffffff; display: inline-flex; flex: 0 0 auto; font-size: 14px; font-weight: 900; gap: 8px; min-height: 48px; padding: 0 20px; } .credit-cta-band button:hover:not(:disabled) { background: #0a8b50; } .credit-cta-band button:disabled { background: #b7c2cf; cursor: not-allowed; } .credit-recos h3 { align-items: center; color: #14223a; display: flex; font-size: 16px; font-weight: 950; gap: 9px; margin: 0 0 16px; } .credit-reco-list { display: grid; gap: 10px; } .credit-reco { align-items: center; background: #f8fafc; border: 1px solid #e7edf3; border-radius: 10px; display: flex; gap: 13px; padding: 13px 15px; } .credit-reco-icon { align-items: center; background: #e6f6ee; border-radius: 9px; color: #0b9f5c; display: flex; flex: 0 0 auto; font-size: 17px; height: 40px; justify-content: center; width: 40px; } .credit-reco-body { display: grid; gap: 3px; min-width: 0; } .credit-reco-body strong { color: #14223a; font-size: 13.5px; font-weight: 900; } .credit-reco-body small { color: #7a8798; font-size: 12px; font-weight: 700; line-height: 1.4; } .credit-reco-delta { color: #0b9f5c; flex: 0 0 auto; font-size: 14px; font-weight: 950; margin-left: auto; white-space: nowrap; } .credit-disclaimer { align-items: flex-start; color: #7a8798; display: flex; font-size: 12px; font-weight: 700; gap: 9px; line-height: 1.55; margin: 4px 0 0; } .credit-disclaimer svg { color: #0b9f5c; flex: 0 0 auto; font-size: 16px; margin-top: 1px; } @media (max-width: 1080px) { .credit-layout { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .credit-grid-2 { grid-template-columns: minmax(0, 1fr); } .credit-tiles { grid-template-columns: minmax(0, 1fr); } .credit-details-head { grid-template-columns: minmax(0, 1fr); } .credit-cta-band { align-items: flex-start; flex-direction: column; } .credit-title h1 { font-size: 24px; } .credit-result-hero strong { font-size: 36px; } } /* Prawdziwe ogloszenie z serwisu w liscie "Moje oferty" */ .listing-photo.clickable { cursor: pointer; } .listing-status em.listing-live-tag { background: #e6f6ee; border-radius: 999px; color: #0b9f5c; font-size: 10.5px; font-style: normal; font-weight: 900; letter-spacing: 0.02em; padding: 2px 8px; text-transform: uppercase; } /* Kalkulator osadzony w panelu konta (z paskiem bocznym) */ .credit-account-main { min-width: 0; } .credit-account-main .credit-title { margin-top: 0; } @media (max-width: 1280px) { .credit-account-main .credit-layout { grid-template-columns: minmax(0, 1fr); } } /* Powiadomienia - klikalnosc (logika, bez zmiany wygladu) */ .notification-row, .notification-popover-item[role="button"] { cursor: pointer; } .notification-popover-empty { color: #7a8798; font-size: 13px; font-weight: 700; margin: 0; padding: 18px 4px; text-align: center; } /* ===================== Panel admina: moduł marketingowy (Leady / Kampanie / Konfiguracja) ===================== */ .mkt-wrap { display: grid; gap: 18px; } .mkt-subnav { display: flex; gap: 8px; flex-wrap: wrap; } .mkt-subnav button { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #d8e3ef; border-radius: 9px; color: #304760; cursor: pointer; font-weight: 800; font-size: 13px; padding: 8px 14px; } .mkt-subnav button.active { background: #0f2f5b; border-color: #0f2f5b; color: #fff; } .mkt-subnav button svg { width: 15px; height: 15px; } .mkt-card { display: grid; gap: 14px; } .mkt-count, .mkt-badge, .mkt-chip { font-size: 12px; font-weight: 800; color: #304760; background: #eef3f9; border-radius: 999px; padding: 3px 10px; } .mkt-badge { background: #e4f0ff; color: #1256a0; } .mkt-chip { background: #f1f4f8; padding: 2px 8px; } .mkt-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .mkt-search { position: relative; flex: 1 1 260px; display: flex; align-items: center; } .mkt-search svg { position: absolute; left: 10px; width: 15px; height: 15px; color: #8aa0b6; } .mkt-search input { width: 100%; padding-left: 32px; } .mkt-toolbar select, .mkt-toolbar input { padding: 9px 11px; border: 1px solid #d8e3ef; border-radius: 8px; font-size: 13px; } .mkt-addrow { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 8px; align-items: center; } .mkt-addrow input { padding: 9px 11px; border: 1px solid #d8e3ef; border-radius: 8px; font-size: 13px; } @media (max-width: 900px) { .mkt-addrow { grid-template-columns: 1fr 1fr; } } .mkt-table-scroll { overflow-x: auto; } .mkt-table { width: 100%; border-collapse: collapse; font-size: 13px; } .mkt-table th { text-align: left; color: #6b7f96; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid #e6edf4; } .mkt-table td { padding: 10px; border-bottom: 1px solid #f0f4f8; color: #24374d; vertical-align: middle; } .mkt-contact { display: grid; } .mkt-muted { color: #8195a9; font-weight: 600; } .mkt-consents { display: flex; gap: 6px; } .mkt-dot { font-size: 10px; font-weight: 800; border-radius: 6px; padding: 2px 6px; } .mkt-dot.on { background: #dff5e8; color: #12784a; } .mkt-dot.off { background: #f3e2e2; color: #a53b31; } .mkt-actions { display: flex; gap: 6px; justify-content: flex-end; } .mkt-actions button, .mkt-icon-btn { background: #fff; border: 1px solid #d8e3ef; border-radius: 7px; cursor: pointer; color: #46617d; padding: 5px 7px; display: inline-flex; align-items: center; } .mkt-actions button svg, .mkt-icon-btn svg { width: 15px; height: 15px; } .mkt-actions button:disabled, .mkt-icon-btn:disabled { opacity: .5; cursor: default; } .mkt-import { border-top: 1px solid #eef2f6; padding-top: 14px; display: grid; gap: 8px; } .mkt-import h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; color: #24374d; } .mkt-import h3 svg { width: 16px; height: 16px; } .mkt-import textarea, .mkt-form textarea { width: 100%; border: 1px solid #d8e3ef; border-radius: 8px; padding: 10px; font-size: 13px; font-family: inherit; resize: vertical; } .mkt-import-actions { display: flex; gap: 8px; flex-wrap: wrap; } .mkt-import-actions input { flex: 1 1 220px; padding: 9px 11px; border: 1px solid #d8e3ef; border-radius: 8px; } .mkt-grid-2 { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 18px; align-items: start; } @media (max-width: 1000px) { .mkt-grid-2 { grid-template-columns: 1fr; } } .mkt-form { display: grid; gap: 12px; } .mkt-form label { display: grid; gap: 5px; font-size: 12px; font-weight: 800; color: #46617d; } .mkt-form input, .mkt-form select { padding: 9px 11px; border: 1px solid #d8e3ef; border-radius: 8px; font-size: 13px; font-weight: 500; } .mkt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mkt-fieldset { border: 1px solid #e6edf4; border-radius: 8px; padding: 10px 12px; } .mkt-fieldset legend { font-size: 11px; font-weight: 800; color: #6b7f96; padding: 0 6px; } .mkt-checks { display: flex; gap: 12px; flex-wrap: wrap; } .mkt-checks-col { flex-direction: column; gap: 8px; } .mkt-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #33475c; } .mkt-check input { width: auto; } .mkt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .mkt-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #e9eff5; border-radius: 10px; padding: 12px 14px; } .mkt-list li strong { color: #17293c; } .mkt-group-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; align-items: center; } .mkt-campaign { align-items: flex-start; } .mkt-campaign-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } .mkt-status { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 9px; margin-left: 8px; } .mkt-status-draft { background: #eef2f6; color: #5b6b7d; } .mkt-status-scheduled { background: #e4f0ff; color: #1256a0; } .mkt-status-sending { background: #fff2d8; color: #a9720c; } .mkt-status-paused { background: #f3e9df; color: #8a5a1f; } .mkt-status-completed { background: #dff5e8; color: #12784a; } .mkt-status-cancelled { background: #f3e2e2; color: #a53b31; } .mkt-stats { margin-top: 8px; font-size: 12px; color: #46617d; background: #f6f9fc; border-radius: 8px; padding: 8px 10px; } .mkt-config { max-width: 960px; } .mkt-config-head { display: flex; align-items: center; gap: 10px; } .mkt-config-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: #eef3fb; color: #1256a0; } .mkt-config-icon svg { width: 18px; height: 18px; } .mkt-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } @media (max-width: 760px) { .mkt-config-grid { grid-template-columns: 1fr; } .mkt-form-row { grid-template-columns: 1fr; } } .mkt-config-grid label { display: grid; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #6b7f96; } .mkt-config-grid input, .mkt-config-grid select { padding: 10px 12px; border: 1px solid #d8e3ef; border-radius: 8px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: normal; color: #17293c; } .mkt-badge-set { display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: normal; font-size: 11px; font-weight: 800; color: #1256a0; background: #e4f0ff; border-radius: 999px; padding: 2px 8px; } .mkt-badge-set svg { width: 12px; height: 12px; } .mkt-config-save { display: flex; justify-content: flex-end; } .mkt-test { border-top: 1px solid #eef2f6; padding-top: 14px; display: grid; gap: 8px; } .mkt-test h3 { margin: 0; font-size: 14px; color: #24374d; } .mkt-test-row { display: flex; gap: 10px; flex-wrap: wrap; } .mkt-test-row input { flex: 1 1 240px; padding: 10px 12px; border: 1px solid #d8e3ef; border-radius: 8px; } .mkt-test-row .admin-btn { display: inline-flex; align-items: center; gap: 6px; } .mkt-test-row .admin-btn svg { width: 14px; height: 14px; } .mkt-error { color: #b3261e; font-size: 13px; font-weight: 600; margin: 0; } .mkt-ok { color: #12784a; font-size: 13px; font-weight: 600; margin: 0; } /* Routing: stan wczytywania profilu przy wejsciu na trase chroniona */ .route-loading { padding: 80px 24px; text-align: center; color: #5b6472; font-size: 15px; font-weight: 600; } /* Routing: NavLink/Link renderuja - zerujemy domyslne style linku, zeby menu wygladalo dokladnie tak jak wczesniejsze