/* Padding lives on this wrapper, not on directly - real bug found and fixed: padding directly on body also pushed the navbar (a normal child of body, not full-bleed) in from both edges, showing as "white bars on the sides" of what should be an edge-to-edge navy header, worst on mobile where the padding ate a larger share of the screen. */ .search-page { padding: 0 16px 32px; max-width: 100%; box-sizing: border-box; } header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; } header a { color: #1c3f57; text-decoration: none; } .header-sub { margin: 4px 0 0; font-size: 13px; color: #8a94a3; } .header-sub a { font-weight: 600; } /* Same "floating card with named zones" redesign as explore.css (direct feedback: "I don't really like the filters") - kept in sync deliberately so Explore and Search read as the same product, not two different filter bars. This file doesn't load seo.css's shared :root vars, so the same palette is repeated here as literal hex rather than var(...). */ form.filters { margin-bottom: 16px; background: #fff; border: 1px solid #f0f2f5; border-radius: 10px; box-shadow: 0 4px 14px rgba(16,24,40,.08); } .filters-grid { display: grid; grid-template-columns: 1.3fr 1.3fr 1.6fr 1fr; align-items: stretch; padding: 4px 4px 16px; } .filter-group { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; min-width: 0; border-right: 1px solid #f0f2f5; } .filter-group:last-of-type { border-right: none; } .filter-group-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #9c7020; text-transform: uppercase; letter-spacing: .05em; } .filter-group-label svg { flex: none; opacity: .85; } .filter-group-fields { display: flex; flex-wrap: wrap; align-items: start; gap: 10px 12px; } .filter-group-fields .field { flex: 1 1 110px; min-width: 0; } .filter-group-fields .field select, .filter-group-fields .field input:not([type="checkbox"]) { width: 100%; } .filter-group-fields .field-street, .filter-group-fields .field-kind { flex-basis: 100%; } .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .filters-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 20px 4px; margin-top: 4px; border-top: 1px solid #f0f2f5; } .filters label { font-size: 10.5px; font-weight: 600; color: #8a94a3; text-transform: uppercase; letter-spacing: .04em; } .filters input, .filters select { padding: 8px 11px; font-size: 13.5px; border: 1px solid #e6e9ee; border-radius: 20px; background: #f6f7f9; color: #222; transition: border-color .12s, background .12s, box-shadow .12s; min-width: 0; } .filters input:hover, .filters select:hover { border-color: #c7cedb; } .filters input:focus, .filters select:focus { outline: none; border-color: #1c3f57; background: #fff; box-shadow: 0 0 0 3px #eaf1f5; } .field-range .range-inputs { display: flex; align-items: center; gap: 4px; border: 1px solid #e6e9ee; border-radius: 20px; background: #f6f7f9; padding: 0 10px; transition: border-color .12s, box-shadow .12s; } .field-range .range-inputs:hover { border-color: #c7cedb; } .field-range .range-inputs:focus-within { border-color: #1c3f57; box-shadow: 0 0 0 3px #eaf1f5; } .field-range .range-inputs input { border: none; background: none; padding: 8px 2px; width: 5.5em; text-align: center; } .field-range .range-inputs.narrow input { width: 3em; } .field-range .range-inputs input:focus { outline: none; box-shadow: none; } .field-range .range-inputs span { color: #8a94a3; font-size: 12px; } .btn-search { padding: 10px 28px; background: linear-gradient(135deg, #e0ac4a, #9c7020); color: #1a1204; border: none; border-radius: 20px; box-shadow: 0 3px 10px rgba(200,146,46,.35); cursor: pointer; font-size: 13.5px; font-weight: 700; transition: filter .12s, transform .12s, box-shadow .12s; white-space: nowrap; } .btn-search:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(200,146,46,.45); } .reset-link { font-size: 12.5px; color: #8a94a3; text-decoration: none; align-self: center; padding: 9px 4px; } .reset-link:hover { color: #4b5768; text-decoration: underline; } .btn-export { padding: 8px 16px; background: #fff; color: #1c3f57; border: 1px solid #1c3f57; border-radius: 20px; text-decoration: none; font-size: 13px; font-weight: 600; transition: background .12s; } .btn-export:hover { background: #eaf1f5; } .field-kind { min-width: 0; } .kind-checks { display: flex; gap: 10px; border: 1px solid #e6e9ee; border-radius: 20px; background: #f6f7f9; padding: 8px 10px; white-space: nowrap; } .kind-check { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #4b5768; cursor: pointer; } .kind-check input { margin: 0; accent-color: #1c3f57; cursor: pointer; } @media (max-width: 900px) { .filters-grid { grid-template-columns: 1fr 1fr; } .filter-group:nth-child(2n) { border-right: none; } .filter-group:nth-last-child(-n+2) { border-bottom: none; } .filter-group { border-bottom: 1px solid #f0f2f5; } } @media (max-width: 620px) { .filters-grid { grid-template-columns: 1fr; } .filter-group { border-right: none !important; border-bottom: 1px solid #f0f2f5; } .filter-group:last-of-type { border-bottom: none; } .filters-actions { flex-wrap: wrap; justify-content: stretch; } .filters-actions .btn-search { flex: 1; } } .field-date { position: relative; } .date-presets { display: flex; gap: 4px; margin-top: 4px; } .date-presets button { padding: 3px 8px; font-size: 11px; font-weight: 600; color: #1c3f57; background: #eaf1f5; border: none; border-radius: 20px; cursor: pointer; transition: background .12s; } .date-presets button:hover { background: #dcebf3; } .date-presets button.active { background: #1c3f57; color: #fff; } .search-stat-bar { margin-bottom: 14px; } /* Rounded card wrapper for the results table - softer radius/shadow than the rest of the (older) Search page chrome, deliberately matching the more premium, rounded card language used on the property report and Explore's cards (direct feedback: "I really like m2cena's UI" - their cards use ~17-21px radius + a soft shadow rather than a flat bordered table), so this page reads as the same product instead of a leftover plain table from an earlier pass. */ .results-card { background: #fff; border: 1px solid #e6e9ee; border-radius: 16px; box-shadow: 0 4px 20px rgba(16,24,40,.06); overflow: hidden; } /* The table itself scrolls horizontally on narrow screens, not the page - real bug found and fixed: without this, the wide table forced the whole wider than the viewport, which in turn stretched the fixed-width navbar off both edges on mobile ("white bars on the sides"). */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { border-collapse: collapse; width: 100%; font-size: 13.5px; } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #f0f2f5; } th { background: #fafbfc; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #8a94a3; } td.num-cell { font-variant-numeric: tabular-nums; } td.addr-cell { font-weight: 600; color: #16202c; } td.empty-cell { text-align: center; color: #8a94a3; padding: 28px 10px; } tbody tr:last-child td { border-bottom: none; } tr.result-row:hover { background: #f4f6f8; } /* Compact "Par ēku" facts inline in a table cell - same era-badge/fact vocabulary as the card panel and report, just laid out for a dense row instead of a spacious section. */ .row-building-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .row-fact { font-size: 11.5px; color: #6b7280; white-space: nowrap; } .pagination { margin-top: 16px; display: flex; gap: 8px; } .pagination a { padding: 4px 10px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; color: #333; } .trust-footnote { text-align: center; font-size: 11.5px; color: #8a94a3; margin-top: 16px; } .restricted-banner { background: #fdf6e3; border: 1px solid #f3e3b0; padding: 10px 14px; border-radius: 8px; font-size: 13px; color: #7a5c00; margin: 0 0 10px; } .restricted-banner a { color: #164a6c; font-weight: 600; } /* Fake blurred rows, not real hidden data blurred with CSS - see the matching pattern/reasoning in explore.js::renderPlaceholderCard. */ .result-row-locked td { filter: blur(4px); opacity: .5; pointer-events: none; user-select: none; background: repeating-linear-gradient(90deg, #eee 0 60px, #f6f6f6 60px 120px); height: 32px; } .search-teaser { text-align: center; padding: 24px 20px; margin-top: -70px; position: relative; z-index: 1; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 55%); } .search-teaser-count { font-size: 18px; font-weight: 800; color: #222; } .search-teaser-sub { font-size: 13px; color: #666; margin-top: 4px; } .search-teaser-btn { display: inline-block; margin-top: 12px; padding: 9px 22px; background: #1c3f57; color: #fff; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 13.5px; } .search-teaser-btn:hover { background: #164a6c; }