/* ═══════════════════════════════════════════════════════════════ LIVLY — Electric Indigo Light Design System Public B2C beta — property search for Prague ═══════════════════════════════════════════════════════════════ */ /* Hard-lock the page to light theme even when Chrome's "Force Dark Mode" flag is enabled — !important + color-scheme: light only on is the most reliable signal we can give the engine to skip auto-darkening. */ html { background-color: #f4f4f8 !important; color: #0d0d1a !important; color-scheme: light only !important; } :root { color-scheme: light only; --bg-primary: #f4f4f8; --bg-card: #ffffff; --bg-secondary: #f3f1fe; --accent: #6c5ce7; --accent-light: #a29bfe; --accent-hover: #5a4bd6; --accent-glow: rgba(108, 92, 231, 0.10); --text: #0d0d1a; --text-mid: #555566; --text-light: #9999aa; --lime: #00d2a0; --danger: #ff4757; --warning: #ffa502; --border: #e8e6f0; --shadow-sm: 0 1px 4px rgba(13, 13, 26, 0.04); --shadow-md: 0 2px 12px rgba(13, 13, 26, 0.06); --shadow-lg: 0 8px 32px rgba(13, 13, 26, 0.10); --shadow-glow: 0 0 32px rgba(108, 92, 231, 0.15); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg-primary); min-height: 100vh; } a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent-hover); } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; border: none; outline: none; background: none; } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); } h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); } h2 { font-size: clamp(1.4rem, 2.2vw, 1.875rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1.05rem; } /* ── Icons ──────────────────────────────────────────────────────── */ .livly-icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; } .livly-icon.accent { color: var(--accent); } .livly-icon.mint { color: var(--lime); } .livly-icon.danger { color: var(--danger); } .livly-icon.warn { color: var(--warning); } .livly-icon.muted { color: var(--text-light); } /* ── Logo ───────────────────────────────────────────────────────── */ .logo { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--text); letter-spacing: -0.03em; user-select: none; display: inline-flex; align-items: baseline; /* Larger tap target than the visible glyph */ padding: 10px 4px; margin: -10px -4px; } .logo .dot { color: var(--accent); } .logo-large { font-size: 2.5rem; } .logo-huge { font-size: 3.5rem; } /* ── Layout ─────────────────────────────────────────────────────── */ .app-container { min-height: 100vh; display: flex; flex-direction: column; } .navbar { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 14px 32px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.92); } .navbar-left { display: flex; align-items: center; gap: 24px; } .navbar-nav { display: flex; gap: 4px; } .navbar-nav a { color: var(--text-mid); font-weight: 500; font-size: 14px; padding: 12px 12px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; min-height: 44px; } .navbar-nav a:hover, .navbar-nav a.active { color: var(--accent); } .navbar-right { display: flex; align-items: center; gap: 12px; position: relative; } .avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-light)); color: white; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--transition-fast); } .avatar:hover { transform: scale(1.05); } .dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 200px; padding: 6px; display: none; z-index: 200; } .dropdown.open { display: block; } .dropdown a, .dropdown button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; min-height: 44px; font-size: 14px; color: var(--text); text-align: left; border-radius: var(--radius-sm); cursor: pointer; background: none; border: none; text-decoration: none; } .dropdown a .livly-icon { color: var(--text-light); } .dropdown a:hover .livly-icon { color: var(--accent); } .dropdown a:hover, .dropdown button:hover { background: var(--bg-secondary); color: var(--accent); } .dropdown-divider { height: 1px; background: var(--border); margin: 6px 0; } .page { flex: 1; padding: 32px; max-width: 1280px; margin: 0 auto; width: 100%; } .page-narrow { max-width: 720px; } .page-header { margin-bottom: 28px; } .page-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; } .page-subtitle { color: var(--text-mid); margin-top: 6px; font-size: 0.95rem; } /* ── Cards ──────────────────────────────────────────────────────── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); } .card-tight { padding: 16px; } /* ── Buttons ────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: var(--radius-md); font-weight: 600; font-size: 14px; cursor: pointer; transition: all var(--transition-fast); border: 1px solid transparent; font-family: var(--font-body); white-space: nowrap; min-height: 44px; } .btn-primary { background: var(--accent); color: white; } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(108, 92, 231, 0.25); color: white; } .btn-secondary { background: var(--bg-secondary); color: var(--accent); border-color: transparent; } .btn-secondary:hover { background: var(--accent-light); color: white; } .btn-ghost { background: transparent; color: var(--text-mid); border-color: var(--border); } .btn-ghost:hover { background: var(--bg-secondary); color: var(--accent); border-color: var(--accent-light); } .btn-success { background: var(--lime); color: white; } .btn-success:hover { filter: brightness(0.95); color: white; } .btn-danger { background: var(--danger); color: white; } .btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; } .btn-small { padding: 10px 16px; font-size: 14px; min-height: 44px; } .btn-large { padding: 14px 32px; font-size: 16px; } .btn-full { width: 100%; } .btn-sso { background-color: var(--bg-card); color: var(--text); border: 1px solid var(--border); font-weight: 500; text-decoration: none; } .btn-sso:hover { background-color: var(--bg-primary); border-color: var(--accent-light); color: var(--text); box-shadow: var(--shadow-sm); } .sso-icon { flex-shrink: 0; } .sso-divider { display: flex; align-items: center; text-align: center; margin: 18px 0; color: var(--text-light); font-size: 13px; } .sso-divider::before, .sso-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border); } .sso-divider:not(:empty)::before { margin-right: 12px; } .sso-divider:not(:empty)::after { margin-left: 12px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ── Forms ──────────────────────────────────────────────────────── */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-weight: 500; font-size: 13px; color: var(--text-mid); margin-bottom: 6px; } .form-input, .form-select, .form-textarea { width: 100%; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 16px; color: var(--text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); min-height: 44px; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .form-hint { color: var(--text-light); font-size: 13px; margin-top: 4px; } .back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 1rem; font-weight: 600; padding: 12px 18px; margin: 0 0 14px; min-height: 48px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; } .back-link:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateX(-2px); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-check { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; min-height: 44px; padding: 4px 0; } .form-check input[type="checkbox"], .form-check input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; } /* Pill-style checkbox label used for multi-select chips (dispositions, districts, building conditions) on the settings page. Sized for touch. */ .chip-check input[type="checkbox"] { display: none; } .chip-check { background: var(--bg-secondary); color: var(--accent); padding: 10px 16px; border-radius: 99px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; min-height: 44px; cursor: pointer; user-select: none; transition: background var(--transition-fast), color var(--transition-fast); border: 1.5px solid transparent; } .chip-check:hover { background: var(--accent-light); color: white; } .chip-check:has(input:checked) { background: var(--accent); color: white; border-color: var(--accent); } /* ── Auth pages ─────────────────────────────────────────────────── */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; background: linear-gradient(135deg, #f3f1fe 0%, #f4f4f8 60%, #ffffff 100%); position: relative; overflow: hidden; } .auth-shell::before { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(108, 92, 231, 0.22), transparent 70%); top: -120px; right: -120px; filter: blur(40px); } .auth-shell::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(162, 155, 254, 0.18), transparent 70%); bottom: -100px; left: -100px; filter: blur(50px); } .auth-card { position: relative; z-index: 2; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 40px; max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); animation: authIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes authIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .auth-header { text-align: center; margin-bottom: 28px; } .auth-header h1 { font-size: 1.5rem; margin-top: 14px; } .auth-footer { text-align: center; margin-top: 18px; color: var(--text-mid); font-size: 15px; } .auth-footer a { font-weight: 600; display: inline-block; padding: 12px 8px; margin: -12px -8px; min-height: 44px; } /* ── Flash messages ─────────────────────────────────────────────── */ .flash-container { position: fixed; top: 16px; right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: 360px; } .flash { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-md); padding: 12px 18px; box-shadow: var(--shadow-lg); font-size: 14px; color: var(--text); animation: slideIn 0.3s var(--transition); } .flash-success { border-left-color: var(--lime); } .flash-error { border-left-color: var(--danger); } .flash-warning { border-left-color: var(--warning); } @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* ── Tabs ───────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; } .tab { padding: 14px 20px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-mid); font-weight: 500; font-size: 14px; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; display: flex; align-items: center; gap: 8px; min-height: 48px; } .tab:hover { color: var(--accent); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-count { background: var(--bg-secondary); color: var(--accent); font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 10px; line-height: 1.4; } .tab.active .tab-count { background: var(--accent); color: white; } /* ── Property cards ─────────────────────────────────────────────── */ .property-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; } .property-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; } .property-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .property-photo { position: relative; aspect-ratio: 16/10; background: var(--bg-secondary); overflow: hidden; } .property-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--transition); } .property-card:hover .property-photo img { transform: scale(1.03); } .property-photo-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 14px; } .photo-count-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(13, 13, 26, 0.65); color: white; font-size: 12px; padding: 4px 9px; border-radius: 99px; font-weight: 500; } .new-badge { position: absolute; top: 10px; left: 10px; background: var(--accent); color: white; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 99px; } /* Settings-driven match: a listing that (re)appeared because the client widened/relaxed their criteria. Distinct colour so it reads as "this is here because of your new settings", not a routine new find. */ .new-badge.new-badge-settings { background: var(--success, #1f9d77); white-space: nowrap; } .property-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .property-price { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--text); } .property-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text-mid); } .property-meta-item { display: inline-flex; align-items: center; gap: 4px; } .property-address { color: var(--text); font-size: 14px; line-height: 1.4; } .property-street { font-weight: 700; font-size: 1.05rem; color: var(--text); } .property-address-rest { color: var(--text-mid); font-size: 13px; } .property-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 99px; background: var(--bg-secondary); color: var(--accent); } .flag-warning { background: rgba(255, 71, 87, 0.12); color: var(--danger) !important; } .flag-danger { background: rgba(255, 71, 87, 0.12); color: var(--danger) !important; } .flag-success { background: rgba(0, 210, 160, 0.14); color: var(--lime) !important; } .property-actions { padding: 12px 18px 16px; display: flex; gap: 8px; margin-top: auto; } .property-actions .btn { flex: 1; } /* ── Empty / loading states ─────────────────────────────────────── */ .empty-state { text-align: center; padding: 64px 24px; color: var(--text-mid); } .empty-state-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; } .empty-state h3 { font-size: 1.15rem; color: var(--text); margin-bottom: 6px; } /* ── Onboarding wizard ──────────────────────────────────────────── */ .onboarding-shell { min-height: 100vh; background: linear-gradient(135deg, #f3f1fe 0%, #f4f4f8 60%, #ffffff 100%); display: flex; flex-direction: column; position: relative; overflow: hidden; } .onboarding-shell::before { content: ""; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(108, 92, 231, 0.18), transparent 70%); top: -150px; right: -100px; filter: blur(50px); z-index: 0; } .onboarding-progress { height: 4px; background: var(--border); position: relative; z-index: 5; } .onboarding-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); width: 0%; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 0 4px 4px 0; } .onboarding-header { padding: 14px 32px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 5; } .onboarding-step-label { font-size: 13px; color: var(--text-light); font-weight: 500; } .onboarding-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 32px; position: relative; z-index: 2; } .onboarding-step { display: none; max-width: 640px; width: 100%; text-align: center; animation: stepIn 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .onboarding-step.active { display: block; } .onboarding-step .btn-ghost { color: var(--accent); border-color: var(--accent-light); } @keyframes stepIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes stepOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-40px); } } .onboarding-step h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 10px; } .onboarding-step p.lead { color: var(--text-mid); font-size: 1rem; margin-bottom: 20px; max-width: 500px; margin-left: auto; margin-right: auto; } .choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 32px; } .choice-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-md); padding: 22px 14px; cursor: pointer; transition: all var(--transition); position: relative; user-select: none; text-align: center; } .choice-card:hover { border-color: var(--accent-light); transform: translateY(-2px); box-shadow: var(--shadow-md); } .choice-card.selected { border-color: var(--accent); background: linear-gradient(180deg, var(--bg-secondary), var(--bg-card)); transform: scale(1.02); box-shadow: 0 8px 24px rgba(108, 92, 231, 0.15); } .choice-card.selected::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; background: var(--accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; animation: pop 0.3s var(--transition); } @keyframes pop { from { transform: scale(0); } to { transform: scale(1); } } .choice-card .icon { font-size: 28px; margin-bottom: 8px; display: block; } .choice-card .label { font-weight: 600; font-size: 14px; color: var(--text); } .choice-card .sub { display: block; font-size: 13px; color: var(--text-light); margin-top: 3px; } /* ── Choice cards with photos (Stav bytu step) ──────────────────── */ /* lock to a single clean row of four; collapse to 2x2 on narrow screens */ .choice-grid--photo { grid-template-columns: repeat(4, minmax(0, 1fr)); } .choice-grid--photo .choice-card { padding: 0 0 16px; overflow: hidden; } .choice-grid--photo .choice-card .choice-thumb { display: block; width: 100%; height: 140px; background-color: var(--bg-secondary); background-size: cover; background-position: center; position: relative; } /* gentle bottom scrim so the floating badge always reads cleanly */ .choice-grid--photo .choice-card .choice-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 30, 0) 45%, rgba(20, 18, 30, 0.30)); transition: opacity var(--transition); } .choice-grid--photo .choice-card:hover .choice-thumb::after { opacity: 0.55; } /* icon becomes a round badge straddling the photo / text divide */ .choice-grid--photo .choice-card .icon { position: relative; z-index: 1; width: 46px; height: 46px; margin: -23px auto 0; background: var(--bg-card); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(20, 18, 30, 0.18); transition: background var(--transition), box-shadow var(--transition), transform var(--transition); } .choice-grid--photo .choice-card .label { margin-top: 9px; } .choice-grid--photo .choice-card .sub { margin-top: 2px; } /* selected: badge fills with accent, icon turns white, ring on photo */ .choice-grid--photo .choice-card.selected .choice-thumb::after { background: linear-gradient(180deg, rgba(108, 92, 231, 0) 35%, rgba(108, 92, 231, 0.42)); } .choice-grid--photo .choice-card.selected .icon { background: var(--accent); box-shadow: 0 8px 20px rgba(108, 92, 231, 0.42); transform: scale(1.06); } .choice-grid--photo .choice-card.selected .icon .livly-icon { color: #fff; } @media (max-height: 720px) { .choice-grid--photo .choice-card .choice-thumb { height: 108px; } } @media (max-width: 560px) { .choice-grid--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .onboarding-footer { padding: 24px 32px; display: flex; justify-content: space-between; gap: 12px; position: relative; z-index: 5; } .tram-anim { position: relative; height: 70px; margin: 16px 0 28px; overflow: hidden; } .tram-anim .tram { position: absolute; font-size: 40px; top: 14px; left: -60px; animation: tramRun 4s linear infinite; } @keyframes tramRun { 0% { left: -60px; } 100% { left: 100%; } } .tram-anim .rails { position: absolute; bottom: 6px; left: 0; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--accent-light) 0 12px, transparent 12px 22px); opacity: 0.6; } /* ── Onboarding extras ──────────────────────────────────────────────── */ .onboarding-warning { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); background: rgba(255, 165, 2, 0.08); border: 1px solid rgba(255, 165, 2, 0.25); color: var(--text); font-size: 14px; line-height: 1.45; text-align: left; max-width: 520px; margin: 14px auto 0; animation: warningIn 0.3s var(--ease-out, ease-out); } @keyframes warningIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .mode-toggle { display: inline-flex; background: var(--bg-secondary); border-radius: 99px; padding: 4px; gap: 4px; margin: 0 auto 18px; } .mode-btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--text-mid); background: transparent; border: none; cursor: pointer; min-height: 44px; transition: all var(--transition-fast); } .mode-btn.active { background: var(--bg-card); color: var(--accent); box-shadow: 0 1px 3px rgba(13, 13, 26, 0.06); } .onboarding-map { height: 360px; width: 100%; max-width: 660px; margin: 0 auto; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-secondary); overflow: hidden; z-index: 1; } /* Bump Leaflet zoom-control buttons to a tappable 44px. Leaflet ships a `.leaflet-touch .leaflet-bar a` rule that wins on source-order ties, so we use `!important` here rather than fight specificity. */ .onboarding-map .leaflet-bar a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; } .map-hint { display: flex; align-items: center; gap: 8px; background: var(--bg-secondary); border: 1px dashed var(--accent-light); border-radius: var(--radius-md); padding: 10px 14px; font-size: 13px; color: var(--text-mid); margin: 0 auto 12px; max-width: 540px; transition: opacity 0.4s; text-align: left; } .map-hint-finger { display: inline-flex; animation: tapFinger 1.5s ease-in-out infinite; } @keyframes tapFinger { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -4px); } } .commute-illustration { width: 100%; max-width: 480px; margin: 8px auto 18px; } .commute-illustration svg { width: 100%; height: auto; } .commute-tram { animation: commuteRun 6s linear infinite; } @keyframes commuteRun { 0% { transform: translate(45px, 95px) rotate(-15deg); } 25% { transform: translate(135px, 55px) rotate(-5deg); } 50% { transform: translate(225px, 55px) rotate(5deg); } 75% { transform: translate(295px, 80px) rotate(12deg); } 100% { transform: translate(45px, 95px) rotate(-15deg); } } .transit-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .chip-preset { display: inline-flex; align-items: center; gap: 6px; padding: 11px 16px; min-height: 44px; border-radius: 99px; background: var(--bg-secondary); border: 1px solid transparent; color: var(--text-mid); font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); } .chip-preset:hover { color: var(--accent); } .chip-preset.selected { background: var(--accent); color: white; } /* ── Address autocomplete dropdown ──────────────────────────────── */ .addr-suggest-wrap { position: relative; } .addr-suggest-list { position: absolute; top: calc(100% + 3px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.13); z-index: 300; overflow: hidden; max-height: 260px; overflow-y: auto; } .addr-suggest-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background var(--transition-fast); outline: none; } .addr-suggest-item:last-child { border-bottom: none; } .addr-suggest-item:hover, .addr-suggest-item:focus { background: var(--bg-secondary); } .addr-suggest-item strong { display: block; font-size: 13px; font-weight: 600; color: var(--text-dark); } .addr-suggest-item small { display: block; font-size: 11px; color: var(--text-mid); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .area-anim { width: 100%; max-width: 280px; margin: 8px auto 12px; } .area-anim svg { width: 100%; height: auto; } .area-anim #areaWall { transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .area-anim g { transition: opacity 0.3s ease-out; } .range-slider { width: 100%; margin: 18px 0; -webkit-appearance: none; background: transparent; } .range-slider::-webkit-slider-runnable-track { height: 6px; background: var(--border); border-radius: 3px; } .range-slider::-moz-range-track { height: 6px; background: var(--border); border-radius: 3px; } .range-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; background: var(--accent); border: 3px solid white; border-radius: 50%; margin-top: -11px; cursor: pointer; box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3); transition: transform var(--transition-fast); } .range-slider::-webkit-slider-thumb:hover { transform: scale(1.1); } .range-slider::-moz-range-thumb { width: 28px; height: 28px; background: var(--accent); border: 3px solid white; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3); } .range-display { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--accent); text-align: center; margin: 8px 0; } .range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ── Explainer steps (9 & 10) ──────────────────────────────────── */ .explainer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; text-align: left; } .explainer-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: var(--shadow-sm); } .explainer-card--accent { border-color: var(--accent); background: linear-gradient(160deg, var(--bg-secondary) 0%, var(--bg-card) 100%); } .explainer-card--danger { border-color: var(--danger); background: linear-gradient(160deg, rgba(255,71,87,0.06) 0%, var(--bg-card) 100%); } .explainer-card-icon { margin-bottom: 10px; } .explainer-card h2 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; color: var(--text); } .explainer-card-sub { font-size: 0.875rem; font-weight: 600; color: var(--text-mid); margin: 0 0 10px; } .explainer-card-desc { font-size: 0.875rem; color: var(--text-mid); line-height: 1.55; margin: 0; } .tip-box { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-secondary); border-radius: var(--radius-md); padding: 14px 16px; text-align: left; max-width: 100%; } .tip-box-icon { flex-shrink: 0; margin-top: 1px; } .tip-box p { font-size: 0.85rem; color: var(--text-mid); line-height: 1.55; margin: 0; } .explainer-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 24px 0; text-align: left; align-items: start; } .explainer-split-text h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin: 0 0 8px; color: var(--accent); } .explainer-split-text p { font-size: 0.9rem; color: var(--text-mid); line-height: 1.6; margin: 0; } .explainer-text-block + .explainer-text-block { margin-top: 16px; } .demo-wrapper { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-md); max-width: 280px; margin: 0 auto; } .demo-tabs { display: flex; gap: 8px; margin-bottom: 12px; } .demo-tab { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; font-family: var(--font-body); border: 1.5px solid transparent; transition: background var(--transition-fast); } .demo-tab--approve { border-color: var(--lime); color: var(--lime); } .demo-tab--reject { border-color: var(--danger); color: var(--danger); } .demo-tab--approve.demo-tab--active { background: rgba(0, 210, 160, 0.12); } .demo-tab--reject.demo-tab--active { background: rgba(255, 71, 87, 0.12); } .demo-tab-count { font-variant-numeric: tabular-nums; } .demo-card { background: var(--bg-primary); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px; } .demo-card-photo { height: 88px; background: linear-gradient(135deg, var(--accent-light) 0%, var(--bg-secondary) 100%); } .demo-card-info { padding: 10px 12px; } .demo-card-price { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--text); } .demo-card-meta { font-size: 0.78rem; color: var(--text-mid); margin-top: 2px; } .demo-card-badge { display: inline-block; margin-top: 6px; padding: 2px 8px; background: rgba(0, 210, 160, 0.12); color: var(--lime); border-radius: 20px; font-size: 0.72rem; font-weight: 600; } .demo-actions { display: flex; gap: 8px; } .demo-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 0; border-radius: var(--radius-sm); border: none; font-size: 0.83rem; font-weight: 600; font-family: var(--font-body); cursor: default; transition: transform 0.12s var(--transition-fast); } .demo-btn--approve { background: var(--lime); color: #fff; } .demo-btn--reject { background: var(--danger); color: #fff; } .demo-btn.demo-btn--pressing { transform: scale(0.91); } .demo-reduced-note { display: none; font-size: 0.82rem; color: var(--text-light); text-align: center; margin-top: 8px; } @keyframes demoTabPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @media (max-width: 640px) { .explainer-cols { grid-template-columns: 1fr; } .explainer-split { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .demo-card { transition: none !important; } .demo-btn { transition: none !important; } } /* ── Confetti / done step ───────────────────────────────────────── */ .done-icon { width: 96px; height: 96px; margin: 0 auto 20px; border-radius: 50%; background: linear-gradient(135deg, var(--lime), #4dd1ad); color: white; display: flex; align-items: center; justify-content: center; font-size: 48px; animation: doneIn 0.6s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 12px 32px rgba(0, 210, 160, 0.3); } @keyframes doneIn { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 60% { transform: scale(1.1) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } } .confetti-piece { position: absolute; width: 8px; height: 14px; background: var(--accent); opacity: 0; top: 50%; left: 50%; animation: confetti 1.6s ease-out forwards; } @keyframes confetti { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--cx, 100px), var(--cy, -120px)) rotate(720deg); } } /* ── Admin panel ────────────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; } .stat-card .label { font-size: 12px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; } .stat-card .value { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin-top: 2px; color: var(--text); } .stat-card .sub { font-size: 13px; color: var(--text-mid); margin-top: 2px; } .stat-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .stat-card-link:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.10); } .stat-card-candidates { border-color: rgba(108, 92, 231, 0.30); background: rgba(108, 92, 231, 0.05); } .stat-value-candidates { color: var(--accent); font-size: 1.7rem; } .stat-card-approved { border-color: rgba(0, 210, 160, 0.35); background: rgba(0, 210, 160, 0.05); } .stat-value-approved { color: var(--mint, #00d2a0); font-size: 1.7rem; } .stat-card-discarded { border-color: rgba(255, 71, 87, 0.30); background: rgba(255, 71, 87, 0.05); } .stat-value-discarded { color: var(--danger); font-size: 1.7rem; } /* Wrap data tables so they can horizontally scroll on narrow screens. */ .data-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); } .data-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-card); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); font-size: 14px; } .data-table th { background: var(--bg-secondary); color: var(--accent); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; padding: 12px 16px; text-align: left; } .data-table td { padding: 14px 16px; border-top: 1px solid var(--border); color: var(--text); } .data-table tbody tr:hover { background: rgba(243, 241, 254, 0.4); } /* ── Misc ───────────────────────────────────────────────────────── */ .muted { color: var(--text-light); } .text-mid { color: var(--text-mid); } .accent { color: var(--accent); } .text-mint { color: var(--lime); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 14px; } .mt-3 { margin-top: 22px; } .mt-4 { margin-top: 32px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 14px; } .mb-3 { margin-bottom: 22px; } .mb-4 { margin-bottom: 32px; } .row { display: flex; gap: 12px; align-items: center; } .row-between { justify-content: space-between; } .row-wrap { flex-wrap: wrap; } .divider { height: 1px; background: var(--border); margin: 24px 0; border: none; } .badge { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-secondary); color: var(--accent); font-size: 12px; padding: 3px 10px; border-radius: 99px; font-weight: 500; } /* ── Modal ──────────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(13, 13, 26, 0.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 500; padding: 24px; animation: fadeIn 0.2s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--bg-card); border-radius: var(--radius-xl); max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalIn 0.3s var(--transition); } @keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .modal-body { padding: 24px; } @media (max-width: 720px) { .navbar { padding: 10px 16px; } .page { padding: 18px 16px; } .form-row, .range-row { grid-template-columns: 1fr; } .auth-card { padding: 28px 22px; } /* On mobile the navbar collapses to logo + avatar — primary navigation lives in the avatar dropdown instead of crowding the top bar. */ .navbar-nav { display: none; } /* Tighten dashboard header so action buttons don't crowd the greeting. */ .page-title { font-size: 1.5rem; } .page-header.row.row-between.row-wrap { gap: 12px; } /* Button cluster in dashboard header: wrap instead of overflowing off-screen. */ .page-header > .row { flex-wrap: wrap; } /* Tabs: spread evenly across the full width so the count badge after "Zamítnuté" is never cut off or requires horizontal scrolling. */ .tabs { overflow-x: visible; gap: 0; } .tab { flex: 1; justify-content: center; padding: 11px 6px; font-size: 13px; } .tab-count { flex-shrink: 0; } /* Stats grid stays one column on the smallest phones. */ .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .stat-card { padding: 14px; } .stat-card .value { font-size: 1.4rem; } /* Property card actions stack-friendly */ .property-actions { padding: 12px 16px 16px; gap: 10px; } } @media (max-width: 420px) { /* Stack stat cards in a single column on the smallest viewports so they don't get squeezed. */ .stats-grid { grid-template-columns: 1fr; } } /* Touch-device-only tweaks (independent of viewport width) — extra padding for any control that has to be tapped with a finger. */ @media (hover: none) and (pointer: coarse) { .navbar-nav a { padding: 12px 14px; } .form-check input[type="checkbox"], .form-check input[type="radio"] { width: 22px; height: 22px; } } /* ── Property detail layout ─────────────────────────────────────── */ .detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; } @media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; gap: 16px; } } .detail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .detail-actions > form { display: inline-flex; } @media (max-width: 720px) { /* Each action button claims full row on phones so nothing slides off-screen. The LIVLY report button was the most common overflow culprit. */ .detail-actions { width: 100%; gap: 8px; } .detail-actions > form, .detail-actions > a { flex: 1 1 calc(50% - 4px); } .detail-actions > form .btn, .detail-actions > a.btn { width: 100%; justify-content: center; } } @media (max-width: 420px) { /* Below ~iPhone SE width even 2-per-row gets cramped — stack vertically. */ .detail-actions > form, .detail-actions > a { flex: 1 1 100%; } } /* ── Client detail: action button bar ───────────────────────────── */ .client-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } @media (max-width: 640px) { .client-detail-actions { gap: 8px; } /* Three action buttons fill two columns so none drifts to the right. */ .client-detail-actions > form, .client-detail-actions > a.btn, .client-detail-actions > button.btn { flex: 1 1 calc(50% - 4px); min-width: 0; justify-content: center; } .client-detail-actions > form .btn { width: 100%; justify-content: center; } /* Badges and toggle wrap naturally after the buttons. */ .client-detail-actions .badge, .client-detail-actions .toggle-search-form { flex: 0 0 auto; } } @media (max-width: 400px) { /* On very small screens each button takes its own row. */ .client-detail-actions > form, .client-detail-actions > a.btn, .client-detail-actions > button.btn { flex: 1 1 100%; } } /* ── Photo grid in property detail ──────────────────────────────── */ .photo-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 20px; } .photo-tile { position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--bg-secondary); } .photo-tile > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--transition); } .photo-tile:hover > img { transform: scale(1.03); } .photo-grid .photo-hero { grid-row: 1 / 3; aspect-ratio: 4/3; } .photo-grid .small { aspect-ratio: 4/3; } .photo-more-frost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; background: rgba(13, 13, 26, 0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.18s; } .photo-tile:hover .photo-more-frost { background: rgba(13, 13, 26, 0.48); } @media (max-width: 640px) { .photo-grid { grid-template-columns: 1fr 1fr; } .photo-grid .photo-hero { grid-row: auto; grid-column: 1 / -1; } } .badge-sub { margin-left: 4px; font-weight: 500; opacity: 0.85; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── Detail page: photo lightbox ─────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(8, 8, 16, 0.92); display: flex; align-items: center; justify-content: center; padding: 40px; } .lightbox[hidden] { display: none !important; } .lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6); } .lightbox-close, .lightbox-nav { position: absolute; background: rgba(255, 255, 255, 0.10); color: #fff; border: 1px solid rgba(255, 255, 255, 0.20); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); } .lightbox-close { top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; font-size: 28px; line-height: 1; } .lightbox-nav { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; font-size: 36px; line-height: 1; } .lightbox-prev { left: 24px; } .lightbox-next { right: 24px; } .lightbox-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.85); background: rgba(13, 13, 26, 0.65); padding: 6px 14px; border-radius: 99px; font-size: 14px; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .lightbox { padding: 12px; } .lightbox-nav { width: 44px; height: 44px; font-size: 28px; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } } /* ── Property card: AJAX action feedback ─────────────────────────── */ .property-card-fading { opacity: 0; transform: scale(0.96); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .card-action-error { background: rgba(255, 71, 87, 0.16) !important; color: #c0392b !important; border-color: rgba(255, 71, 87, 0.45) !important; } /* ── Property card: photo carousel ────────────────────────────────── */ .property-photo-carousel { position: relative; } .property-photo-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--transition); } .property-detail-bar { display: block; text-align: center; padding: 10px 14px; background: #fff; color: var(--text); font-weight: 600; font-size: 0.95rem; text-decoration: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background 0.18s, color 0.18s, letter-spacing 0.18s; } .property-detail-bar:hover { background: var(--accent); color: #fff; letter-spacing: 0.02em; text-decoration: none; } .property-price-link, .property-address-link { text-decoration: none; color: inherit; display: block; transition: color 0.15s; } .property-price-link:hover .property-price, .property-address-link:hover .property-street { color: var(--accent); } .property-card:hover .property-photo-img { transform: scale(1.03); } .photo-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(13, 13, 26, 0.55); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.18s, background 0.18s; z-index: 2; } .property-photo-carousel:hover .photo-nav { opacity: 1; } .photo-nav:hover { background: rgba(13, 13, 26, 0.85); } /* Touch devices have no hover — show the carousel arrows always so users can navigate photos with a finger. */ @media (hover: none) and (pointer: coarse) { .property-photo-carousel .photo-nav { opacity: 0.85; } } .photo-prev { left: 8px; } .photo-next { right: 8px; } .photo-counter { position: absolute; bottom: 8px; left: 8px; background: rgba(13, 13, 26, 0.65); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 99px; font-variant-numeric: tabular-nums; z-index: 2; } .property-photo-thumbs { display: flex; gap: 4px; padding: 6px 8px; overflow-x: auto; scrollbar-width: thin; background: var(--bg-secondary); border-bottom: 1px solid var(--border); } .property-photo-thumbs::-webkit-scrollbar { height: 4px; } .property-photo-thumbs::-webkit-scrollbar-thumb { background: rgba(108, 92, 231, 0.35); border-radius: 2px; } .property-photo-thumb { flex: 0 0 auto; width: 52px; height: 36px; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: 0.6; border: 2px solid transparent; transition: opacity 0.15s, border-color 0.15s; } .property-photo-thumb:hover { opacity: 0.85; } .property-photo-thumb.active { opacity: 1; border-color: var(--accent); } /* ── Property card: portal link ───────────────────────────────────── */ .portal-link { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; } .portal-link:hover { text-decoration: none; } .portal-sreality { background: var(--accent-glow); color: var(--accent); border-color: rgba(108, 92, 231, 0.25); } .portal-sreality:hover { background: rgba(108, 92, 231, 0.18); } .portal-bezrealitky { background: rgba(108, 92, 231, 0.10); color: var(--accent); border-color: rgba(108, 92, 231, 0.28); } .portal-bezrealitky:hover { background: rgba(108, 92, 231, 0.18); } /* ── Property detail: prominent portal CTA ───────────────────────── */ .portal-cta { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; padding: 14px 20px; border-radius: 12px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent; transition: background 0.18s, color 0.18s, transform 0.15s, border-color 0.18s; } .portal-cta:hover { text-decoration: none; transform: translateY(-1px); } .portal-cta-sreality { background: rgba(231, 76, 60, 0.10); color: #c0392b; border-color: rgba(231, 76, 60, 0.35); } .portal-cta-sreality:hover { background: #c0392b; color: #fff; border-color: #c0392b; } .portal-cta-bezrealitky { background: rgba(108, 92, 231, 0.10); color: var(--accent); border-color: rgba(108, 92, 231, 0.38); } .portal-cta-bezrealitky:hover { background: var(--accent); color: #fff; border-color: var(--accent); } /* ── Property card: discard reasons ──────────────────────────────── */ .property-discard-reasons { margin-top: 4px; padding: 10px 12px; background: rgba(255, 71, 87, 0.06); border-left: 3px solid rgba(255, 71, 87, 0.55); border-radius: 0 8px 8px 0; font-size: 13px; } .property-discard-reasons-label { font-weight: 600; color: #c0392b; margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .property-discard-reasons ul { margin: 0; padding-left: 18px; color: var(--text-mid); } .property-discard-reasons li { margin: 2px 0; } /* ── Add manual listing panel (dashboard) ────────────────────────── */ /* ── Dashboard search filter ─────────────────────────────────────── */ .dash-search-wrap { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; } .dash-search-input { flex: 1; max-width: 420px; padding: 7px 12px; font-size: 14px; min-height: 0; } .dash-search-count { font-size: 13px; color: var(--text-mid); white-space: nowrap; } .dash-search-empty[hidden] { display: none; } .dash-search-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px; color: var(--text-muted); text-align: center; } .dash-search-empty svg { opacity: .35; } .dash-search-empty-title { font-size: 16px; font-weight: 600; color: var(--text-mid); } .dash-search-empty-sub { font-size: 13px; color: var(--text-muted); } .dash-search-empty-reset { margin-top: 4px; padding: 8px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); font-size: 13px; font-weight: 500; cursor: pointer; color: var(--indigo); } .dash-search-empty-reset:hover { background: var(--bg-hover); } /* ── Add manual listing panel (dashboard) ────────────────────────── */ .add-listing-panel:not([hidden]) { display: block; margin: 0 0 20px; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); } .add-listing-title { font-weight: 600; font-size: 15px; color: var(--text); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .add-listing-hint { font-size: 13px; color: var(--text-mid); margin: 0 0 12px; } .add-listing-row { display: flex; gap: 8px; align-items: flex-start; } .add-listing-actions { display: flex; gap: 8px; flex-shrink: 0; } .add-listing-input { flex: 1; min-width: 0; min-height: 38px; } @media (max-width: 560px) { .add-listing-row { flex-direction: column; } .add-listing-input { width: 100%; } .add-listing-actions { width: 100%; } .add-listing-actions .btn { flex: 1; } } .add-listing-msg { font-size: 13px; margin-top: 10px; padding: 8px 12px; border-radius: 8px; } .add-listing-msg-ok { background: var(--success-bg); color: #1a7a43; } .add-listing-msg-error { background: var(--danger-bg); color: #922b21; } /* ── Search progress banner (dashboard) ──────────────────────────── */ .search-banner:not([hidden]) { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin: 16px 0 20px; border-radius: 14px; background: linear-gradient(120deg, rgba(108, 92, 231, 0.10), rgba(0, 210, 160, 0.08)); border: 1px solid rgba(108, 92, 231, 0.18); position: relative; overflow: hidden; } .search-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%); transform: translateX(-100%); animation: searchSweep 1.8s ease-in-out infinite; pointer-events: none; } @keyframes searchSweep { to { transform: translateX(100%); } } .search-banner-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: searchPulse 1.6s ease-in-out infinite; } @keyframes searchPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.5); } 50% { box-shadow: 0 0 0 10px rgba(108, 92, 231, 0); } } .search-banner-text { flex: 1; min-width: 0; } .search-banner-title { font-weight: 600; color: var(--text); } .search-banner-sub { font-size: 0.85rem; color: var(--text-mid); margin-top: 2px; } .search-banner-dots::after { content: ""; display: inline-block; animation: searchDots 1.4s steps(4, end) infinite; } @keyframes searchDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } 100% { content: ""; } } .search-progress-wrap { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .search-progress-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(108, 92, 231, 0.15); overflow: hidden; } .search-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--mint)); width: 0%; transition: width 0.6s ease; } .search-progress-count { font-size: 0.80rem; font-weight: 600; color: var(--accent); white-space: nowrap; min-width: 48px; text-align: right; } .btn .livly-icon.spin { animation: searchSpin 1s linear infinite; } @keyframes searchSpin { to { transform: rotate(360deg); } } /* ── Logo: make hover cursor obvious ─────────────────────────────── */ .logo:hover { opacity: 0.8; text-decoration: none; } /* ── Tablet (768px) header button row: force wrap so no scrollbar ── */ @media (max-width: 800px) { .page-header > .row { flex-wrap: wrap; gap: 8px; } .page-header > .row > .btn, .page-header > .row > a.btn { flex: 1 1 auto; white-space: nowrap; justify-content: center; } } /* ── Skeleton loading for images ─────────────────────────────────── */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .img-loading { background: linear-gradient(90deg, #ece9f7 25%, #f5f3fc 50%, #ece9f7 75%); background-size: 800px 100%; animation: shimmer 1.6s infinite; } /* ── Undo / notification toast ───────────────────────────────────── */ #undoToast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--text); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-lg); z-index: 9999; transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.28s; opacity: 0; pointer-events: none; white-space: nowrap; } #undoToast.toast-visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } #undoToastBtn { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35); color: #fff; padding: 4px 11px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; flex-shrink: 0; } #undoToastBtn:hover { background: rgba(255,255,255,0.28); } /* Search completion toast (reuses toast structure) */ #searchDoneToast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--text); color: #fff; padding: 11px 20px; border-radius: 10px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 9998; transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.28s; opacity: 0; pointer-events: none; white-space: nowrap; max-width: calc(100vw - 32px); text-align: center; } #searchDoneToast.toast-visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } /* ── Property card: bigger thumb tap target on touch ─────────────── */ @media (hover: none) and (pointer: coarse) { .property-photo-thumb { width: 44px; height: 36px; } /* More gap between Schválit / Zamítnout on touch so no mistap */ .property-actions { gap: 16px; } } /* ── Password field wrapper for show/hide toggle ─────────────────── */ .pwd-wrap { position: relative; } .pwd-wrap .form-input { padding-right: 44px; } .pwd-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; color: var(--text-light); line-height: 1; display: flex; align-items: center; } .pwd-toggle:hover { color: var(--text-mid); } /* ── Unsaved changes sticky bar ──────────────────────────────────── */ #unsavedBar { position: sticky; bottom: 0; left: 0; right: 0; background: var(--bg-card); color: var(--text); border-top: 1px solid var(--border); padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 200; transform: translateY(100%); transition: transform var(--transition); box-shadow: 0 -4px 20px rgba(13,13,26,0.07); font-size: 14px; font-family: var(--font-body); } #unsavedBar.bar-visible { transform: translateY(0); } #unsavedBar .bar-actions { display: flex; gap: 8px; } .bar-save-btn { background: var(--accent); color: #fff; border: none; padding: 7px 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--font-body); transition: all var(--transition-fast); } .bar-discard-btn { background: var(--bg-secondary); color: var(--accent); border: none; padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font-body); transition: all var(--transition-fast); } .bar-save-btn:hover { background: var(--accent-hover); transform: translateY(-1px); } .bar-discard-btn:hover { background: var(--accent-light); color: #fff; } /* ── Property detail: mobile sticky action bar ───────────────────── */ @media (max-width: 680px) { .detail-actions-sticky { position: sticky; bottom: 0; background: var(--bg-card); border-top: 1px solid var(--border); padding: 10px 16px; margin: 0 -16px; z-index: 100; display: flex; gap: 8px; flex-wrap: nowrap; } .detail-actions-sticky .btn { flex: 1; justify-content: center; } .detail-actions-desktop { display: none; } } @media (min-width: 681px) { .detail-actions-sticky { display: none; } } /* ── Property grid: equal card heights ───────────────────────────── */ .property-grid { align-items: start; } /* ── Settings: chip-check toggle — hide redundant inner checkbox ──── */ .chip-check-toggle input[type="checkbox"] { display: none; } .chip-check-toggle { padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--border); background: transparent; cursor: pointer; font-size: 0.85rem; font-weight: 500; color: var(--text-mid); transition: background 0.15s, color 0.15s, border-color 0.15s; user-select: none; } .chip-check-toggle:has(input:checked) { background: var(--accent); color: #fff; border-color: var(--accent); } /* ── Forgot password link ─────────────────────────────────────────── */ .auth-forgot { text-align: right; margin-top: -8px; margin-bottom: 16px; font-size: 13px; } /* ── Password reset page ─────────────────────────────────────────── */ .auth-success { background: rgba(0,210,160,0.10); border: 1px solid rgba(0,210,160,0.30); border-radius: var(--radius-sm); color: #1a7a43; padding: 12px 16px; font-size: 14px; margin-bottom: 16px; } /* ── Sold property card ──────────────────────────────────────────── */ .property-photo-sold .property-photo-img { filter: grayscale(100%); opacity: 0.75; } .sold-overlay-badge { position: absolute; top: 10px; left: 10px; background: #d63031; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; letter-spacing: 0.6px; text-transform: uppercase; box-shadow: 0 2px 8px rgba(214,48,49,0.45); z-index: 5; } .property-price-sold { color: var(--text-mid); } .sold-price-badge { display: inline-block; background: #d63031; color: #fff; font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; letter-spacing: 0.5px; text-transform: uppercase; vertical-align: middle; margin-right: 6px; position: relative; top: -2px; }