/* Шрифты Google (Inter/Fraunces/Geologica/JetBrains Mono) грузятся через в index.html , не через @import — так нет цепочки запросов и меньше render-blocking. */ :root{ --bg:#FAFBFE; --bg-gradient: radial-gradient(ellipse 90% 70% at 8% -10%, rgba(14,165,160,0.09), transparent 55%), radial-gradient(ellipse 70% 55% at 92% 110%, rgba(245,158,11,0.08), transparent 50%); --surface:#FFFFFF; --surface-elevated:#FFFFFF; --card:rgba(15,23,42,0.04); --card-hover:rgba(15,23,42,0.07); --border:rgba(15,23,42,0.08); --border-strong:rgba(15,23,42,0.14); --inset:rgba(15,23,42,0.03); --primary:#0EA5A0; --primary-rgb:14,165,160; --accent:#F59E0B; --accent-rgb:245,158,11; --danger:#DC2626; --success:#16A34A; --success-rgb:22,163,74; --paper:#0F172A; --slate:#64748B; --slate-dim:#94A3B8; /* Radius scale (single source): xs 8 · sm 12 · md 16 · lg 24 · pill 999. --radius is an alias of md. Hardcoded px radii are snapped to these. */ --radius:16px; --radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px; --shadow-xs:0 1px 2px rgba(15,23,42,0.04); --shadow-sm:0 4px 12px rgba(15,23,42,0.06); --shadow-md:0 12px 32px rgba(15,23,42,0.08); --shadow-lg:0 24px 48px rgba(15,23,42,0.12); --shadow-glow:0 16px 40px rgba(var(--primary-rgb),0.25); --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-fast:.18s; --dur-normal:.28s; --dur-slow:.45s; --topbar-gradient:linear-gradient(to bottom, rgba(250,251,254,0.88), rgba(250,251,254,0)); --ppc-border-width:0px; --ppc-border-color:transparent; --overlay:rgba(15,23,42,0.45); --shadow-primary:rgba(14,165,160,0.28); --hero-canvas-opacity:0.42; --btn-primary-bg:linear-gradient(135deg, #14B8A6 0%, #0EA5A0 48%, #0891B2 100%); --btn-primary-text:#FFFFFF; font-size:16px; } [data-theme="dark"]{ --bg:#081019; --bg-gradient: radial-gradient(ellipse 80% 60% at 12% -8%, rgba(94,234,212,0.08), transparent 55%), radial-gradient(ellipse 65% 50% at 88% 105%, rgba(242,169,59,0.07), transparent 50%); --surface:#111827; --surface-elevated:#151F2E; --card:rgba(255,255,255,0.04); --card-hover:rgba(255,255,255,0.07); --border:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.16); --inset:rgba(255,255,255,0.03); --primary:#5EEAD4; --primary-rgb:94,234,212; --accent:#F2A93B; --accent-rgb:242,169,59; --danger:#EF4444; --success:#22C55E; --success-rgb:34,197,94; --paper:#F5F3EE; --slate:#94A3B8; --slate-dim:#5b6b85; --shadow-xs:0 1px 2px rgba(0,0,0,0.2); --shadow-sm:0 4px 14px rgba(0,0,0,0.22); --shadow-md:0 12px 36px rgba(0,0,0,0.28); --shadow-lg:0 24px 52px rgba(0,0,0,0.35); --shadow-glow:0 16px 44px rgba(var(--primary-rgb),0.22); --topbar-gradient:linear-gradient(to bottom, rgba(8,16,25,0.88), rgba(8,16,25,0)); --overlay:rgba(4,8,13,0.7); --shadow-primary:rgba(94,234,212,0.35); --hero-canvas-opacity:0.52; --btn-primary-bg:linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 52%, #5EEAD4 100%); --btn-primary-text:#06231f; } *{box-sizing:border-box;} html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ /* The browser's default 8px never mattered while every screen scrolled; it does once a screen is exactly one viewport tall (ТЗ 15.1). */ margin:0; background:var(--bg-gradient), var(--bg); background-attachment:fixed; color:var(--paper); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden; } .mono{font-family:'JetBrains Mono',monospace;} /* heading font: Fraunces by default (EN/ES), Geologica when lang=ru */ .hero-title, .flow-title, .brand{ font-family:'Fraunces',serif; font-weight:500; transition:font-family .01s; } body.lang-ru .hero-title, body.lang-ru .flow-title, body.lang-ru .brand, body.lang-ru .gate-logo, body.lang-ru .executor-card h3, body.lang-ru .route-top-title, body.lang-ru .route-intro-title, body.lang-ru .route-card-title, body.lang-ru .legal-page h1, body.lang-kk .hero-title, body.lang-kk .flow-title, body.lang-kk .brand, body.lang-kk .gate-logo, body.lang-kk .executor-card h3, body.lang-kk .route-top-title, body.lang-kk .route-intro-title, body.lang-kk .route-card-title, body.lang-kk .legal-page h1{ font-family:'Geologica',sans-serif; font-weight:600; } .lang-switch{ display:flex; align-items:center; gap:2px; padding:3px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--card); } .lang-btn{ min-width:34px; padding:5px 8px; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--slate); font-size:11px; font-weight:600; letter-spacing:.04em; cursor:pointer; transition:background .15s,color .15s; } .lang-btn:hover{color:var(--paper);} .lang-btn.active{ background:rgba(var(--primary-rgb),.16); color:var(--primary); } a{color:inherit;} button{font-family:inherit; color:inherit;} @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} } /* ---------- shell ---------- */ .screen{display:none; min-height:100vh; width:100%;} .screen.active{ display:block; animation:screenIn var(--dur-normal) var(--ease-out) forwards; } #screen-hero.screen.active{ animation:screenInHero var(--dur-slow) var(--ease-out) forwards; } @keyframes screenIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} } @keyframes screenInHero{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} } .topbar{ position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:20px 32px; padding-top:calc(20px + env(safe-area-inset-top, 0px)); z-index:50; backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); background:var(--topbar-gradient); border-bottom:1px solid rgba(var(--primary-rgb),0.06); } .brand{font-size:1.25rem; letter-spacing:-0.01em;} a.brand{text-decoration:none; color:inherit;} .brand .dot{ color:var(--primary); text-shadow:0 0 20px rgba(var(--primary-rgb),0.45); } .topbar-right{ display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-shrink:0; margin-left:16px; } .topbar-right > *{flex-shrink:0;} .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-xs); color:var(--slate); cursor:pointer; transition:background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .theme-toggle:hover{ border-color:rgba(var(--primary-rgb),0.35); color:var(--paper); background:var(--surface-elevated); box-shadow:var(--shadow-sm); transform:translateY(-1px); } .theme-toggle svg{width:18px; height:18px;} .theme-toggle .icon-sun, .theme-toggle .icon-moon{display:none;} [data-theme="light"] .theme-toggle .icon-moon{display:block;} [data-theme="dark"] .theme-toggle .icon-sun{display:block;} .theme-toggle[hidden]{display:none !important;} .lang-switch{ display:flex; gap:2px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-pill); padding:3px; } .lang-switch button{ background:none; border:none; color:var(--slate); font-size:0.78rem; font-weight:600; padding:6px 12px; border-radius:var(--radius-pill); cursor:pointer; transition:all .2s ease; } .lang-switch button.active{background:var(--paper); color:var(--bg);} .demo-badge{ font-size:0.7rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent); border:1px solid rgba(var(--accent-rgb),0.35); background:rgba(var(--accent-rgb),0.08); padding:5px 11px; border-radius:var(--radius-pill); } /* ---------- hero ---------- */ #screen-hero{position:relative; overflow:hidden;} #screen-hero::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(ellipse 75% 55% at 15% 25%, rgba(var(--primary-rgb),0.14), transparent 55%), radial-gradient(ellipse 65% 50% at 85% 75%, rgba(var(--accent-rgb),0.1), transparent 52%); } .hero{ position:relative; z-index:1; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; width:100%; max-width:1040px; margin:0 auto; padding:calc(116px + env(safe-area-inset-top, 0px)) 20px calc(48px + env(safe-area-inset-bottom, 0px)); box-sizing:border-box; } .hero-main{ display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; max-width:660px; } .hero-discover-wrap{ width:100%; max-width:1000px; } .hero-discover-nav{ display:flex; gap:8px; } .hero-discover-nav-btn{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface-elevated); color:var(--paper); cursor:pointer; box-shadow:var(--shadow-sm); transition:transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) ease, background var(--dur-fast) ease, opacity var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .hero-discover-nav-btn svg{width:17px; height:17px;} .hero-discover-nav-btn:hover:not(:disabled){ border-color:rgba(var(--primary-rgb),0.45); background:rgba(var(--primary-rgb),0.08); box-shadow:var(--shadow-md); transform:translateY(-1px); } .hero-discover-nav-btn:active:not(:disabled){transform:scale(0.94);} .hero-discover-nav-btn:disabled{ opacity:0.35; cursor:default; box-shadow:none; } .hero-discover-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding:0 4px; } .hero-discover-label{ font-size:0.78rem; font-weight:650; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate-dim); } .hero-discover{ display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; padding:4px 2px 14px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; mask-image:linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent); -webkit-mask-image:linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent); } .hero-discover::-webkit-scrollbar{display:none;} .hero-discover-card{ flex:none; width:min(272px, 80vw); scroll-snap-align:start; display:flex; flex-direction:column; text-align:left; cursor:pointer; padding:0; font-family:inherit; color:inherit; border:1px solid var(--border); border-radius:var(--radius-lg, 16px); background:var(--surface-elevated); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) ease, border-color var(--dur-fast) ease; } .hero-discover-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(var(--primary-rgb),0.35); } .hero-discover-card:active{transform:scale(0.98);} .hero-discover-photo{ display:block; width:100%; height:158px; object-fit:cover; background:linear-gradient(135deg, rgba(var(--primary-rgb),0.22), rgba(var(--accent-rgb),0.16)); } .hero-discover-photo--fallback{ display:flex; align-items:center; justify-content:center; color:var(--primary); } .hero-discover-photo--fallback svg{width:32px; height:32px; opacity:.85;} .hero-discover-body{padding:12px 14px 14px;} .hero-discover-name{ font-weight:650; font-size:0.95rem; line-height:1.25; margin-bottom:4px; color:var(--paper); } .hero-discover-meta{ font-size:0.76rem; color:var(--slate); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .hero-quick{ width:100%; margin-top:2px; } .hero-quick-label{ font-size:0.72rem; font-weight:650; letter-spacing:0.07em; text-transform:uppercase; color:var(--slate-dim); margin-bottom:10px; } .hero-quick-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .hero-quick-chip{ border:1px solid var(--border); background:var(--surface); color:var(--paper); border-radius:var(--radius-pill); padding:9px 14px; font-size:0.84rem; font-weight:600; cursor:pointer; font-family:inherit; box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .hero-quick-chip:hover{ border-color:rgba(var(--primary-rgb),0.4); background:rgba(var(--primary-rgb),0.06); box-shadow:var(--shadow-sm); transform:translateY(-1px); } .hero-quick-chip--stay{border-color:rgba(94,234,212,0.25);} .hero-quick-chip--activities{border-color:rgba(242,169,59,0.28);} .hero-quick-chip--food{border-color:rgba(244,114,182,0.25);} .hero-quick-chip--sights{border-color:rgba(147,197,253,0.3);} .hero-trust{ display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; width:100%; } .hero-trust-item{ display:inline-flex; align-items:center; gap:7px; font-size:0.74rem; font-weight:500; color:var(--slate-dim); } .hero-trust-item::before{ content:""; width:4px; height:4px; border-radius:50%; flex-shrink:0; background:var(--slate-dim); } @media (min-width:760px){ .hero-title{font-size:clamp(3rem, 5.2vw, 4.4rem);} } @media (max-width:759px){ .hero-discover-nav{display:none;} } @media (max-width:520px){ .hero{padding-left:16px; padding-right:16px; gap:24px;} .hero-trust{margin-top:2px;} } .hero-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:var(--hero-canvas-opacity); pointer-events:none; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:0.78rem; font-weight:600; letter-spacing:0.04em; color:var(--primary); margin-bottom:22px; padding:8px 16px; border-radius:var(--radius-pill); background:rgba(var(--primary-rgb),0.1); border:1px solid rgba(var(--primary-rgb),0.18); box-shadow:var(--shadow-xs); } .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; flex-shrink:0; background:var(--primary); box-shadow:0 0 10px rgba(var(--primary-rgb),0.55); animation:pulse 2s infinite; } .hero-title{ font-size:clamp(2.4rem, 6vw, 4.6rem); line-height:1.06; letter-spacing:-0.02em; margin:0 0 26px; } .hero-title .line2{ display:block; background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .hero p.sub{ font-size:clamp(1rem, 2.8vw, 1.08rem); line-height:1.6; color:var(--slate); max-width:46ch; margin:0 0 26px; } .hero-ask{ display:flex; align-items:center; gap:8px; width:100%; max-width:580px; margin:0 0 14px; background:var(--surface-elevated); border:1px solid var(--border-strong, var(--border)); border-radius:var(--radius-pill); padding:7px 8px 7px 18px; box-shadow:var(--shadow-sm); transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .hero-ask:focus-within{ border-color:rgba(var(--primary-rgb),0.55); box-shadow:0 0 0 4px rgba(var(--primary-rgb),0.12), var(--shadow-md); } .hero-ask-icon{width:20px; height:20px; color:var(--slate); flex:none;} .hero-ask-input{ flex:1; min-width:0; border:none; background:none; outline:none; font-family:inherit; font-size:0.98rem; color:var(--paper); padding:8px 0; } .hero-ask-input::placeholder{color:var(--slate-dim);} .hero-ask-btn{ flex:none; display:inline-flex; align-items:center; gap:8px; background:var(--btn-primary-bg); color:var(--btn-primary-text); border:none; border-radius:var(--radius-pill); padding:11px 20px; min-height:44px; font-family:inherit; font-size:0.94rem; font-weight:600; cursor:pointer; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease; } .hero-ask-btn svg{width:16px; height:16px;} .hero-ask-btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-glow);} .hero-ask-btn:active{transform:scale(0.97);} @media (max-width:520px){ .hero-ask{flex-wrap:wrap; border-radius:20px; padding:12px 14px;} .hero-ask-input{flex:1 1 auto; padding:4px 0;} .hero-ask-btn{flex:1 1 100%; justify-content:center; margin-top:4px;} } .btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--btn-primary-bg); color:var(--btn-primary-text); border:none; padding:16px 30px; min-height:48px; border-radius:var(--radius-pill); font-size:0.98rem; font-weight:600; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) ease; } .btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-glow); } .btn-primary:active:not(:disabled){transform:scale(0.98);} .btn-primary svg{width:16px; height:16px;} .hero-role-ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; width:100%; max-width:320px; } .hero-role-ctas .btn-primary{width:100%;} .hero-role-ctas .btn-secondary{flex:none;} .hero-secondary-link{ display:block; margin:18px auto 0; background:none; border:none; padding:0; font-size:0.92rem; font-weight:500; color:var(--slate); cursor:pointer; text-decoration:underline; text-underline-offset:3px; transition:color .2s ease; } .hero-secondary-link:hover{color:var(--paper);} /* ticker */ .ticker-wrap{ position:relative; margin-top:64px; width:100%; max-width:760px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); overflow:hidden; } .ticker-label{ display:flex; align-items:center; gap:8px; font-size:0.72rem; color:var(--slate-dim); text-transform:uppercase; letter-spacing:0.08em; font-weight:600; padding:14px 20px 0; } .ticker-label .pulse{ width:6px; height:6px; border-radius:50%; background:var(--primary); animation:pulse 2s infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),0.5);} 70%{box-shadow:0 0 0 8px rgba(var(--primary-rgb),0);} 100%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),0);} } .ticker-list{display:flex; flex-direction:column; padding:10px 0 16px; min-height:190px;} .ticker-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 20px; font-size:0.86rem; opacity:0; transform:translateY(6px); animation:rowIn .5s ease forwards; } @keyframes rowIn{ to{opacity:1; transform:translateY(0);} } .ticker-row .req-flag{font-size:1rem; flex-shrink:0;} .ticker-row .req-text{ color:var(--paper); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; } .ticker-row .req-cat{ color:var(--slate-dim); font-size:0.68rem; border:1px solid var(--border); border-radius:5px; padding:1px 6px; text-transform:uppercase; flex-shrink:0; } /* ---------- generic flow screen ---------- */ .flow{ min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:120px 24px 80px; } .flow-inner{width:100%; max-width:760px;} .flow-inner.wide{max-width:1080px;} .flow-header{margin-bottom:36px; text-align:left;} .flow-eyebrow{ font-size:0.74rem; font-weight:600; color:var(--slate-dim); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; } .flow-title{font-size:1.9rem; letter-spacing:-0.01em; margin-bottom:10px;} .flow-sub{color:var(--slate); font-size:0.96rem; line-height:1.5; max-width:52ch;} .inbox-sub{margin:0 0 24px;} .back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--slate); font-size:0.85rem; cursor:pointer; margin-bottom:22px; background:none; border:none; padding:0; } .back-link:hover{color:var(--paper);} .back-link[hidden]{display:none;} .category-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } @media (max-width:720px){ .category-grid{grid-template-columns:repeat(2, 1fr);} } @media (max-width:460px){ .category-grid{grid-template-columns:1fr;} } /* Four tourist topics (TZ 10.1) sit as a 2x2 block, not 3+1. */ #topic-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:620px;} @media (max-width:460px){ #topic-grid{grid-template-columns:1fr;} } .city-dept-card{ margin-bottom:20px; padding:16px 18px; border-radius:var(--radius-md); border:1px solid rgba(var(--primary-rgb),0.25); background:rgba(var(--primary-rgb),0.06); } .city-dept-label{ font-size:0.78rem; color:var(--slate-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; } .city-dept-name{ font-size:1.05rem; font-weight:700; color:var(--paper); } .city-innov-benefits{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; } .city-innov-benefit{ padding:14px 16px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--card); } .city-innov-benefit strong{ display:block; font-size:0.94rem; margin-bottom:4px; color:var(--paper); } .city-innov-benefit span{ font-size:0.86rem; color:var(--slate-dim); line-height:1.45; } .city-idea-field{display:flex; flex-direction:column; gap:8px; margin-bottom:22px;} .city-idea-field > span{font-size:0.84rem; font-weight:600; color:var(--slate);} .city-idea-textarea{ width:100%; min-height:110px; padding:14px 16px; border-radius:var(--radius-md); border:1px solid var(--border-strong); background:var(--card); color:var(--paper); font-family:inherit; font-size:16px; line-height:1.5; resize:vertical; } .city-idea-textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.12); } .city-officer-card{ margin:0 0 20px; padding:16px 18px; border-radius:var(--radius-md); border:1px solid var(--border-strong); background:var(--card); } .city-officer-card--success{ margin:20px auto 0; max-width:360px; text-align:left; } .city-routing-label{ font-size:0.78rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--slate-dim); margin-bottom:12px; } .city-officer-row{ display:flex; align-items:flex-start; gap:14px; } .city-officer-avatar{ flex-shrink:0; width:48px; height:48px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:0.9rem; font-weight:700; } .city-officer-name{ font-size:1rem; font-weight:700; color:var(--paper); margin-bottom:2px; } .city-officer-title{ font-size:0.86rem; color:var(--slate); margin-bottom:4px; } .city-officer-dept{ font-size:0.84rem; color:var(--primary); font-weight:600; line-height:1.35; } .city-officer-topic{ margin-top:6px; font-size:0.8rem; color:var(--slate-dim); } .city-countdown-wrap{ margin:28px auto 0; max-width:320px; padding:20px 18px; border-radius:var(--radius-md); border:1px solid rgba(var(--primary-rgb),0.22); background:rgba(var(--primary-rgb),0.06); } .city-countdown-label{ font-size:0.82rem; color:var(--slate-dim); margin-bottom:8px; } .city-countdown{ font-size:2rem; font-weight:700; letter-spacing:0.06em; color:var(--primary); font-variant-numeric:tabular-nums; } .city-countdown-note{ margin:10px 0 0; font-size:0.82rem; color:var(--slate-dim); line-height:1.45; } .category-card{ position:relative; text-align:left; border:1px solid var(--border); background:var(--surface-elevated); border-radius:var(--radius-md); padding:22px; cursor:pointer; box-shadow:var(--shadow-xs); opacity:0; animation:cardIn var(--dur-normal) var(--ease-out) forwards; transition:border-color var(--dur-normal) ease, transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) ease, background var(--dur-normal) ease; } .category-grid .category-card:nth-child(1){animation-delay:.05s;} .category-grid .category-card:nth-child(2){animation-delay:.1s;} .category-grid .category-card:nth-child(3){animation-delay:.15s;} .category-grid .category-card:nth-child(4){animation-delay:.2s;} .category-grid .category-card:nth-child(5){animation-delay:.25s;} .category-grid .category-card:nth-child(6){animation-delay:.3s;} @keyframes cardIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} } .category-card:hover{ transform:translateY(-3px); border-color:rgba(var(--primary-rgb),0.35); background:var(--surface); box-shadow:var(--shadow-md); } .category-card.inactive{ animation:cardInInactive var(--dur-normal) var(--ease-out) forwards; } .category-card.inactive:hover{transform:none; box-shadow:var(--shadow-xs);} @keyframes cardInInactive{ from{opacity:0; transform:translateY(10px);} to{opacity:0.55; transform:none;} } .category-icon{ width:44px; height:44px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-bottom:16px; background:rgba(var(--primary-rgb),0.1); color:var(--primary); } #topic-grid .category-card:nth-child(1) .category-icon{background:rgba(var(--primary-rgb),0.12); color:var(--primary);} #topic-grid .category-card:nth-child(2) .category-icon{background:rgba(var(--accent-rgb),0.14); color:var(--accent);} #topic-grid .category-card:nth-child(3) .category-icon{background:rgba(59,130,246,0.12); color:#3B82F6;} #topic-grid .category-card:nth-child(4) .category-icon{background:rgba(var(--success-rgb),0.12); color:var(--success);} [data-theme="dark"] #topic-grid .category-card:nth-child(3) .category-icon{color:#93C5FD;} .category-icon svg{width:19px; height:19px;} .category-label{font-weight:600; font-size:1.02rem; margin-bottom:4px;} .category-desc{color:var(--slate-dim); font-size:0.82rem; line-height:1.4;} .category-status{ position:absolute; top:18px; right:18px; font-size:0.64rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; padding:3px 9px; border-radius:var(--radius-pill); } .category-status.live{color:var(--success); background:rgba(var(--success-rgb),0.1); border:1px solid rgba(var(--success-rgb),0.3);} .category-status.test{color:#93C5FD; background:rgba(96,165,250,0.12); border:1px solid rgba(96,165,250,0.35);} .category-status.soon{color:var(--slate-dim); background:var(--card); border:1px solid var(--border);} /* ---------- describe request ---------- */ .req-box{ border:1px solid var(--border); background:var(--surface); border-radius:20px; padding:8px 10px 8px 14px; box-shadow:var(--shadow-md); } .req-input-row{ display:flex; align-items:flex-end; gap:8px; } .req-textarea{ flex:1; min-width:0; width:100%; min-height:24px; max-height:120px; resize:none; background:none; border:none; outline:none; color:var(--paper); font-size:16px; font-family:inherit; line-height:1.45; overflow-y:auto; padding:6px 0; field-sizing:content; } .req-textarea::placeholder{color:var(--slate-dim);} .req-send-btn{ flex-shrink:0; width:40px; height:40px; margin-bottom:1px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--btn-primary-bg); color:var(--btn-primary-text); border:none; cursor:pointer; transition:opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease; box-shadow:var(--shadow-sm); } .req-send-btn svg{width:18px; height:18px;} .req-send-btn:hover:not(:disabled){transform:translateY(-1px); box-shadow:var(--shadow-glow);} .req-send-btn:active:not(:disabled){transform:translateY(0);} .req-send-btn:disabled{opacity:0.3; cursor:not-allowed; box-shadow:none;} .dialog-proceed-wrap{ align-self:flex-start; margin-top:12px; padding-top:4px; animation:chatIn .35s ease forwards; } .dialog-proceed-slot{ margin-bottom:10px; } .dialog-proceed-slot[hidden]{display:none !important;} .dialog-proceed-slot .dialog-proceed-wrap{ margin-top:0; padding-top:0; align-self:stretch; } .dialog-proceed-slot .dialog-proceed-btn{ width:100%; justify-content:center; } .dialog-proceed-btn{ width:auto; display:inline-flex; justify-content:center; padding:12px 20px; font-size:0.9rem; } .buddy-trip-offer-wrap{ align-self:stretch; margin-top:12px; animation:chatIn .35s ease forwards; } .buddy-trip-offer{ border:1px solid rgba(var(--primary-rgb),0.28); border-radius:var(--radius-md); padding:14px 14px 12px; background:linear-gradient(145deg, rgba(var(--primary-rgb),0.08), rgba(var(--accent-rgb),0.05)); } .buddy-trip-offer-badge{ display:inline-block; margin-bottom:8px; padding:3px 10px; border-radius:var(--radius-pill); font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--primary); background:rgba(var(--primary-rgb),0.12); border:1px solid rgba(var(--primary-rgb),0.22); } .buddy-trip-offer-title{font-size:0.96rem; font-weight:650; color:var(--paper); margin-bottom:4px;} .buddy-trip-offer-meta{font-size:0.8rem; color:var(--slate); margin-bottom:10px;} .buddy-trip-offer-prices{display:flex; flex-direction:column; gap:2px; margin-bottom:10px;} .buddy-trip-price-total{font-size:0.94rem; font-weight:650; color:var(--paper);} .buddy-trip-price-seat{font-size:0.8rem; color:var(--slate-dim);} .buddy-trip-offer-desc{margin:0 0 12px; font-size:0.84rem; line-height:1.45; color:var(--slate-dim);} .buddy-trip-offer-actions{display:flex; flex-wrap:wrap; gap:8px;} .buddy-trip-offer-actions .btn-primary, .buddy-trip-offer-actions .btn-secondary{ flex:none; width:auto; padding:10px 16px; font-size:0.86rem; } .city-pill-soon{ font-size:0.7rem; padding:2px 8px; border-radius:var(--radius-pill); border:1px solid var(--border-strong); color:var(--slate-dim); } .examples-label{ font-size:0.74rem; font-weight:600; color:var(--slate-dim); text-transform:uppercase; letter-spacing:0.08em; margin:26px 0 12px; } .examples-row{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:8px;} .example-chip{ border:1px solid var(--border); background:var(--surface); color:var(--slate); border-radius:var(--radius-pill); padding:9px 16px; font-size:0.86rem; cursor:pointer; box-shadow:var(--shadow-xs); transition:all var(--dur-fast) ease; text-align:left; } .example-chip:hover{ border-color:rgba(var(--primary-rgb),0.4); color:var(--primary); background:rgba(var(--primary-rgb),0.06); box-shadow:var(--shadow-sm); } .send-row{display:flex; justify-content:flex-end; margin-top:26px;} /* Class rules with an explicit display beat [hidden] — spell the hide out. */ .send-row[hidden]{display:none;} .btn-primary:disabled{opacity:0.35; cursor:not-allowed; transform:none !important; box-shadow:none !important;} /* ---------- AI understanding ---------- */ .understanding-wrap{ min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:104px 24px 40px; text-align:center; box-sizing:border-box; } .analyzing-eyebrow{ font-size:0.8rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate-dim); margin-bottom:24px; } .checklist{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; margin:0 auto; } .check-line{ display:flex; align-items:center; gap:10px; font-size:0.98rem; color:var(--paper); opacity:0; transform:translateY(6px); animation:checkIn .35s ease forwards; } @keyframes checkIn{ to{opacity:1; transform:translateY(0);} } .check-line .check-icon{ width:20px; height:20px; border-radius:50%; flex-shrink:0; background:rgba(var(--primary-rgb),0.14); color:var(--primary); display:flex; align-items:center; justify-content:center; } .check-line .check-icon svg{width:11px; height:11px;} .understanding-card{ margin-top:16px; width:100%; max-width:480px; border:1px solid var(--border-strong); background:var(--surface-elevated); border-radius:var(--radius-md); padding:26px 28px; text-align:left; opacity:0; transform:translateY(14px) scale(0.98); transition:opacity var(--dur-slow) ease, transform var(--dur-slow) var(--ease-out); box-sizing:border-box; box-shadow:var(--shadow-md); } .understanding-card.show{opacity:1; transform:translateY(0) scale(1);} .understanding-title{ font-size:1.15rem; font-weight:600; margin-bottom:20px; display:flex; align-items:center; gap:8px; } .understanding-title::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 8px 1px rgba(var(--success-rgb),0.6); } .field-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:11px 0; border-bottom:1px solid var(--border); } .field-row:last-child{border-bottom:none;} .field-label{font-size:0.78rem; color:var(--slate-dim); flex-shrink:0; padding-top:2px;} .field-value{font-size:0.92rem; color:var(--paper); text-align:right; font-weight:500;} .field-tags{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end;} .field-tag{ font-size:0.76rem; background:rgba(var(--primary-rgb),0.1); color:var(--primary); border:1px solid rgba(var(--primary-rgb),0.25); border-radius:var(--radius-xs); padding:3px 9px; } .understanding-actions{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap;} .understanding-actions:has(.buddy-sharing-pick-label){ flex-direction:column; align-items:stretch; gap:10px; } .understanding-actions:has(.buddy-sharing-pick-label) .btn-primary, .understanding-actions:has(.buddy-sharing-pick-label) .btn-secondary{ flex:none; width:100%; min-height:48px; } .btn-secondary{ flex:1; border:1px solid var(--border-strong); background:var(--surface); color:var(--paper); border-radius:var(--radius-pill); padding:13px 20px; min-height:48px; font-size:0.9rem; font-weight:600; cursor:pointer; box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .btn-secondary:hover{ border-color:rgba(var(--primary-rgb),0.35); background:var(--surface-elevated); box-shadow:var(--shadow-sm); transform:translateY(-1px); } .btn-secondary:active{transform:scale(0.98);} .understanding-card .btn-primary{flex:1.4; justify-content:center;} /* Phone: card must not overflow sideways (price nowrap + long labels pushed text off-screen — "съезжает"), and the wrap scrolls inside the viewport instead of leaving a dead strip under a short card. */ @media (max-width:640px){ #screen-understanding.screen{min-height:100dvh;} #screen-understanding .understanding-wrap{ min-height:100dvh; max-height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:88px 14px calc(36px + env(safe-area-inset-bottom, 0px)); justify-content:flex-start; } #screen-understanding .understanding-card{ padding:20px 18px; margin-top:12px; } #screen-understanding .u-logi-card{ gap:12px; padding:14px 14px 14px 12px; } #screen-understanding .u-logi-chev{display:none;} #screen-understanding .u-logi-price{font-size:0.92rem;} #screen-understanding .u-logi-unit{font-size:0.75rem;} #screen-understanding .understanding-actions{ flex-direction:column; } #screen-understanding .understanding-card .btn-primary, #screen-understanding .understanding-actions .btn-secondary{ flex:none; width:100%; } } .flow-inner.narrow{max-width:480px;} /* ---------- card questions ---------- */ .q-subtitle{ margin:-6px 0 14px; color:var(--slate); font-size:0.92rem; line-height:1.45; } .qdots{display:flex; gap:6px; margin:18px 0 30px;} .qdots span{width:24px; height:4px; border-radius:2px; background:var(--border);} .qdots span.done{background:var(--primary);} .qdots span.now{background:var(--accent);} .qcard{ border:1px solid var(--border-strong); background:var(--surface-elevated); border-radius:var(--radius-md); padding:28px; box-shadow:var(--shadow-sm); opacity:0; transform:translateY(10px); animation:qcardIn var(--dur-slow) var(--ease-out) forwards; } @keyframes qcardIn{ to{opacity:1; transform:translateY(0);} } .qcard-title{font-size:1.3rem; font-weight:600; margin-bottom:20px;} .qcard-options{display:flex; flex-direction:column; gap:10px;} .qopt-btn{ pointer-events:auto; text-align:left; width:100%; border:1px solid var(--border); background:var(--surface); color:var(--paper); border-radius:var(--radius-sm); padding:15px 18px; font-size:0.98rem; cursor:pointer; box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); min-height:48px; display:flex; align-items:center; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .qopt-btn:hover{ border-color:rgba(var(--primary-rgb),0.4); background:rgba(var(--primary-rgb),0.06); color:var(--primary); box-shadow:var(--shadow-sm); transform:translateY(-1px); } .qcard-budget-row{display:flex; flex-wrap:wrap; gap:9px;} .qcard-budget-row .qopt-btn{ width:auto; flex:1 1 auto; min-width:120px; text-align:center; justify-content:center; border-radius:var(--radius-pill); } .qcard-field{margin-bottom:16px;} .qcard-input{ width:100%; font-size:16px; padding:14px 16px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--card); color:var(--paper); font-family:inherit; } .qcard-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(var(--primary-rgb),0.15); } .qcard-continue{margin-top:4px; width:100%;} /* ---------- AI ready transition ---------- */ .ready-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; } .ready-dot{ width:14px; height:14px; border-radius:50%; background:var(--primary); box-shadow:0 0 24px 4px rgba(var(--primary-rgb),0.5); margin-bottom:22px; animation:readyPulse 1.2s ease-in-out infinite; } @keyframes readyPulse{ 0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.5); opacity:0.6;} } .ready-msg{font-size:1.2rem; color:var(--paper); max-width:36ch;} /* ---------- matching ---------- */ .matching-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:0.6; pointer-events:none; } #screen-matching .flow{position:relative; z-index:1;} .matching-wrap{text-align:center; padding-top:60px;} .matching-eyebrow{ font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate-dim); margin-bottom:10px; } .mstep-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; max-width:560px; margin:22px auto 30px; } .mstep-chip{ font-size:0.74rem; color:var(--slate-dim); border:1px solid var(--border); border-radius:var(--radius-pill); padding:5px 12px; opacity:0; transform:translateY(4px); animation:rowIn .35s ease forwards; } .mstep-chip.done{color:var(--primary); border-color:rgba(var(--primary-rgb),0.35); background:rgba(var(--primary-rgb),0.06);} .match-stats{display:flex; justify-content:center; gap:44px; margin-top:8px;} .match-stat-num{font-family:'JetBrains Mono',monospace; font-size:2rem; color:var(--paper);} .match-stat-label{font-size:0.76rem; color:var(--slate-dim); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;} .matching-log{ margin:32px auto 0; max-width:440px; text-align:left; min-height:150px; display:flex; flex-direction:column; gap:7px; } .log-line{ display:flex; align-items:baseline; gap:9px; font-size:0.8rem; color:var(--slate); opacity:0; transform:translateY(4px); animation:rowIn .45s ease forwards; } .log-line .log-dot{width:5px; height:5px; border-radius:50%; background:var(--slate-dim); flex-shrink:0;} .log-line.log-hit{color:var(--primary); font-weight:600;} .log-line.log-hit .log-dot{background:var(--primary); box-shadow:0 0 6px 1px rgba(var(--primary-rgb),0.6);} .log-line.log-miss{color:var(--danger); opacity:0.7;} .log-line.log-miss .log-dot{background:var(--danger);} /* ---------- provider inbox (phone mock) ---------- */ .phone-mock{ border:1px solid var(--border-strong); background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; } .phone-header{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border); background:var(--inset); } .phone-avatar{ width:36px; height:36px; border-radius:50%; background:var(--primary); color:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; } .phone-name{font-weight:600; font-size:0.94rem;} .phone-channel{font-size:0.74rem; color:var(--slate-dim);} .phone-body{padding:18px; display:flex; flex-direction:column; gap:12px; min-height:260px;} .phone-bubble{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:13px 15px; font-size:0.92rem; line-height:1.5; opacity:0; transform:translateY(6px); animation:rowIn .4s ease forwards; } .phone-bubble .pb-row{display:flex; justify-content:space-between; gap:10px; padding:3px 0; font-size:0.85rem;} .phone-bubble .pb-label{color:var(--slate-dim);} .phone-bubble .phone-msg-title{font-weight:600; margin-bottom:8px;} .phone-bubble .phone-msg-line{font-size:0.88rem; line-height:1.45; color:var(--slate);} .phone-bubble .phone-msg-line + .phone-msg-line{margin-top:4px;} .phone-bubble .phone-msg-id{margin-top:10px; font-size:0.78rem; color:var(--slate-dim);} .phone-actions{display:flex; flex-wrap:wrap; gap:8px; opacity:0; transform:translateY(6px); animation:rowIn .4s ease forwards;} .phone-actions button.phone-btn{cursor:pointer;} .phone-btn{ border-radius:var(--radius-pill); padding:9px 16px; font-size:0.84rem; cursor:default; border:1px solid var(--border); } .phone-btn.accept{background:rgba(var(--success-rgb),0.12); color:var(--success); border-color:rgba(var(--success-rgb),0.35);} .phone-btn.decline{background:none; color:var(--slate);} .phone-btn.price{background:none; color:var(--slate);} .phone-btn.tapped{box-shadow:0 0 0 2px rgba(var(--primary-rgb),0.4);} .phone-bubble.highlight{border-color:var(--primary); box-shadow:0 0 0 2px rgba(var(--primary-rgb),0.4); transition:border-color .3s ease, box-shadow .3s ease;} .phone-status{ font-size:0.86rem; color:var(--primary); font-weight:600; display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(6px); animation:rowIn .4s ease forwards; } .phone-status::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--primary);} .phone-inline-form-wrap{display:flex; flex-direction:column; gap:10px;} .phone-form-title{font-weight:600; font-size:0.88rem;} .phone-field{display:flex; flex-direction:column; gap:5px; font-size:0.78rem; color:var(--slate-dim);} .phone-input{ width:100%; box-sizing:border-box; border:1px solid var(--border); background:var(--inset); border-radius:var(--radius-sm); padding:10px 12px; font-size:0.88rem; color:var(--paper); } .phone-input.mono{font-family:var(--font-mono, ui-monospace, monospace);} .phone-send-offer{align-self:flex-start; margin-top:2px; cursor:pointer;} .phone-body .inbox-flow-continue{ width:100%; justify-content:center; padding:12px 20px; font-size:0.88rem; } /* ---------- offers ---------- */ .sort-row{display:flex; gap:8px; margin-bottom:20px;} .sort-btn{ border:1px solid var(--border); background:none; color:var(--slate); border-radius:var(--radius-pill); padding:8px 16px; font-size:0.82rem; cursor:pointer; transition:all .2s ease; } .sort-btn.active{background:var(--paper); color:var(--bg); border-color:var(--paper);} .offer-card{ border:1px solid var(--border); background:var(--surface-elevated); border-radius:var(--radius-md); padding:20px; display:grid; grid-template-columns:48px 1fr; column-gap:16px; row-gap:8px; align-items:start; margin-bottom:12px; box-shadow:var(--shadow-sm); opacity:0; transform:translateY(10px); animation:offerIn var(--dur-slow) var(--ease-out) forwards; transition:box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) ease; } .offer-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:rgba(var(--primary-rgb),0.25); } @keyframes offerIn{ to{opacity:1; transform:translateY(0);} } .offer-avatar{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem; color:#fff; flex-shrink:0; grid-row:1 / span 2; align-self:start; box-shadow:0 0 0 3px var(--surface), 0 0 0 4px rgba(var(--primary-rgb),0.2); } .offer-body{flex:1; min-width:0; grid-column:2;} .offer-name-row{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; flex-wrap:wrap;} .offer-name{font-weight:600; font-size:1rem;} .offer-meta-badges{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end;} .offer-rating{font-size:0.78rem; color:var(--accent); display:flex; align-items:center; gap:3px;} .offer-badge{ font-size:0.68rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:3px 8px; border-radius:var(--radius-pill); white-space:nowrap; } .offer-badge-alt{ color:var(--bg); background:var(--accent); } .offer-badge-official{ color:var(--bg); background:var(--accent); } .offer-badge-match{ color:var(--success); background:rgba(var(--success-rgb),0.14); } .offer-tagline{color:var(--slate-dim); font-size:0.84rem; margin-top:3px; line-height:1.45;} .offer-match-note{ display:inline-block; margin-top:5px; font-size:0.78rem; font-weight:600; color:var(--accent); background:rgba(217,119,6,0.10); border-radius:var(--radius-xs); padding:2px 8px; } .offer-comment{ margin-top:6px; padding-left:9px; border-left:2px solid rgba(var(--primary-rgb),0.4); font-size:0.83rem; font-style:italic; color:var(--slate); line-height:1.45; } .offer-meta{font-size:0.74rem; color:var(--slate-dim); margin-top:6px;} .offer-right{ grid-column:1 / -1; width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:4px; padding-top:14px; border-top:1px solid var(--border); text-align:left; } .offer-price{ font-family:'JetBrains Mono',monospace; font-size:1.05rem; font-weight:600; color:var(--accent); line-height:1.3; } .offer-select-btn{ margin-top:0; margin-left:auto; border:1px solid var(--border); background:none; color:var(--paper); border-radius:var(--radius-pill); padding:8px 18px; font-size:0.82rem; cursor:pointer; transition:all .2s ease; flex-shrink:0; } .offer-select-btn:hover{background:var(--paper); color:var(--bg); border-color:var(--paper);} .offers-collect-panel{ display:flex; align-items:center; gap:16px; margin:0 0 16px; padding:16px 18px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--inset); } .offers-collect-body{flex:1; min-width:0;} .offers-collect-title{ font-size:0.92rem; font-weight:600; color:var(--paper); line-height:1.35; } .offers-collect-timer{ margin-top:6px; font-size:1.35rem; color:var(--primary); letter-spacing:.06em; } .offers-collect-timer[hidden]{display:none !important;} .offers-radar{ position:relative; width:120px; height:120px; flex-shrink:0; color:var(--primary); } .offers-radar-svg{width:100%; height:100%; display:block;} .offers-radar-sweep{ transform-origin:60px 60px; animation:radarSweep 4s linear infinite; } @keyframes radarSweep{to{transform:rotate(360deg);}} .offers-radar-dots{ position:absolute; inset:0; pointer-events:none; } .offers-radar-dot{ position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--slate-dim); opacity:0.35; transition:opacity .35s ease, transform .35s ease, background .35s ease; } .offers-radar-dot.active{ opacity:1; background:var(--primary); box-shadow:0 0 10px rgba(var(--primary-rgb),0.55); transform:scale(1.15); } .offer-hold-chip{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:5px 10px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--card); font-size:0.72rem; color:var(--slate); } .offer-hold-chip svg{width:13px; height:13px; flex-shrink:0;} .offer-hold-chip.warn{ border-color:var(--accent); color:var(--accent); background:rgba(242,169,59,0.08); } .offer-hold-chip.expired{ border-color:var(--border); color:var(--slate-dim); } .offer-card-expired{opacity:.55;} .offer-card-expired .offer-select-btn{ opacity:.45; pointer-events:none; cursor:not-allowed; } @media (prefers-reduced-motion: reduce){ .offers-radar-sweep{animation:none !important;} .offers-radar-dot{transition:none !important;} } @media (max-width:640px){ .offer-card{ grid-template-columns:44px 1fr; column-gap:12px; row-gap:6px; padding:14px 16px; } .offer-avatar{ width:44px; height:44px; font-size:0.95rem; } .offer-name{font-size:0.95rem;} .offer-tagline{font-size:0.86rem; margin-top:4px;} .offer-meta{margin-top:4px;} .offer-right{ gap:12px; margin-top:2px; padding-top:10px; } .offer-price{font-size:1rem;} } /* ---------- Reusable 4:3 swipeable photo strip on cards ---------- */ /* Полоса скроллится по X (scroll-snap, без библиотек); родитель с overflow:hidden и радиусом сам скругляет верхние углы. Точки — оверлей поверх (не скроллятся). */ .card-photos{ position:relative; aspect-ratio:4 / 3; overflow:hidden; background:var(--inset); } .card-photos-track{ position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; } .card-photos-track::-webkit-scrollbar{display:none;} .card-photo{ flex:0 0 100%; height:100%; scroll-snap-align:center; scroll-snap-stop:always; } .card-photo img, .card-photo-img{ width:100%; height:100%; object-fit:cover; display:block; } /* Заглушка (нет фото / битая картинка) — лёгкая градиентная плитка с line-иконкой. */ .card-photo--ph, .card-photo-img.img-fallback{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--cp-tint,var(--primary)); background:var(--inset); background:linear-gradient(135deg, color-mix(in srgb, var(--cp-tint,#0EA5A0) 20%, var(--surface)), color-mix(in srgb, var(--cp-tint,#0EA5A0) 6%, var(--surface))); } .card-photo--ph svg, .card-photo-img.img-fallback svg{ width:34px; height:34px; opacity:.55; } .card-photos-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:5px; pointer-events:none; z-index:2; } .card-photos-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6); box-shadow:0 1px 3px rgba(0,0,0,.4); transition:width .2s ease, background .2s ease; } .card-photos-dot.active{ width:16px; border-radius:3px; background:#fff; } /* Offer/ready card → фото-топ медиа-карточка (когда полоса присутствует). */ .offer-card:has(.card-photos){ grid-template-columns:1fr; padding:0; overflow:hidden; flex-shrink:0; /* карточка-медиа выше — не даём flex-родителю её сжать */ } .offer-card > .card-photos{ grid-column:1 / -1; } .offer-card:has(.card-photos) .offer-body{ grid-column:1 / -1; padding:14px 18px 0; } .offer-card:has(.card-photos) .offer-right{ grid-column:1 / -1; margin-top:10px; padding:12px 18px 16px; } @media (max-width:640px){ .offer-card:has(.card-photos) .offer-body{ padding:12px 16px 0; } .offer-card:has(.card-photos) .offer-right{ padding:12px 16px 14px; } } /* Hotel picker row → вертикальная медиа-карточка; «i» плавает поверх фото. */ .route-pick-card{ position:relative; } /* Список — flex-column с overflow-y:auto → карточки сжимались бы (flex-shrink:1) и обрезались overflow:hidden. Медиа-карточка выше, поэтому фиксируем размер. */ .route-pick-card:has(.card-photos){ display:block; padding:0; overflow:hidden; flex:0 0 auto; } .route-pick-card:has(.card-photos) .route-pick-card-body{ padding:12px 14px 14px; } .route-pick-card:has(.card-photos) .route-pick-info{ position:absolute; top:10px; right:10px; width:30px; height:30px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.92); color:var(--paper); box-shadow:0 2px 6px rgba(0,0,0,.18); z-index:2; } /* ---------- Booking-style stay detail (amenities / included / nearby) ---------- */ .stay-detail{ display:block; } .stay-detail .card-photos{ border-radius:0; } .stay-detail-body{ padding:16px 20px 8px; } .stay-detail-meta{ color:var(--slate); font-size:.9rem; margin:10px 0 0; } .stay-detail-note{ color:var(--slate-dim); font-size:.88rem; line-height:1.45; margin:6px 0 0; } .stay-sect{ margin-top:20px; } .stay-sect-title{ font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--slate); margin:0 0 12px; } .stay-amenities{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; } .stay-amenity{ display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--paper); min-width:0; } .stay-amenity > span:last-child{ min-width:0; } .stay-amenity-ico{ width:24px; height:24px; flex:0 0 auto; color:var(--primary); display:flex; align-items:center; justify-content:center; } .stay-amenity-ico svg{ width:21px; height:21px; } .stay-included{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; } .stay-included li{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--paper); } .stay-inc-ico{ width:20px; height:20px; flex:0 0 auto; color:var(--success); display:flex; align-items:center; justify-content:center; } .stay-inc-ico svg{ width:18px; height:18px; } .stay-nearby{ list-style:none; margin:0; padding:0; } .stay-near-item{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); font-size:.92rem; } .stay-near-item:last-child{ border-bottom:0; } .stay-near-ico{ width:20px; height:20px; flex:0 0 auto; color:var(--primary); display:flex; align-items:center; justify-content:center; } .stay-near-ico svg{ width:18px; height:18px; } .stay-near-name{ flex:1; min-width:0; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .stay-near-walk{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; color:var(--slate); font-size:.85rem; white-space:nowrap; } .stay-near-walk svg{ width:15px; height:15px; } /* Секции внутри модалки места/отеля (pm-landing уже даёт горизонтальный padding). */ .pm-landing .stay-sect{ margin-top:22px; } /* Бейджи топ-удобств на карточках размещения (краткий предпросмотр). */ .stay-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .stay-badge{ display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:600; color:var(--slate); background:var(--inset); border:1px solid var(--border); padding:3px 8px; border-radius:var(--radius-pill); white-space:nowrap; } .stay-badge svg{ width:14px; height:14px; color:var(--primary); flex:0 0 auto; } /* Подробное описание услуги (строки ключ→значение) в модалке оффера. */ .offer-detail-rows{ display:flex; flex-direction:column; } .offer-detail-row{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--border); font-size:.9rem; } .offer-detail-row:last-child{ border-bottom:0; } .offer-detail-k{ color:var(--slate); flex:0 0 auto; } .offer-detail-v{ color:var(--paper); text-align:right; min-width:0; } /* ---------- SLA ---------- */ .sla-timeline{display:flex; flex-direction:column; gap:0; margin:8px 0 26px;} .sla-step{display:flex; gap:14px; position:relative; padding-bottom:26px;} .sla-step:last-child{padding-bottom:0;} .sla-step-dot{ width:22px; height:22px; border-radius:50%; flex-shrink:0; background:var(--card); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; z-index:1; } .sla-step-dot svg{width:11px; height:11px;} .sla-step::after{ content:""; position:absolute; left:10.5px; top:22px; bottom:0; width:1px; background:var(--border); } .sla-step:last-child::after{display:none;} .sla-step.done .sla-step-dot{ background:rgba(var(--success-rgb),0.15); border-color:var(--success); color:var(--success); box-shadow:0 0 12px rgba(var(--success-rgb),0.25); } .sla-step.now .sla-step-dot{ background:rgba(var(--accent-rgb),0.18); border-color:var(--accent); color:var(--accent); box-shadow:0 0 14px rgba(var(--accent-rgb),0.3); } .sla-step-label{font-size:0.96rem; padding-top:1px;} .sla-step.done .sla-step-label{color:var(--paper);} .sla-step.now .sla-step-label{color:var(--accent); font-weight:600;} .sla-step:not(.done):not(.now) .sla-step-label{color:var(--slate-dim);} .sla-note{color:var(--slate); font-size:0.86rem; line-height:1.5;} /* post-match question */ .postmatch-card{ border:1px solid rgba(var(--accent-rgb),0.35); background:var(--card); border-radius:var(--radius); padding:16px 18px; margin:0 0 24px; opacity:0; transform:translateY(6px); animation:rowIn .4s ease forwards; } .postmatch-from{ font-size:0.74rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; } .postmatch-q{font-size:0.98rem; line-height:1.5; margin-bottom:14px;} .postmatch-actions{display:flex; flex-wrap:wrap; gap:8px;} .postmatch-btn{ border-radius:var(--radius-pill); padding:9px 18px; font-size:0.88rem; font-weight:600; cursor:pointer; border:1px solid var(--border-strong); background:var(--bg); color:var(--paper); transition:all .2s ease; } .postmatch-btn.pick{ background:var(--surface); border-color:var(--border-strong); } .postmatch-btn.pick:hover{border-color:var(--primary); color:var(--primary);} .postmatch-btn.yes{ background:rgba(var(--success-rgb),0.12); color:var(--success); border-color:rgba(var(--success-rgb),0.35); } .postmatch-btn.no{color:var(--slate);} .postmatch-btn:hover{transform:translateY(-1px);} .postmatch-card.answered{border-color:var(--border);} .postmatch-card.answered .postmatch-q{margin-bottom:10px; color:var(--slate);} .postmatch-done{ display:flex; align-items:center; gap:8px; font-size:0.88rem; font-weight:600; color:var(--primary); } .postmatch-done svg{width:14px; height:14px;} /* multi-step clarification: answered log + progress + typing */ .postmatch-log{ display:flex; flex-direction:column; gap:8px; margin:0 0 14px; padding:0 0 12px; border-bottom:1px solid var(--border); } .postmatch-log-row{display:flex; align-items:flex-start; gap:8px;} .postmatch-log-row svg{ width:14px; height:14px; margin-top:3px; flex:0 0 auto; color:var(--success); } .postmatch-log-text{display:flex; flex-direction:column; gap:1px; min-width:0;} .postmatch-log-q{font-size:0.82rem; line-height:1.4; color:var(--slate);} .postmatch-log-a{font-size:0.86rem; font-weight:600; color:var(--paper);} .postmatch-progress{ font-size:0.74rem; font-weight:600; letter-spacing:0.02em; color:var(--slate); margin-bottom:6px; } .postmatch-typing{ display:flex; align-items:center; gap:8px; font-size:0.86rem; color:var(--slate); } .postmatch-typing-dots{display:inline-flex; gap:3px; align-items:center;} .postmatch-typing-dots i{ width:5px; height:5px; border-radius:50%; background:var(--accent); display:inline-block; opacity:0.4; animation:postmatchDot 1.1s infinite ease-in-out; } .postmatch-typing-dots i:nth-child(2){animation-delay:0.18s;} .postmatch-typing-dots i:nth-child(3){animation-delay:0.36s;} @keyframes postmatchDot{ 0%,60%,100%{opacity:0.35; transform:translateY(0);} 30%{opacity:1; transform:translateY(-2px);} } /* ---------- success ---------- */ .success-wrap{ position:relative; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; overflow:hidden; } .success-wrap::before{ content:""; position:absolute; inset:-20%; pointer-events:none; z-index:0; background: radial-gradient(circle at 50% 40%, rgba(var(--primary-rgb),0.12), transparent 45%), radial-gradient(circle at 30% 70%, rgba(var(--accent-rgb),0.08), transparent 40%); } .success-wrap > *{position:relative; z-index:1;} .success-check{ width:84px; height:84px; border-radius:50%; background:rgba(var(--primary-rgb),0.12); border:1px solid rgba(var(--primary-rgb),0.4); display:flex; align-items:center; justify-content:center; margin:0 auto 28px; box-shadow:var(--shadow-glow); animation:checkPop var(--dur-slow) var(--ease-spring) forwards; } @keyframes checkPop{ from{transform:scale(0.4); opacity:0;} to{transform:scale(1); opacity:1;} } .success-check svg{width:36px; height:36px; color:var(--primary);} .success-title{font-size:1.8rem; margin-bottom:14px;} .success-sub{color:var(--slate); max-width:42ch; margin:0 auto 36px; line-height:1.6;} .success-sub-2{display:block; margin-top:10px; font-size:0.92rem; color:var(--slate-dim);} /* F18.3 — completed-request confirmation badge on screen-success */ .success-completed-badge{ display:inline-flex; align-items:center; gap:8px; margin:0 auto 20px; padding:9px 16px; border-radius:var(--radius-pill); border:1px solid rgba(var(--primary-rgb),0.4); background:rgba(var(--primary-rgb),0.1); color:var(--primary); font-size:0.9rem; font-weight:600; } .success-completed-badge[hidden]{display:none;} .success-completed-badge svg{width:18px; height:18px; flex-shrink:0;} .ticket-card{ margin-top:8px; padding:22px 20px 24px; border:1px dashed rgba(var(--primary-rgb),0.35); border-radius:calc(var(--radius-lg)); background:linear-gradient(180deg, var(--surface-elevated) 0%, rgba(var(--primary-rgb),0.04) 100%); box-shadow:var(--shadow-md); position:relative; } .ticket-card::before, .ticket-card::after{ content:""; position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:var(--bg); transform:translateY(-50%); box-shadow:inset 0 0 0 1px var(--border); } .ticket-card::before{left:-8px;} .ticket-card::after{right:-8px;} .ticket-id{ font-size:1.05rem; color:var(--primary); letter-spacing:.04em; margin-bottom:16px; } .ticket-qr-wrap{text-align:center; margin-bottom:18px;} .ticket-qr{ display:inline-flex; align-items:center; justify-content:center; width:132px; height:132px; padding:10px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--paper); color:var(--bg); box-shadow:var(--shadow-sm); } .ticket-qr-svg{width:100%; height:100%; display:block;} .ticket-qr-label{ margin-top:8px; font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-dim); } .ticket-partner{font-size:1.15rem; font-weight:600; color:var(--paper); margin-bottom:6px;} .ticket-service{font-size:0.9rem; color:var(--slate); line-height:1.45; margin-bottom:8px;} .ticket-meta{font-size:0.78rem; color:var(--slate-dim); margin-bottom:12px;} .ticket-status{ display:inline-flex; padding:6px 12px; border-radius:var(--radius-pill); border:1px solid rgba(var(--primary-rgb),0.35); background:rgba(var(--primary-rgb),0.1); color:var(--primary); font-size:0.78rem; font-weight:600; margin-bottom:16px; } .ticket-updates{ margin:16px 0 18px; padding-top:14px; border-top:1px solid var(--border); } .ticket-updates-title{ font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-dim); margin-bottom:10px; } .ticket-updates-list{display:flex; flex-direction:column; gap:8px; min-height:24px;} .ticket-update-row{ display:flex; gap:10px; align-items:flex-start; font-size:0.84rem; color:var(--slate); line-height:1.4; } .ticket-update-row .mono{color:var(--slate-dim); flex-shrink:0;} .ticket-escrow{margin-bottom:18px;} .ticket-confirm-btn{width:100%;} /* ticket actions: payout note, auto-confirm note, dispute button */ .ticket-actions{display:flex; flex-direction:column; gap:12px;} .ticket-actions[hidden]{display:none;} .ticket-payout-note{ display:flex; align-items:flex-start; gap:9px; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid rgba(var(--primary-rgb),0.28); background:rgba(var(--primary-rgb),0.07); color:var(--paper); font-size:0.86rem; line-height:1.45; } .ticket-payout-note svg{width:17px; height:17px; flex-shrink:0; margin-top:1px; color:var(--primary);} .ticket-payout-note.is-done{ border-color:rgba(var(--success-rgb),0.35); background:rgba(var(--success-rgb),0.1); } .ticket-payout-note.is-done svg{color:var(--success);} .ticket-auto-note{ display:flex; align-items:center; gap:7px; font-size:0.8rem; line-height:1.4; color:var(--slate); padding:0 2px; } .ticket-auto-note:empty{display:none;} .ticket-dispute-btn{ width:100%; border:1px solid var(--border-strong); background:none; color:var(--slate); border-radius:var(--radius-pill); padding:12px 22px; font-size:0.9rem; font-weight:600; cursor:pointer; transition:border-color .2s ease, color .2s ease; } .ticket-dispute-btn:hover{border-color:var(--danger, #d9534f); color:var(--danger, #d9534f);} .ticket-dispute-btn:disabled{opacity:0.5; cursor:default;} /* arbitration form / accepted state */ .ticket-arbitration{margin-top:4px;} .arb-card{ border:1px solid var(--border-strong); background:var(--card); border-radius:var(--radius); padding:18px; opacity:0; transform:translateY(6px); animation:rowIn .4s ease forwards; } .arb-title{font-size:1.02rem; font-weight:700; margin-bottom:6px; color:var(--paper);} .arb-sub{font-size:0.86rem; line-height:1.5; color:var(--slate); margin-bottom:14px;} .arb-reasons-label{ font-size:0.72rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate); margin-bottom:8px; } .arb-reasons{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;} .arb-reason{ border-radius:var(--radius-pill); padding:9px 16px; font-size:0.85rem; font-weight:500; cursor:pointer; border:1px solid var(--border-strong); background:var(--bg); color:var(--paper); transition:all .18s ease; } .arb-reason:hover{border-color:var(--primary);} .arb-reason.selected{ border-color:var(--primary); background:rgba(var(--primary-rgb),0.12); color:var(--primary); } .arb-comment{width:100%; resize:vertical; min-height:70px; margin-bottom:14px; font-family:inherit;} .arb-actions{display:flex; gap:10px; align-items:center;} .arb-cancel{ border:1px solid var(--border-strong); background:none; color:var(--slate); border-radius:var(--radius-pill); padding:11px 20px; font-size:0.88rem; font-weight:600; cursor:pointer; } .arb-cancel:hover{border-color:var(--paper); color:var(--paper);} .arb-submit{flex:1;} .arb-done{text-align:center;} .arb-done-icon{ width:46px; height:46px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(var(--primary-rgb),0.12); color:var(--primary); } .arb-done-icon svg{width:26px; height:26px;} .arb-done .arb-sub{margin-bottom:12px;} .arb-sla{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; padding:9px 16px; border-radius:var(--radius-pill); border:1px solid rgba(var(--accent-rgb),0.35); background:rgba(var(--accent-rgb),0.08); font-size:0.85rem; color:var(--paper); } .arb-sla .mono{font-weight:700; color:var(--accent);} .arb-sla .pulse{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite; flex-shrink:0;} .escrow-chain{display:flex; flex-direction:column; gap:10px;} .escrow-step{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--card); color:var(--slate-dim); transition:border-color .2s ease, background .2s ease, color .2s ease; } .escrow-step-icon{display:flex; align-items:center; justify-content:center; width:22px; height:22px; flex-shrink:0;} .escrow-step-icon svg{width:20px; height:20px;} .escrow-step-label{font-size:0.86rem; font-weight:500;} .escrow-step.active{ border-color:rgba(var(--primary-rgb),0.45); background:rgba(var(--primary-rgb),0.1); color:var(--primary); } .escrow-step.done{ border-color:rgba(var(--primary-rgb),0.25); color:var(--paper); } .request-id-row .field-value{color:var(--primary);} .restart-btn{ border:1px solid var(--border-strong); background:none; color:var(--paper); border-radius:var(--radius-pill); padding:13px 26px; font-size:0.92rem; cursor:pointer; } .restart-btn:hover{border-color:var(--paper);} .city-restart-btn{margin-top:32px;} .offers-footer{ margin-top:36px; padding-top:28px; border-top:1px solid var(--border); text-align:center; } .offers-footer-note{ margin:0 0 16px; font-size:0.88rem; color:var(--slate-dim); line-height:1.45; } /* ---------- identify / check-email ---------- */ .identify-icon{ width:56px; height:56px; border-radius:var(--radius-md); background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--primary); margin-bottom:24px; } .identify-icon svg{width:26px; height:26px;} .identify-input{ width:100%; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:15px 18px; margin:22px 0 20px; color:var(--paper); font-size:16px; font-family:inherit; outline:none; transition:border-color .2s ease; } .identify-input::placeholder{color:var(--slate-dim);} .identify-input:focus{border-color:var(--primary);} .identify-send-block{ margin-top:4px; padding:20px 18px 18px; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(180deg, rgba(196,181,253,0.07) 0%, var(--inset) 100%); } .identify-send-block .hotel-room-type-block{ margin:0 0 16px; padding:14px 16px; background:var(--card); } .identify-send-block .identify-input{ margin:0 0 16px; } .identify-send-block .btn-primary{margin-bottom:0;} .identify-send-block .identify-note{margin-top:14px; margin-bottom:0;} .identify-note{ margin-top:18px; font-size:0.8rem; color:var(--slate-dim); line-height:1.5; } #screen-check-email .flow-inner{max-width:440px;} #screen-check-email .flow-title{margin-top:4px;} #screen-check-email .flow-sub{margin-bottom:28px;} #screen-check-email .btn-primary{justify-content:center; width:100%; margin-bottom:14px;} #screen-check-email .back-link{justify-content:center; width:100%; margin:0;} /* ---------- identify preview offers ---------- */ .preview-block{ margin-top:28px; padding-top:24px; border-top:1px solid var(--border); text-align:left; } .preview-block-hotels{ margin-top:32px; padding:22px 18px 4px; border:1px solid var(--border); border-radius:var(--radius); background:var(--inset); } .preview-block-hotels .preview-header{margin-bottom:14px;} .preview-hint{ font-size:0.86rem; color:var(--slate-dim); line-height:1.45; margin:6px 0 0; } .preview-label{ display:flex; align-items:center; gap:8px; font-size:0.76rem; font-weight:600; color:var(--slate-dim); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0; } .preview-label.preview-label-ready{ font-size:1rem; font-weight:700; text-transform:none; letter-spacing:normal; color:var(--paper); } .preview-label .pulse{width:6px; height:6px; border-radius:50%; background:var(--primary); animation:pulse 2s infinite; flex-shrink:0;} .preview-label .pulse[hidden]{display:none;} .preview-skel{ height:78px; border-radius:var(--radius); margin-bottom:12px; background:linear-gradient(90deg, var(--card) 25%, var(--card-hover) 50%, var(--card) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; } @keyframes shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} } .preview-offers{display:flex; flex-direction:column; gap:12px;} .preview-offers .offer-card{margin-bottom:0;} .preview-loading{display:flex; flex-direction:column; gap:12px;} .preview-loading[hidden]{display:none !important;} button.offer-card.preview-offer-card{ width:100%; text-align:left; font:inherit; color:inherit; appearance:none; -webkit-appearance:none; cursor:pointer; } .preview-offers .preview-offer-card{ animation:none; opacity:1; transform:none; cursor:pointer; } .hotel-card{ border:1px solid var(--border); background:var(--card); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:8px; text-align:left; width:100%; } .hotel-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .hotel-card-name{font-weight:700; font-size:1rem; color:var(--paper);} .hotel-card-rating{font-size:0.78rem; color:var(--accent); white-space:nowrap;} .hotel-card-stars{font-size:0.78rem; color:var(--slate-dim);} .hotel-card-district{font-size:0.84rem; color:var(--slate-dim);} .hotel-card-vibe{font-size:0.84rem; color:var(--paper); line-height:1.45;} .hotel-card-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;} .hotel-card-tag{ font-size:0.72rem; padding:4px 10px; border-radius:var(--radius-pill); border:1px solid var(--border); color:var(--slate-dim); background:var(--card); } .hotel-room-type-block{ margin:0; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius); background:rgba(196,181,253,0.06); } .hotel-room-type-label{font-weight:700; font-size:0.95rem; margin-bottom:4px;} .hotel-room-type-hint{font-size:0.84rem; color:var(--slate-dim); margin:0 0 12px;} .hotel-room-type-options{display:flex; flex-wrap:wrap; gap:8px;} .hotel-room-type-btn{ border:1px solid var(--border); background:var(--card); color:var(--paper); border-radius:var(--radius-pill); padding:9px 14px; font-size:0.84rem; cursor:pointer; transition:all .2s ease; } .hotel-room-type-btn.active{ border-color:#C4B5FD; background:rgba(196,181,253,0.15); color:var(--paper); } /* ---------- offer detail sheet ---------- */ .offer-card{cursor:pointer;} .sheet-overlay{ position:fixed; inset:0; background:var(--overlay); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:200; overscroll-behavior:contain; touch-action:none; } .sheet-overlay.show{opacity:1; pointer-events:auto;} .offer-sheet{ position:fixed; left:0; right:0; bottom:0; max-height:92vh; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border-strong); border-bottom:none; border-radius:22px 22px 0 0; transform:translateY(100%); transition:transform .34s cubic-bezier(.2,.85,.25,1); z-index:201; overflow:hidden; overscroll-behavior:contain; pointer-events:none; } .offer-sheet.show{ transform:translateY(0); pointer-events:auto; } .offer-sheet.dragging{transition:none;} .sheet-handle{ width:40px; height:5px; border-radius:var(--radius-pill); background:rgba(var(--primary-rgb),0.25); margin:12px auto 4px; flex-shrink:0; cursor:grab; } .sheet-header{ display:flex; align-items:center; gap:12px; padding:14px 20px 16px; border-bottom:1px solid var(--border); flex-shrink:0; } .sheet-avatar{ width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--bg); } .sheet-header-info{flex:1; min-width:0;} .sheet-name{font-weight:600; font-size:1rem;} .sheet-meta{font-size:0.82rem; color:var(--slate-dim); margin-top:2px;} .sheet-close{ width:34px; height:34px; border-radius:50%; flex-shrink:0; border:1px solid var(--border); background:var(--card); color:var(--slate); display:flex; align-items:center; justify-content:center; cursor:pointer; } .sheet-close svg{width:15px; height:15px;} .sheet-close:hover{color:var(--paper); border-color:var(--border-strong);} .sheet-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background:var(--bg); } .sheet-body iframe{width:100%; border:0; display:block;} .offer-vitrina-meta{ color:var(--primary); font-weight:600; } .offer-sheet--embed .sheet-body, .offer-sheet--vitrina .sheet-body{ background:var(--surface); } .sheet-vitrina{ padding:0; background:var(--surface); } .sheet-vitrina iframe{ width:100%; border:none; border-radius:0; background:var(--surface); display:block; } /* Витрина партнёра в той же шторке, что и остальные офферы: мобиле — снизу на 92vh, десктоп — панель справа. Iframe заполняет тело. */ .offer-sheet--vitrina{ height:92vh; } .offer-sheet--vitrina .sheet-body{ display:flex; flex-direction:column; min-height:0; overflow:hidden; } .offer-sheet--vitrina .sheet-vitrina{ flex:1; min-height:0; display:flex; flex-direction:column; } .offer-sheet--vitrina .sheet-vitrina iframe{ flex:1; min-height:0; height:100%; } .sheet-footer{ flex-shrink:0; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--surface); } .sheet-footer-btn{width:100%;} .sheet-profile{padding:16px 20px 24px;} .sheet-hero-card{ background:linear-gradient(145deg, rgba(var(--primary-rgb),0.08), rgba(var(--accent-rgb),0.06)); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:18px; margin-bottom:20px; } .sheet-escrow-badge{ display:inline-flex; align-items:center; gap:7px; font-size:0.78rem; font-weight:600; color:var(--primary); background:rgba(var(--primary-rgb),0.12); border:1px solid rgba(var(--primary-rgb),0.25); padding:6px 12px; border-radius:var(--radius-pill); margin-bottom:14px; } .sheet-escrow-badge svg{width:15px; height:15px; flex-shrink:0;} .sheet-bio{font-size:0.95rem; line-height:1.55; color:var(--paper); margin:0 0 16px;} .sheet-stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;} .sheet-stat{ text-align:center; padding:10px 6px; border-radius:var(--radius-sm); background:var(--card); border:1px solid var(--border); } .sheet-stat-val{display:block; font-weight:700; font-size:0.9rem; color:var(--paper);} .sheet-stat-lbl{display:block; font-size:0.72rem; color:var(--slate-dim); margin-top:3px; line-height:1.2;} .sheet-section{margin-bottom:18px;} .sheet-section h3{font-size:0.82rem; font-weight:600; color:var(--slate-dim); text-transform:uppercase; letter-spacing:0.04em; margin:0 0 10px;} /* .identify-input carries the standalone screen's vertical rhythm (22px/20px) — too loose between a section heading and its hint inside the sheet. */ .sheet-contact-input{margin:0 0 8px;} .sheet-chips{display:flex; flex-wrap:wrap; gap:8px;} .sheet-chip{ font-size:0.84rem; padding:7px 12px; border-radius:var(--radius-pill); background:var(--card); border:1px solid var(--border); color:var(--paper); } .sheet-text{font-size:0.92rem; color:var(--slate); margin:0;} .sheet-highlights{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;} .sheet-highlights li{display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; color:var(--slate);} .sheet-hl-icon{ width:22px; height:22px; border-radius:50%; flex-shrink:0; background:rgba(var(--primary-rgb),0.15); color:var(--primary); display:flex; align-items:center; justify-content:center; } .sheet-hl-icon svg{width:12px; height:12px;} .sheet-highlights li::before{ content:""; flex:none; width:9px; height:5px; margin-top:6px; border-left:2px solid var(--primary); border-bottom:2px solid var(--primary); transform:rotate(-45deg); } .sheet-terms{display:flex; flex-direction:column;} .sheet-term{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--border); font-size:0.9rem; } .sheet-term:first-child{border-top:0;} .sheet-term span{color:var(--slate);} .sheet-term strong{color:var(--paper); font-weight:600; text-align:right;} .sheet-lead-form{padding:0 20px 28px;} .sheet-form-card{ background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:20px; } .sheet-form-card h3{margin:0 0 8px; font-size:1.05rem;} .sheet-form-sub{font-size:0.88rem; color:var(--slate-dim); margin:0 0 18px; line-height:1.45;} .sheet-field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;} .sheet-field span{font-size:0.82rem; color:var(--slate-dim); font-weight:500;} .sheet-field input{ width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--bg); color:var(--paper); font-size:16px; font-family:inherit; transition:border-color .2s ease, box-shadow .2s ease; } .sheet-field input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.15); } .sheet-field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;} .sheet-primary-btn{ width:100%; padding:14px 20px; min-height:48px; border-radius:var(--radius-sm); border:none; background:var(--btn-primary-bg); color:var(--btn-primary-text); font-weight:700; font-size:0.95rem; cursor:pointer; font-family:inherit; box-shadow:var(--shadow-sm); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease; } .sheet-primary-btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:var(--shadow-glow); } .sheet-primary-btn:disabled{opacity:0.45; cursor:not-allowed; transform:none;} .sheet-success{ padding:40px 24px 32px; text-align:center; min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; } .sheet-success-icon{width:64px; height:64px; color:var(--primary); margin-bottom:16px;} .sheet-success-icon svg{width:100%; height:100%;} .sheet-success h3{margin:0 0 10px; font-size:1.25rem;} .sheet-success p{font-size:0.92rem; color:var(--slate); line-height:1.5; margin:0 0 20px; max-width:340px;} .sheet-success .sheet-primary-btn{max-width:280px;} .sheet-payment{padding:16px 20px 28px;} .sheet-payment-header h3{margin:0 0 6px; font-size:1.1rem;} .sheet-payment-header p{margin:0 0 16px; font-size:0.88rem; color:var(--slate-dim); line-height:1.45;} .sheet-order-card{ background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:14px; } .sheet-order-row{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:0.84rem; padding:4px 0;} .sheet-order-row.muted{color:var(--slate-dim); font-size:0.8rem; line-height:1.4;} .sheet-order-main{font-size:0.95rem; padding:8px 0 4px;} .sheet-notice{ display:flex; align-items:flex-start; gap:10px; font-size:0.84rem; line-height:1.45; color:var(--slate); padding:12px 14px; border-radius:var(--radius-sm); margin-bottom:14px; } .sheet-notice-escrow{ background:rgba(var(--primary-rgb),0.08); border:1px solid rgba(var(--primary-rgb),0.2); color:var(--paper); } .sheet-notice-escrow svg{width:18px; height:18px; flex-shrink:0; color:var(--primary); margin-top:1px;} .sheet-notice-email{ background:var(--card); border:1px solid var(--border); justify-content:center; text-align:center; } .sheet-card-form{margin-bottom:16px;} .plan-pay-hold ul{margin:0; padding-left:1.15em;} .plan-pay-hold li{margin:0 0 4px;} .plan-pay-hold li:last-child{margin:0;} .plan-pay-module{ border:1px solid var(--border-strong); border-radius:var(--radius-md); overflow:hidden; background:var(--surface); margin-bottom:14px; } .plan-pay-module-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; background:var(--inset); border-bottom:1px solid var(--border); } .plan-pay-module-title{ display:inline-flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; } .plan-pay-module-title svg{width:16px; height:16px; color:var(--primary); flex-shrink:0;} .plan-pay-brands{font-size:0.75rem; font-weight:700; letter-spacing:0.04em; color:var(--slate); white-space:nowrap;} .plan-pay-module-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:200px; padding:28px 16px; text-align:center; color:var(--slate); font-size:0.92rem; } .plan-pay-module-loading .spin{ width:22px; height:22px; border-radius:50%; border:2px solid var(--border-strong); border-top-color:var(--primary); animation:spin .8s linear infinite; } .plan-pay-module-loading p{margin:0;} .plan-pay-load-bar{ width:180px; height:4px; border-radius:var(--radius-pill); background:var(--border); overflow:hidden; } .plan-pay-load-bar span{ display:block; height:100%; width:0; background:var(--primary); border-radius:inherit; animation:planPayLoad 1.45s var(--ease-out) forwards; } @keyframes planPayLoad{ to{ width:100%; } } .plan-pay-secure{ display:inline-flex; align-items:center; gap:6px; font-size:0.75rem; color:var(--slate-dim); } .plan-pay-secure svg{width:13px; height:13px;} .plan-pay-form{padding:16px 14px 14px; display:flex; flex-direction:column; gap:12px;} .plan-pay-field label{ display:block; font-size:0.75rem; font-weight:650; color:var(--slate); margin:0 0 6px; } .plan-pay-field .identify-input{margin:0; padding:12px 14px;} .plan-pay-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;} .plan-pay-card-demo{margin:0; font-size:0.78rem; color:var(--slate-dim); line-height:1.4;} .plan-origin-hint{margin:8px 0 0; font-size:0.82rem; color:var(--slate); line-height:1.4;} #plan-origin{width:100%;} .plan-cabinet-split{margin:12px 0 10px; padding-top:8px; border-top:1px solid var(--border);} .plan-cabinet-split-h{font-size:0.75rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate); margin-bottom:6px;} .sheet-pay-summary{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-top:1px solid var(--border); margin-bottom:14px; font-size:0.9rem; } .sheet-pay-summary strong{font-size:1.1rem; color:var(--primary);} .sheet-payment-processing{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:80px 20px; color:var(--slate-dim); min-height:260px; } .sheet-payment-success .sheet-notice{max-width:360px; text-align:left;} .sheet-payment-success .sheet-notice-email{text-align:center;} .booking-room-list{display:flex; flex-direction:column; gap:10px;} .booking-room-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:12px 14px; } .booking-room-info{display:flex; flex-direction:column; gap:3px; min-width:0;} .booking-room-name{font-size:0.9rem; color:var(--paper); font-weight:600;} .booking-room-price{font-size:0.8rem; color:var(--slate-dim);} .qty-stepper{display:flex; align-items:center; gap:10px; flex-shrink:0;} .qty-btn{ width:30px; height:30px; border-radius:50%; border:1px solid var(--border-strong); background:var(--bg); color:var(--paper); font-size:1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:inherit; transition:border-color .2s ease, color .2s ease; } .qty-btn:hover{border-color:var(--primary); color:var(--primary);} .qty-value{min-width:18px; text-align:center; font-weight:600; font-size:0.92rem;} .booking-variant-list{display:flex; flex-direction:column; gap:8px;} .booking-variant-btn{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; padding:12px 14px; border-radius:var(--radius-md); background:var(--card); border:1px solid var(--border-strong); color:var(--paper); font-family:inherit; font-size:0.9rem; cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease; } .booking-variant-btn:hover{border-color:var(--primary);} .booking-variant-btn.selected{border-color:var(--primary); background:rgba(var(--primary-rgb),0.08); color:var(--primary);} .booking-variant-btn svg{width:16px; height:16px; flex-shrink:0; vertical-align:-3px; margin-right:2px;} .sheet-payment-success .sheet-primary-btn{margin-top:8px;} .sheet-loading{ display:flex; align-items:center; justify-content:center; gap:10px; padding:60px 20px; color:var(--slate-dim); font-size:0.9rem; } .sheet-loading .spin{ width:16px; height:16px; border-radius:50%; border:2px solid var(--border-strong); border-top-color:var(--primary); animation:spin .8s linear infinite; } @keyframes spin{ to{transform:rotate(360deg);} } /* Десктоп: единый паттерн — панель справа во всю высоту (как .place-modal). На мобиле остаётся шторкой снизу. Брейкпоинт 721px — общий для всех модалок. */ @media (min-width:721px){ .offer-sheet{ left:auto; right:0; top:0; bottom:0; width:min(440px,42vw); max-width:none; max-height:none; height:100dvh; border:none; border-left:1px solid var(--border-strong); border-radius:0; box-shadow:-24px 0 48px -24px rgba(0,0,0,0.35); transform:translateX(100%); opacity:1; transition:transform .3s cubic-bezier(.2,.8,.2,1); pointer-events:none; } .offer-sheet.show{ transform:translateX(0); opacity:1; pointer-events:auto; } .offer-sheet.offer-sheet--vitrina, .offer-sheet.offer-sheet--embed{ height:100dvh; } .sheet-handle{display:none;} } /* ---------- toast ---------- */ .toast{ position:fixed; left:50%; bottom:36px; transform:translateX(-50%) translateY(20px); background:var(--surface); border:1px solid var(--border-strong); color:var(--paper); font-size:0.88rem; padding:13px 22px; border-radius:var(--radius-pill); box-shadow:0 20px 50px -12px rgba(0,0,0,0.6); opacity:0; pointer-events:none; z-index:100; transition:opacity .25s ease, transform .25s ease; } .toast.show{opacity:1; transform:translateX(-50%) translateY(0);} /* ---------- executor landing (become provider) ---------- */ .executor-link{ margin-top:18px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 18px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--inset); color:var(--slate); text-decoration:none; font-size:0.92rem; font-weight:600; transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; } .executor-link:hover{ transform:translateY(-2px); border-color:var(--border-strong); background:var(--card-hover); color:var(--paper); } .topbar .executor-link{margin-top:0;} .executor-hero{ min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:120px 24px 80px; box-sizing:border-box; } .executor-hero .flow-inner{ width:100%; max-width:1040px; margin:0 auto; } .executor-hero .flow-header{margin-bottom:28px;} .executor-benefits{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:0 0 28px; } @media (max-width:760px){ .executor-benefits{grid-template-columns:1fr;} } .executor-benefit{ border:1px solid var(--border); background:var(--inset); border-radius:var(--radius-md); padding:16px 18px; } .executor-benefit strong{ display:block; font-size:0.95rem; margin-bottom:6px; color:var(--paper); } .executor-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:22px; align-items:start; } @media (max-width:860px){ .executor-grid{grid-template-columns:1fr;} } .executor-card{ border:1px solid var(--border); background:var(--card); border-radius:var(--radius); padding:18px; } .executor-card h2, .executor-card h3{ margin:0 0 10px; } .executor-steps{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px; } .executor-step{ display:flex; gap:12px; padding:14px 14px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--inset); } .executor-step-num{ width:34px; height:34px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; background:rgba(var(--primary-rgb),0.12); border:1px solid rgba(var(--primary-rgb),0.25); color:var(--primary); font-weight:800; flex-shrink:0; } .executor-step-title{ font-weight:800; margin-bottom:2px; } .executor-muted{ color:var(--slate-dim); font-size:0.92rem; line-height:1.5; } .executor-register{ display:inline-flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; text-decoration:none; } .executor-register small{ display:block; color:var(--slate-dim); margin-top:6px; font-weight:600; } /* ---------- TourHub gate ---------- */ .gate-wrap{text-align:center; padding-top:80px;} .gate-logo{ font-family:'Geologica',sans-serif; font-size:2rem; font-weight:600; margin-bottom:28px; letter-spacing:-0.02em; } .gate-logo .dot{color:var(--primary);} .gate-sent-note{ color:var(--slate); font-size:0.92rem; margin:0 0 14px; line-height:1.5; } .gate-demo-hint{ margin-top:24px; font-size:0.82rem; color:var(--slate-dim); } .gate-quick-access{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; padding:11px 22px; font-size:0.84rem; } .gate-quick-access svg{width:15px; height:15px;} .member-pill{ font-size:0.72rem; color:var(--slate); border:1px solid var(--border); background:var(--card); padding:5px 10px; border-radius:var(--radius-pill); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width: 520px){ .topbar{ padding:14px 16px; padding-top:calc(14px + env(safe-area-inset-top, 0px)); } .topbar-right{gap:6px; margin-left:10px;} } .offer-company{ font-size:0.78rem; color:var(--slate-dim); margin-top:2px; } /* ---------- auth badge (mobile) ---------- */ .auth-badge{ display:none; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; flex-shrink:0; border:1px solid rgba(var(--primary-rgb),0.35); background:rgba(var(--primary-rgb),0.12); color:var(--primary); } .auth-badge svg{width:15px; height:15px;} .auth-badge[hidden]{display:none !important;} /* ---------- language dropdown (mobile) ---------- */ .lang-dropdown{position:relative; display:none;} .lang-dropdown-trigger{ display:flex; align-items:center; gap:4px; padding:7px 10px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--card); color:var(--paper); font-size:0.76rem; font-weight:600; letter-spacing:0.02em; cursor:pointer; font-family:inherit; } .lang-dropdown-trigger .chev{width:11px; height:11px; transition:transform .2s ease; flex-shrink:0;} .lang-dropdown-trigger[aria-expanded="true"] .chev{transform:rotate(180deg);} .lang-dropdown-menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:70; min-width:150px; padding:6px; border-radius:var(--radius-md); border:1px solid var(--border-strong); background:var(--surface); box-shadow:0 16px 34px -12px rgba(0,0,0,0.35); } .lang-dropdown-menu[hidden]{display:none;} .lang-dropdown-item{ display:block; width:100%; text-align:left; padding:9px 12px; border-radius:var(--radius-xs); border:none; background:none; color:var(--paper); font-size:0.86rem; cursor:pointer; font-family:inherit; } .lang-dropdown-item:hover{background:var(--card-hover);} .lang-dropdown-item.active{color:var(--primary); font-weight:600; background:rgba(var(--primary-rgb),0.12);} /* ---------- sandwich menu ---------- */ .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-pill); flex-shrink:0; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-xs); color:var(--slate); cursor:pointer; transition:background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .menu-toggle:hover{ border-color:rgba(var(--primary-rgb),0.35); color:var(--paper); background:var(--surface-elevated); box-shadow:var(--shadow-sm); transform:translateY(-1px); } .menu-toggle svg{width:18px; height:18px;} .site-menu-overlay{ position:fixed; inset:0; z-index:90; background:var(--overlay); opacity:0; pointer-events:none; transition:opacity .25s ease; } .site-menu-overlay.show{opacity:1; pointer-events:auto;} .site-menu{ position:fixed; top:0; right:0; bottom:0; z-index:95; width:min(340px, 86vw); background:var(--surface); border-left:1px solid var(--border-strong); padding:20px 20px calc(28px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:4px; overflow-y:auto; transform:translateX(100%); transition:transform var(--dur-normal) var(--ease-out); box-shadow:var(--shadow-lg); } .site-menu.show{transform:translateX(0);} .site-menu-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } .site-menu-brand{font-size:1.1rem;} .site-menu-close{ width:34px; height:34px; border-radius:50%; flex-shrink:0; border:1px solid var(--border); background:var(--card); color:var(--slate); display:flex; align-items:center; justify-content:center; cursor:pointer; } .site-menu-close:hover{color:var(--paper); border-color:var(--border-strong);} .site-menu-close svg{width:15px; height:15px;} .site-menu-user{ font-size:0.76rem; color:var(--slate-dim); padding:0 2px 16px; margin-bottom:10px; border-bottom:1px solid var(--border); word-break:break-all; } .site-menu-user strong{ display:block; color:var(--paper); font-size:0.92rem; font-weight:600; margin-top:3px; word-break:break-all; } .site-menu-user[hidden]{display:none;} .site-menu-label{ font-size:0.68rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-dim); padding:10px 10px 6px; } .site-menu-link{ display:flex; align-items:center; gap:10px; padding:13px 10px; border-radius:var(--radius-sm); color:var(--paper); text-decoration:none; font-size:0.94rem; font-weight:500; transition:background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .site-menu-link svg{ width:16px; height:16px; flex-shrink:0; color:var(--slate-dim); transition:transform var(--dur-fast) var(--ease-out), color var(--dur-fast) ease; } .site-menu-link:hover{ background:rgba(var(--primary-rgb),0.08); transform:translateX(2px); } .site-menu-link:hover svg{color:var(--primary); transform:scale(1.08);} .site-menu-link.active{background:rgba(var(--primary-rgb),0.12); color:var(--primary);} .site-menu-link-soon{opacity:0.55; width:100%; text-align:left; background:none; border:none; font-family:inherit; cursor:pointer;} .site-menu-link-soon .city-pill-soon{margin-left:auto;} .site-menu-link.active svg{color:var(--primary);} .legal-topbar-right{display:flex; align-items:center; gap:10px;} /* ---------- legal document pages ---------- */ .legal-body{ background:var(--bg-gradient), var(--bg); background-attachment:fixed; color:var(--paper); min-height:100vh; } .legal-topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:20px 32px; padding-top:calc(20px + env(safe-area-inset-top, 0px)); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); background:var(--topbar-gradient); border-bottom:1px solid rgba(var(--primary-rgb),0.06); } .legal-back{ display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:500; color:var(--slate); text-decoration:none; } .legal-back:hover{color:var(--paper);} .legal-back svg{width:14px; height:14px;} .legal-page{max-width:720px; margin:0 auto; padding:48px 24px 100px;} .legal-page h1{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.8rem,4vw,2.6rem); margin:0 0 10px; letter-spacing:-0.01em; } .legal-meta{color:var(--slate-dim); font-size:0.85rem; margin:0 0 40px;} .legal-page section{margin-bottom:32px;} .legal-page h2{font-size:1.1rem; font-weight:600; margin:0 0 12px;} .legal-page p{color:var(--slate); font-size:0.95rem; line-height:1.7; margin:0 0 14px;} .legal-page ul, .legal-page ol{color:var(--slate); font-size:0.95rem; line-height:1.7; margin:0 0 14px; padding-left:22px;} .legal-page li{margin-bottom:6px;} .legal-page strong{color:var(--paper);} .legal-contact-card{ background:var(--surface-elevated); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:20px 22px; margin-top:8px; box-shadow:var(--shadow-sm); } .legal-contact-card p{margin:0 0 6px; color:var(--slate);} .legal-contact-card p:last-child{margin-bottom:0;} @media (max-width:520px){ .legal-topbar{padding:16px 18px;} .legal-page{padding:32px 18px 80px;} } @media (max-width:520px){ .demo-badge{display:none;} .member-pill{display:none;} .lang-switch{display:none;} .auth-badge{display:inline-flex;} .lang-dropdown{display:block;} } /* ---------- legal doc pages (F10.3, single file, multi-lang blocks) ---------- */ [data-lang-block]{display:none;} [data-lang-block].active{display:block;} .legal-doc-footer{ max-width:720px; margin:0 auto; padding:24px; border-top:1px solid var(--border); display:flex; gap:8px 20px; flex-wrap:wrap; align-items:center; font-size:0.85rem; color:var(--slate-dim); } .legal-doc-footer a{color:var(--slate); text-decoration:underline; text-underline-offset:3px;} .legal-doc-footer a:hover{color:var(--paper);} .legal-doc-footer-spacer{flex:1;} /* ---------- sandwich menu footer (F10.2) ---------- */ .site-menu-spacer{flex:1;} .site-menu-footer{ padding:14px 10px 4px; margin-top:10px; border-top:1px solid var(--border); font-size:0.76rem; color:var(--slate-dim); line-height:1.6; } .site-menu-footer a{color:var(--slate-dim); text-decoration:none;} .site-menu-footer a:hover{color:var(--paper); text-decoration:underline;} @media (max-width:520px){ /* legal doc pages (legal/privacy.html, legal/terms.html) have no mobile lang-dropdown markup of their own — keep the plain lang-switch pill visible there even though the main app hides it below 520px. */ .legal-topbar .lang-switch{display:flex;} } /* ---------- catalog (F11.1) ---------- */ .catalog-mode-tabs{display:flex; gap:4px; margin-bottom:20px; padding:4px; border-radius:var(--radius-pill); background:var(--card); border:1px solid var(--border); width:fit-content;} .catalog-mode-tab{ padding:9px 20px; border-radius:var(--radius-pill); border:none; background:none; color:var(--slate); font-size:0.86rem; font-weight:600; cursor:pointer; transition:all .2s ease; font-family:inherit; } .catalog-mode-tab.active{background:var(--paper); color:var(--bg);} .catalog-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;} .catalog-tab{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--card); color:var(--slate); font-size:0.86rem; font-weight:600; cursor:pointer; transition:all .2s ease; font-family:inherit; } .catalog-tab svg{width:15px; height:15px; flex-shrink:0;} .catalog-tab.active{background:var(--paper); color:var(--bg); border-color:var(--paper);} .catalog-tab:hover:not(.active){border-color:var(--border-strong); color:var(--paper);} .catalog-filters{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:16px; margin-bottom:16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); } .catalog-select{ padding:9px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--bg); color:var(--paper); font-size:0.85rem; font-family:inherit; cursor:pointer; } .catalog-rating-filter{display:flex; gap:6px;} .catalog-chip-btn{ padding:8px 14px; border-radius:var(--radius-pill); border:1px solid var(--border-strong); background:var(--bg); color:var(--slate); font-size:0.8rem; cursor:pointer; transition:all .2s ease; font-family:inherit; } .catalog-chip-btn.active{background:rgba(var(--primary-rgb),0.14); color:var(--primary); border-color:rgba(var(--primary-rgb),0.4);} .catalog-checkbox{ display:inline-flex; align-items:center; gap:7px; font-size:0.85rem; color:var(--slate); cursor:pointer; } .catalog-checkbox input{width:16px; height:16px; accent-color:var(--primary); cursor:pointer;} .catalog-checkbox[hidden]{display:none !important;} .catalog-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; } .catalog-count{font-size:0.84rem; color:var(--slate-dim);} .catalog-sort{display:flex; gap:8px;} .catalog-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;} @media (max-width:900px){ .catalog-grid{grid-template-columns:repeat(2, 1fr);} } @media (max-width:600px){ .catalog-grid{grid-template-columns:1fr;} } .partner-card{ display:block; text-align:left; width:100%; padding:0; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); overflow:hidden; cursor:pointer; transition:border-color .2s ease, transform .2s ease; font-family:inherit; } .partner-card:hover{border-color:var(--border-strong); transform:translateY(-2px);} .partner-card-cover{ height:92px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.35rem; color:rgba(255,255,255,0.94); letter-spacing:0.02em; } .partner-card-cover svg{width:32px; height:32px; color:rgba(255,255,255,0.94);} .partner-card-body{padding:14px 16px 16px;} .partner-card-name{font-weight:600; font-size:0.95rem; line-height:1.3;} .partner-card-cat{ display:flex; align-items:center; gap:5px; margin-top:5px; font-size:0.76rem; color:var(--slate-dim); } .partner-card-cat svg{width:13px; height:13px; flex-shrink:0;} .partner-card-meta-row{display:flex; align-items:center; gap:10px; margin-top:9px; flex-wrap:wrap;} .partner-card-rating{display:flex; align-items:center; gap:4px; font-size:0.8rem; color:var(--accent);} .partner-card-reviews{font-size:0.76rem; color:var(--slate-dim);} .partner-card-badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;} .partner-badge-verified{ display:inline-flex; align-items:center; gap:4px; font-size:0.68rem; font-weight:600; color:var(--primary); background:rgba(var(--primary-rgb),0.12); border-radius:var(--radius-pill); padding:3px 8px; } .partner-badge-verified svg{width:11px; height:11px;} .partner-card-available{ display:flex; align-items:center; gap:6px; font-size:0.76rem; color:var(--slate-dim); margin-top:9px; } .partner-card-available .dot{width:6px; height:6px; border-radius:50%; background:var(--primary); flex-shrink:0;} .partner-card-price{ margin-top:10px; padding-top:10px; border-top:1px solid var(--border); font-family:'JetBrains Mono',monospace; font-size:0.92rem; font-weight:600; color:var(--paper); } .partner-card-price span{font-family:'Inter',sans-serif; font-weight:400; font-size:0.76rem; color:var(--slate-dim); margin-right:4px;} .catalog-empty{text-align:center; padding:60px 20px; color:var(--slate-dim);} .catalog-empty p{margin:0 0 16px; font-size:0.94rem;} /* ---------- partner profile (F11.2) ---------- */ .partner-profile-inner{padding-bottom:40px;} .partner-hero{border-radius:var(--radius); overflow:hidden; margin-bottom:20px; border:1px solid var(--border);} .partner-hero-cover{height:140px;} .partner-hero-info{padding:0 20px 20px; background:var(--card); display:flex; gap:14px; align-items:flex-start;} .partner-hero-avatar{ width:56px; height:56px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2rem; color:rgba(255,255,255,0.94); margin-top:-42px; border:3px solid var(--card); } .partner-hero-title-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:12px;} .partner-hero-name{font-weight:600; font-size:1.2rem;} .partner-hero-cat{font-size:0.84rem; color:var(--slate-dim); margin-top:3px;} .partner-hero-area{display:flex; align-items:center; gap:6px; margin-top:8px; font-size:0.84rem; color:var(--slate);} .partner-hero-area svg{width:14px; height:14px; flex-shrink:0; color:var(--slate-dim);} .partner-trust-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px;} .partner-trust-chip{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--card); font-size:0.82rem; color:var(--slate); } .partner-trust-chip svg{width:16px; height:16px; color:var(--primary); flex-shrink:0;} .partner-trust-chip strong{color:var(--paper); font-weight:600;} .partner-metrics{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:24px;} @media (max-width:600px){ .partner-metrics{grid-template-columns:1fr;} } .partner-metric{ padding:16px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); text-align:center; } .partner-metric-value{font-size:1.5rem; font-weight:700; color:var(--paper); font-family:'JetBrains Mono',monospace;} .partner-metric-label{font-size:0.76rem; color:var(--slate-dim); margin-top:4px;} .partner-services{display:flex; flex-direction:column; gap:10px;} .partner-service-card{ border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--card); padding:16px 18px; display:flex; flex-direction:column; gap:12px; } .partner-service-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;} .partner-service-name{font-weight:600; font-size:0.94rem;} .partner-service-desc{font-size:0.82rem; color:var(--slate-dim); margin-top:3px;} .partner-service-price{font-family:'JetBrains Mono',monospace; font-weight:600; font-size:1rem; flex-shrink:0; white-space:nowrap;} .partner-service-actions{display:flex; gap:10px; flex-wrap:wrap;} .partner-service-actions .btn-primary, .partner-service-actions .btn-secondary{padding:10px 18px; font-size:0.84rem; flex:none;} .partner-gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px;} .partner-gallery-item{ aspect-ratio:4/3; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; font-size:0.72rem; color:rgba(255,255,255,0.9); line-height:1.3; } .partner-reviews{display:flex; flex-direction:column; gap:14px;} .partner-review{border-bottom:1px solid var(--border); padding-bottom:14px;} .partner-review:last-child{border-bottom:none; padding-bottom:0;} .partner-review-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;} .partner-review-author{font-weight:600; font-size:0.86rem;} .partner-review-stars{color:var(--accent); font-size:0.8rem;} .partner-review-date{font-size:0.74rem; color:var(--slate-dim);} .partner-review-text{font-size:0.86rem; color:var(--slate); line-height:1.5; margin:6px 0 0;} .partner-review-verified{ display:inline-flex; align-items:center; gap:4px; margin-top:6px; font-size:0.72rem; color:var(--primary); } .partner-review-verified svg{width:12px; height:12px;} .partner-sticky-cta{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:40; padding:12px 16px; background:var(--surface); border-top:1px solid var(--border-strong); box-shadow:0 -8px 24px -12px rgba(0,0,0,0.3); } .partner-sticky-cta .btn-primary{width:100%; justify-content:center;} @media (max-width:720px){ .partner-sticky-cta.show{display:block;} .partner-profile-inner{padding-bottom:90px;} } /* ---------- targeted request SLA track (F11.4) ---------- */ .offers-target-panel{ display:flex; align-items:center; gap:10px; margin:0 0 16px; padding:16px 18px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--inset); font-size:0.9rem; color:var(--paper); } .offers-target-panel[hidden], .offers-collect-panel[hidden]{display:none !important;} .offers-target-panel .pulse{ width:8px; height:8px; border-radius:50%; background:var(--primary); animation:pulse 2s infinite; flex-shrink:0; } /* ---------- rate partner (F11.4) ---------- */ .rate-partner-card{ margin-top:24px; margin-bottom:0; padding:20px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); text-align:center; width:100%; max-width:360px; } .rate-partner-title{font-size:0.92rem; font-weight:600; margin-bottom:12px;} .rate-partner-stars{display:flex; justify-content:center; gap:6px; margin-bottom:14px;} .rate-partner-star{ background:none; border:none; cursor:pointer; padding:2px; color:var(--border-strong); transition:color .15s ease, transform .15s ease; } .rate-partner-star svg{width:28px; height:28px;} .rate-partner-star.active{color:var(--accent); transform:scale(1.08);} .rate-partner-comment{ width:100%; min-height:64px; padding:11px 14px; margin-bottom:12px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--bg); color:var(--paper); font-family:inherit; font-size:0.88rem; resize:vertical; } .rate-partner-submit{width:100%;} .rate-partner-submit:disabled{opacity:0.45; cursor:not-allowed;} .rate-partner-done{font-size:0.88rem; color:var(--primary); font-weight:600;} /* F18.2 — gap between the rating block (or its "thanks" state) and the restart button on screen-success. Scoped to the id so the shared .restart-btn class (also used by #partner-outcome-home) is untouched; 24px matches the vertical rhythm from F17.11. */ #restart-btn{margin-top:24px;} /* F18.4 — cross-role button before the restart button on screen-success */ .success-partner-view{margin-top:24px;} /* ---------- object profile (F12.2) ---------- */ .object-capacity-note{ margin:12px 0 0; padding:11px 14px; border-radius:var(--radius-sm); background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.25); color:var(--paper); font-size:0.84rem; line-height:1.45; } .object-capacity-note[hidden]{display:none !important;} /* ---------- trip planner (F13) ---------- */ .trip-category-toggles{display:flex; flex-wrap:wrap; gap:8px;} .trip-category-toggle{width:auto;} .trip-category-toggle svg{width:16px; height:16px; flex-shrink:0; vertical-align:-3px; margin-right:4px;} .trip-card{ border:1px solid var(--border); background:var(--card); border-radius:var(--radius); padding:16px 18px; margin-bottom:14px; } .trip-card-header{display:flex; align-items:center; gap:10px; font-weight:600; font-size:0.94rem; margin-bottom:12px;} .trip-card-header svg{width:18px; height:18px; flex-shrink:0; color:var(--primary);} .trip-card-status{display:flex; align-items:center; gap:10px; color:var(--slate-dim); font-size:0.88rem;} .trip-card-spinner{ width:14px; height:14px; border-radius:50%; flex-shrink:0; border:2px solid var(--border-strong); border-top-color:var(--primary); animation:spin .8s linear infinite; } .trip-mini-offers{display:flex; flex-direction:column; gap:8px;} .trip-mini-offer{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--inset); } .trip-mini-offer-info{display:flex; flex-direction:column; gap:2px; min-width:0;} .trip-mini-offer-name{font-weight:600; font-size:0.88rem;} .trip-mini-offer-tagline{color:var(--slate-dim); font-size:0.76rem;} .trip-mini-offer-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;} .trip-mini-offer-price{font-size:0.86rem; font-weight:600;} .trip-card-selected{display:flex; align-items:center; gap:12px;} .trip-card-check{color:var(--primary); flex-shrink:0; width:18px; height:18px;} .trip-card-check svg{width:18px; height:18px;} .trip-card-selected-info{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;} .trip-card-selected-name{font-weight:600; font-size:0.9rem;} .trip-card-selected-price{color:var(--primary); font-size:0.84rem;} .ticket-trip-sections{ display:flex; flex-direction:column; gap:8px; width:100%; margin:14px 0; padding:14px 16px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--inset); } .ticket-trip-sections[hidden]{display:none !important;} .ticket-trip-sections-title{font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--slate-dim); margin-bottom:2px;} .ticket-trip-section-row{display:flex; align-items:center; gap:8px; font-size:0.84rem;} .ticket-trip-section-row svg{width:15px; height:15px; flex-shrink:0; color:var(--primary);} .ticket-trip-section-label{color:var(--slate-dim); flex-shrink:0;} .ticket-trip-section-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ticket-trip-section-price{font-weight:600; flex-shrink:0;} .sheet-order-main svg{width:16px; height:16px; flex-shrink:0; vertical-align:-3px; margin-right:4px; color:var(--primary);} /* ---------- government channel demo (F15) ---------- */ .sort-row[hidden]{display:none !important;} .phone-avatar svg{width:18px; height:18px;} /* ---------- partner path: request queue (F17) ---------- */ .partner-queue-card{ display:block; cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit; transition:border-color .2s ease, transform .2s ease; } .partner-queue-card:hover{border-color:var(--border-strong); transform:translateY(-1px);} .partner-queue-card-top{display:flex; align-items:center; gap:10px; margin-bottom:10px;} .partner-queue-card-top svg{width:18px; height:18px; flex-shrink:0; color:var(--primary);} .partner-queue-card-summary{font-weight:600; font-size:0.94rem; flex:1; min-width:0;} .partner-queue-badge{margin-left:auto; flex-shrink:0;} .partner-queue-badge-new{color:var(--bg); background:var(--primary);} .partner-queue-badge-sent{color:var(--paper); background:var(--card-hover); border:1px solid var(--border-strong);} .partner-queue-badge-matched{color:var(--bg); background:var(--success);} .partner-queue-badge-expired{color:var(--slate-dim); background:none; border:1px solid var(--border);} .partner-queue-badge-completed{color:var(--bg); background:var(--primary);} .partner-queue-card-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:0.8rem; color:var(--slate-dim);} .partner-queue-card.match-glow{animation:queueMatchGlow 1.6s ease;} @keyframes queueMatchGlow{ 0%{box-shadow:0 0 0 0 rgba(var(--success-rgb),0.55); border-color:var(--success);} 70%{box-shadow:0 0 0 10px rgba(var(--success-rgb),0); border-color:var(--success);} 100%{box-shadow:0 0 0 0 rgba(var(--success-rgb),0); border-color:var(--border);} } .partner-queue-empty-hint{color:var(--slate-dim); font-size:0.9rem; padding:20px 0;} /* ---------- partner path: gamification summary (F17.10) ---------- */ .partner-outcome-gamification{ margin-top:24px; padding:20px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); } .gamification-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; flex-wrap:wrap;} .gamification-rating{font-size:1.1rem; font-weight:600; color:var(--accent);} .gamification-deals{font-size:0.9rem; color:var(--slate);} .gamification-progress-track{width:100%; height:6px; border-radius:var(--radius-pill); background:var(--border-strong); overflow:hidden; margin:12px 0 8px;} .gamification-progress-fill{height:100%; width:0; background:var(--primary); border-radius:var(--radius-pill); transition:width .8s ease;} .gamification-next-tier{margin:0; font-size:0.84rem; color:var(--slate-dim);} #partner-outcome-home{margin-top:24px;} /* ============ Onboarding: profile + preferences (ТЗ 16) ============ */ .profile-form{display:flex; flex-direction:column; gap:20px;} .profile-form .q-field{gap:8px;} .survey-group{margin-bottom:22px;} .survey-group .q-field-label{display:block; margin-bottom:10px;} .chip-choice{display:flex; flex-wrap:wrap; gap:9px;} .choice-chip{ border:1px solid var(--border-strong); background:var(--surface); color:var(--paper); border-radius:var(--radius-pill); padding:10px 16px; font-size:0.88rem; cursor:pointer; box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .choice-chip:hover{ border-color:rgba(var(--primary-rgb),0.4); transform:translateY(-1px); box-shadow:var(--shadow-sm); } .choice-chip.on{ background:linear-gradient(135deg, rgba(var(--primary-rgb),0.14), rgba(var(--accent-rgb),0.08)); border-color:var(--primary); color:var(--primary); font-weight:600; box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.1); } /* Segmented expanding toggle (CodePen-style track + indicator + nested reveal) */ .seg-toggle{width:100%;} .seg-track{ position:relative; display:flex; flex-wrap:wrap; align-items:stretch; gap:2px; padding:4px; background:var(--inset); border:1px solid var(--border-strong); border-radius:var(--radius-pill); box-shadow:var(--shadow-xs); transition:border-radius var(--dur-normal) var(--ease-out); } .seg-track.is-expanded{border-radius:var(--radius-pill);} .seg-indicator{ position:absolute; top:0; left:0; z-index:0; border-radius:var(--radius-pill); background:linear-gradient(135deg, rgba(var(--primary-rgb),0.16), rgba(var(--accent-rgb),0.08)); border:1px solid var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.08); pointer-events:none; opacity:0; transition:transform var(--dur-normal) var(--ease-out), width var(--dur-normal) var(--ease-out), height var(--dur-normal) var(--ease-out), opacity var(--dur-fast) ease; } .seg-track.is-expanded .seg-indicator{border-radius:var(--radius-pill);} .seg-opt, .seg-cell{ position:relative; z-index:1; flex:1 1 0; min-width:0; } .seg-opt{ display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--paper); font-family:inherit; font-size:0.84rem; font-weight:550; line-height:1.18; padding:10px 10px; border-radius:var(--radius-pill); cursor:pointer; text-align:center; text-wrap:balance; transition:color var(--dur-fast) ease; } .seg-opt:hover{color:var(--primary);} .seg-opt.on{color:var(--primary); font-weight:650;} .seg-panel{ margin-top:12px; padding:14px 14px 12px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-sm); } .seg-panel[hidden]{display:none !important;} .count-block{ display:flex; flex-direction:column; align-items:center; gap:8px; } .count-block-label{ font-size:0.82rem; font-weight:500; color:var(--slate); } .count-pill{ display:inline-flex; align-items:stretch; border:1px solid var(--border-strong); border-radius:var(--radius-pill); overflow:hidden; background:var(--surface); } .count-pill button{ width:44px; height:40px; border:0; background:transparent; color:var(--paper); font-size:1.15rem; font-weight:500; line-height:1; cursor:pointer; font-family:inherit; } .count-pill button:hover{background:rgba(var(--primary-rgb),0.08); color:var(--primary);} .count-pill button + span, .count-pill span + button{border-left:1px solid var(--border-strong);} .count-pill span{ min-width:48px; display:flex; align-items:center; justify-content:center; font-weight:650; font-size:0.95rem; color:var(--paper); } .seg-age-fields{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; margin-top:14px; } .seg-age-fields:empty{display:none; margin:0;} .seg-age-field{ display:flex; flex-direction:column; gap:4px; } .seg-age-field span{ font-size:0.75rem; color:var(--slate); font-weight:500; } .seg-age-field .q-input{ padding:9px 10px; text-align:center; font-size:0.9rem; } .seg-time{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .seg-time .q-input{ max-width:132px; padding:7px 10px; font-size:0.84rem; } .seg-unknown{ min-width:0; height:36px; padding:0 12px; border-radius:var(--radius-pill); border:1px solid var(--border-strong); background:var(--surface); color:var(--paper); font-family:inherit; font-size:0.8rem; font-weight:650; cursor:pointer; } .seg-unknown.on{ background:var(--primary); border-color:transparent; color:var(--btn-primary-text); } @media (max-width:640px){ .seg-opt{white-space:normal; padding:9px 8px; font-size:0.8rem;} .seg-track > .seg-opt{flex:1 1 calc(50% - 2px);} /* Onboarding profile: tidy 2-column grid; a single odd option spans full width */ .onboarding-form .seg-track{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:6px; border-radius:20px; align-items:stretch; } .onboarding-form .seg-track.is-expanded{border-radius:20px;} .onboarding-form .seg-indicator, .onboarding-form .seg-track.is-expanded .seg-indicator{border-radius:var(--radius-md);} .onboarding-form .seg-track .seg-opt{ width:100%; padding:13px 14px; font-size:0.92rem; border-radius:var(--radius-md); } .onboarding-form .seg-track .seg-opt:last-of-type:nth-of-type(odd){grid-column:1 / -1;} } @media (prefers-reduced-motion:reduce){ .seg-indicator{transition:none;} } .survey-offer-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap;} .survey-offer-actions .btn-secondary{padding:14px 24px;} /* ============ Dialog window: multi-turn thread (ТЗ 10.2) ============ */ .dialog-thread{ display:flex; flex-direction:column; gap:12px; padding-right:4px; padding-bottom:8px; } .dialog-thread:empty{display:none;} /* ТЗ 15.1 — messenger column: the screen is pinned to the viewport, the composer is position:fixed at the bottom (only lifts with the mobile keyboard), the thread scrolls in the middle. */ body.dialog-active{ overflow:hidden; width:100%; /* iOS Safari: without this the whole page scrolls and the composer rides up. */ position:fixed; left:0; right:0; } #screen-request.screen.active{ position:fixed; inset:0; z-index:1; width:100%; height:100dvh; max-height:100dvh; min-height:0; overflow:hidden; } #screen-request .flow{ height:100%; max-height:100%; min-height:0; padding:0 20px; padding-top:calc(76px + env(safe-area-inset-top, 0px)); padding-bottom:0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; } #screen-request .flow-inner{ display:flex; flex-direction:column; flex:1; min-height:0; } .dialog-chrome{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; } #screen-request .dialog-chrome .back-link{margin-bottom:0;} #screen-request .dialog-chrome .flow-eyebrow{margin-bottom:0;} .dialog-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; margin-bottom:0; padding-bottom:calc(var(--composer-h, 200px) + 28px); scrollbar-width:none; -ms-overflow-style:none; } .dialog-scroll::-webkit-scrollbar{display:none; width:0; height:0;} .dialog-intro{margin:0 0 16px; padding-right:4px;} #screen-request .dialog-intro .flow-title{ font-size:1.35rem; margin-bottom:8px; } #screen-request .dialog-intro .flow-sub{ font-size:0.9rem; line-height:1.45; max-width:48ch; } #screen-request .dialog-thread{ overflow:visible; margin-bottom:0; } .dialog-composer{ box-sizing:border-box; } /* Fixed composer only while the dialog screen is active — otherwise iOS Safari can leave a ghost strip at the bottom over other screens. */ /* A defined bottom sheet, not a fade — so when it grows on hover it reads as its own panel above the chat instead of bleeding into the message behind it. Solid ground, rounded top, hairline border and an upward shadow give it a clean top edge. */ #screen-request.screen.active .dialog-composer{ position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--bg); padding:14px 20px calc(10px + env(safe-area-inset-bottom, 0px)); border:1px solid var(--border); border-bottom:none; border-radius:var(--radius-lg) var(--radius-lg) 0 0; /* match the app's bottom sheets (24px) */ box-shadow:0 -14px 36px rgba(15,23,42,0.12); } [data-theme="dark"] #screen-request.screen.active .dialog-composer{ box-shadow:0 -14px 36px rgba(0,0,0,0.4); } .screen:not(.active) .dialog-composer{display:none !important;} .dialog-composer .examples-label{margin:0 0 8px;} .dialog-composer .examples-row{margin-bottom:10px;} @media (max-width:640px){ #screen-request .flow{ padding-left:16px; padding-right:16px; padding-top:calc(70px + env(safe-area-inset-top, 0px)); } #screen-request.screen.active .dialog-composer{padding-left:16px; padding-right:16px;} .dialog-composer .examples-row{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; scrollbar-width:none; mask-image:linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent); -webkit-mask-image:linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent); } .dialog-composer .examples-row::-webkit-scrollbar{display:none;} .dialog-composer .example-chip{flex:none; white-space:nowrap;} #screen-request .req-box{ padding:8px 10px 8px 12px; border-radius:16px 16px 0 0; border-bottom:none; margin:0; } } @media (min-width:641px){ #screen-request.screen.active .dialog-composer{ left:50%; transform:translateX(-50%); width:min(760px, 100%); max-width:760px; } /* Quick-reply chips scale in count — a place on the table can offer eight, and wrapping them all ate three rows of the composer. Keep the priority actions on one compact line and fold the rest behind a "+N" toggle (renderSuggestChips measures what fits). Expanded, the row wraps to show everything, then collapses again. Chips themselves are smaller and lighter here than on the intro screen. */ .dialog-composer .examples-row{gap:6px; margin-bottom:8px;} .dialog-composer .example-chip{ padding:6px 13px; font-size:0.8rem; line-height:1.3; box-shadow:none; } .dialog-composer .example-chip:hover{box-shadow:var(--shadow-xs);} .dialog-composer .examples-label{margin:0 0 6px; font-size:0.7rem;} } /* Fold/unfold control for the quick-reply row. Ghost-styled so it reads as a control, not one of the answer chips. JS shows it only when chips overflow. Hovering it grows the whole composer upward in place — the folded chips appear, the "build request" button and input ride up with them; no click, no separate overlay. A click pins the row open (keyboard/touch, or to keep it open while comparing options). */ .examples-toggle{ display:inline-flex; align-items:center; gap:5px; border:1px dashed var(--border); background:transparent; color:var(--slate-dim); cursor:pointer; border-radius:var(--radius-pill); padding:6px 12px; font-size:0.8rem; line-height:1.3; white-space:nowrap; transition:all var(--dur-fast) ease; } .examples-toggle:hover{ border-color:rgba(var(--primary-rgb),0.5); color:var(--primary); } .examples-toggle svg{ width:13px; height:13px; flex:none; transition:transform var(--dur-fast) ease; } .examples-toggle.is-open svg{ transform:rotate(180deg); } /* Folded chips are simply removed from the row until it opens — no overlay, they wrap into place and the composer reflows taller (it's bottom-anchored, so it slides up). */ .dialog-composer .example-chip.chip-folded{ display:none; } .dialog-composer .examples-row.is-open .example-chip.chip-folded{ display:inline-flex; } .chat-msg{max-width:82%; display:flex; flex-direction:column; gap:8px;} .chat-msg .chat-text{ padding:11px 15px; border-radius:var(--radius-md); font-size:0.92rem; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; } .chat-msg.ai{align-self:flex-start;} .chat-msg.ai .chat-text{ background:var(--surface-elevated); border:1px solid var(--border); color:var(--paper); border-bottom-left-radius:5px; box-shadow:var(--shadow-xs); } .place-preview-list{display:flex; flex-direction:column; gap:8px; background:none; border:none; padding:0; box-shadow:none;} .ppc{ display:flex; width:100%; text-align:left; border:var(--ppc-border-width, 0px) solid var(--ppc-border-color, transparent); border-radius:var(--radius-md); overflow:hidden; background:var(--surface); color:inherit; box-shadow:var(--shadow-sm); } .ppc--content{flex-direction:row; align-items:stretch;} .ppc-side-photo{ width:130px; flex:0 0 130px; align-self:stretch; object-fit:cover; display:block; background:linear-gradient(135deg, rgba(var(--primary-rgb),0.22), rgba(var(--accent-rgb),0.16)); } .ppc-side-photo--ph,.ppc-row-photo--ph,.ppc-mosaic-cell--ph{ display:flex; align-items:center; justify-content:center; color:var(--primary); background:linear-gradient(135deg, rgba(var(--primary-rgb),0.18), rgba(var(--accent-rgb),0.12)); } .ppc-side-photo.img-fallback,.ppc-row-photo.img-fallback,.ppc-mosaic-img.img-fallback{ display:flex; align-items:center; justify-content:center; color:var(--primary); } .ppc-ph svg,.ppc-ph .mapx-svg{width:28px; height:28px; opacity:.85;} .ppc-body{flex:1; min-width:0; padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px;} .ppc-kicker{ font-size:0.72rem; font-weight:500; color:var(--slate); letter-spacing:.01em; } .ppc-name{font-weight:700; font-size:0.98rem; line-height:1.25; color:var(--paper);} .ppc-how{ display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ppc-how svg{width:14px; height:14px; flex:none; opacity:.8;} .ppc-how span{min-width:0; overflow:hidden; text-overflow:ellipsis;} .ppc-desc{ margin:0; font-size:0.82rem; line-height:1.4; color:var(--slate); display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; } .ppc-desc--2{-webkit-line-clamp:2;} .ppc-actions{display:flex; gap:8px; margin-top:6px;} .ppc-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:6px 12px; border-radius:var(--radius-pill); font-size:0.78rem; font-weight:650; font-family:inherit; cursor:pointer; text-decoration:none; border:none; } .ppc-btn--primary{ background:var(--btn-primary-bg); color:var(--btn-primary-text); } .ppc-btn--outline{ background:transparent; color:var(--paper); border:1px solid var(--border-strong); } .ppc-btn--outline:hover{border-color:rgba(var(--primary-rgb),0.45);} .ppc--photo{flex-direction:column;} .ppc-mosaic{ display:grid; grid-template-columns:2fr 1fr; height:140px; gap:2px; background:var(--border); } .ppc-mosaic-main{min-height:0; height:100%;} .ppc-mosaic-side{display:grid; grid-template-rows:1fr 1fr; gap:2px; min-height:0;} .ppc-mosaic-cell{position:relative; overflow:hidden; min-height:0;} .ppc-mosaic-img{width:100%; height:100%; object-fit:cover; display:block;} .ppc-mosaic-badge{ position:absolute; right:6px; bottom:6px; background:rgba(15,23,42,.72); color:#fff; font-size:0.72rem; font-weight:700; padding:2px 7px; border-radius:999px; } .ppc-title-row{display:flex; align-items:flex-start; gap:8px;} .ppc-title-row .ppc-name{flex:1; min-width:0;} .ppc-badge{ flex:none; font-size:0.68rem; font-weight:650; color:var(--slate); border:1px solid var(--border); border-radius:999px; padding:2px 8px; } .ppc-meta{font-size:0.76rem; color:var(--slate);} .ppc-back{ display:inline-flex; align-items:center; gap:4px; align-self:flex-start; border:none; background:transparent; color:var(--slate); font-size:0.8rem; font-weight:600; font-family:inherit; cursor:pointer; padding:2px 2px 4px; } .ppc-back svg{width:16px; height:16px;} .ppc-row{ display:flex; align-items:center; gap:4px; width:100%; text-align:left; border:var(--ppc-border-width, 0px) solid var(--ppc-border-color, transparent); border-radius:var(--radius-md); background:var(--surface); color:inherit; padding:8px 6px 8px 8px; font-family:inherit; box-shadow:var(--shadow-xs); } .ppc-row:hover{box-shadow:var(--shadow-sm);} html[data-ppc-border="on"] .ppc-row:hover{border-color:var(--ppc-border-color);} .ppc-row-open{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; border:none; background:transparent; color:inherit; cursor:pointer; padding:0; font-family:inherit; text-align:left; } .ppc-row-pick{ flex:none; width:36px; height:36px; margin:0; padding:0; border:none; border-radius:50%; background:transparent; color:var(--slate); display:flex; align-items:center; justify-content:center; cursor:pointer; } .ppc-row-pick:hover{background:rgba(var(--primary-rgb),0.12); color:var(--paper);} .ppc-row-photo{ width:64px; height:64px; flex:none; border-radius:10px; object-fit:cover; display:block; background:linear-gradient(135deg, rgba(var(--primary-rgb),0.22), rgba(var(--accent-rgb),0.16)); } .ppc-row-photo--ph{width:64px; height:64px; flex:none; border-radius:10px;} .ppc-row-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;} .ppc-row-name{ font-weight:700; font-size:0.9rem; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ppc-row-meta{font-size:0.74rem; color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .ppc-row-desc{ font-size:0.76rem; color:var(--slate-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ppc-row-chevron{width:18px; height:18px; flex:none; pointer-events:none;} .place-preview-card{ display:block; width:100%; text-align:left; cursor:pointer; border:var(--ppc-border-width, 0px) solid var(--ppc-border-color, transparent); border-radius:var(--radius-md); overflow:hidden; background:var(--surface); padding:0; font-family:inherit; color:inherit; box-shadow:var(--shadow-sm); } .place-preview-map{ display:block; width:100%; height:140px; object-fit:cover; background:linear-gradient(135deg, rgba(var(--primary-rgb),0.22), rgba(var(--accent-rgb),0.16)); } .place-preview-map--fallback{ display:flex; align-items:center; justify-content:center; color:var(--primary); } .place-preview-map--fallback svg{width:36px; height:36px; opacity:.85;} .place-preview-body{padding:10px 12px 12px;} .place-preview-name{font-weight:650; font-size:0.95rem; margin-bottom:2px;} .place-preview-meta{font-size:0.78rem; color:var(--slate); margin-bottom:6px;} .place-preview-desc{ font-size:0.84rem; line-height:1.45; color:var(--paper); margin:0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } .chat-msg.user{align-self:flex-end;} .chat-msg.user .chat-text{ background:var(--btn-primary-bg); color:var(--btn-primary-text); border-bottom-right-radius:5px; box-shadow:var(--shadow-sm); } .chat-msg.user{align-self:flex-end;} .chat-msg{opacity:0; transform:translateY(8px); animation:chatIn var(--dur-normal) var(--ease-out) forwards;} @keyframes chatIn{to{opacity:1; transform:none;}} /* LocalBuddy: чат участников пула (шаг 3) */ .buddy-chat-inner{display:flex; flex-direction:column; min-height:70vh;} .buddy-chat-trip{margin-top:2px; color:var(--slate-dim);} .buddy-chat-note{ align-self:flex-start; margin:10px 0 4px; padding:5px 11px; border-radius:var(--radius-pill); font-size:0.74rem; color:var(--primary); background:rgba(var(--primary-rgb),0.1); border:1px solid rgba(var(--primary-rgb),0.2); } .buddy-chat-thread{ display:flex; flex-direction:column; gap:10px; margin:14px 0; flex:1 1 auto; min-height:180px; overflow-y:auto; } .buddy-chat-msg{max-width:84%;} .buddy-chat-author{font-size:0.74rem; font-weight:650; color:var(--slate-dim); margin:0 0 4px 4px;} .buddy-chat-author.is-org{color:var(--primary);} .buddy-chat-composer{margin-top:auto; padding-top:6px;} /* LocalBuddy: Мои поездки */ .buddy-mine-body{display:flex; flex-direction:column; gap:22px; margin-top:18px;} .buddy-mine-section{display:flex; flex-direction:column; gap:8px;} .buddy-mine-h{font-size:0.78rem; font-weight:650; letter-spacing:0.04em; color:var(--slate-dim); text-transform:uppercase;} .buddy-mine-row{ display:flex; flex-direction:column; gap:5px; width:100%; text-align:left; cursor:pointer; padding:14px 16px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface-elevated); font-family:inherit; color:var(--paper); box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .buddy-mine-row:hover{border-color:var(--primary); transform:translateY(-1px);} .buddy-mine-row-head{font-weight:650; font-size:0.94rem;} .buddy-mine-row-trip{font-size:0.84rem; color:var(--slate-dim);} .buddy-mine-row-foot{display:flex; align-items:baseline; gap:12px; margin-top:2px;} .buddy-mine-row-status{font-size:0.78rem; font-weight:600; color:var(--primary);} .buddy-mine-row-price{font-size:0.82rem; font-weight:700; margin-left:auto;} .buddy-mine-empty{font-size:0.86rem; color:var(--muted); padding:4px 2px; margin:0;} /* LocalBuddy: подписки и уведомления (шаг 4) */ .notif-wrap{position:relative;} .notif-bell{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-pill); border:1px solid var(--border-strong); background:var(--surface); color:var(--paper); cursor:pointer; } .notif-bell svg{width:19px; height:19px;} .notif-bell:hover{border-color:rgba(var(--primary-rgb),0.4);} .notif-badge{ position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px; border-radius:var(--radius-pill); background:var(--primary); color:#fff; font-size:0.66rem; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; } .notif-badge[hidden]{display:none;} .notif-panel{ position:absolute; top:calc(100% + 8px); right:0; width:min(320px, 86vw); z-index:60; background:var(--surface-elevated); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:6px; max-height:60vh; overflow-y:auto; } .notif-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px 6px; font-size:0.82rem; font-weight:650; color:var(--paper); } .notif-clear{background:none; border:0; color:var(--primary); font:inherit; font-size:0.76rem; cursor:pointer;} .notif-list{display:flex; flex-direction:column; gap:2px;} .notif-item{ display:flex; flex-direction:column; gap:2px; text-align:left; width:100%; padding:10px 11px; border:0; border-radius:var(--radius-sm); background:transparent; cursor:pointer; font-family:inherit; color:var(--paper); } .notif-item:hover{background:rgba(var(--primary-rgb),0.06);} .notif-item.is-unread{background:rgba(var(--primary-rgb),0.08);} .notif-item-text{font-size:0.86rem; line-height:1.4;} .notif-item-meta{font-size:0.74rem; color:var(--muted);} .notif-empty{padding:16px 12px; text-align:center; color:var(--muted); font-size:0.84rem;} .buddy-sub-btn{ display:flex; align-items:center; gap:8px; width:100%; margin-top:12px; padding:11px 14px; border-radius:var(--radius-sm); border:1px dashed rgba(var(--primary-rgb),0.4); background:transparent; color:var(--primary); font-family:inherit; font-size:0.86rem; font-weight:600; cursor:pointer; } .buddy-sub-btn svg{width:18px; height:18px; flex:none;} .buddy-sub-btn:hover{background:rgba(var(--primary-rgb),0.06);} .buddy-sub-btn.is-on{border-style:solid; background:rgba(var(--primary-rgb),0.1);} .chat-typing{ align-self:flex-start; display:flex; gap:4px; padding:12px 16px; background:var(--surface-elevated); border:1px solid var(--border); border-radius:var(--radius-md); border-bottom-left-radius:5px; box-shadow:var(--shadow-xs); } .chat-typing span{width:7px; height:7px; border-radius:50%; background:var(--slate-dim); animation:typingDot 1s infinite ease-in-out;} .chat-typing span:nth-child(2){animation-delay:.15s;} .chat-typing span:nth-child(3){animation-delay:.3s;} @keyframes typingDot{0%,60%,100%{opacity:.3; transform:translateY(0);} 30%{opacity:1; transform:translateY(-4px);}} /* Hero is a splash into the concierge flow — the old B2B request ticker is not shown. */ .ticker-wrap{display:none;} /* ============ Part 7: dialog understanding + service form + place modal ============ */ .u-reply{font-size:0.95rem; line-height:1.6; color:var(--paper); margin-bottom:18px;} .u-reply-bubble{ padding:14px 16px; border-radius:var(--radius-md); background:var(--bg); border:1px solid var(--border); } .u-reply-more{margin-top:10px; font-size:0.9rem;} .place-link{color:var(--primary); font-weight:600; cursor:pointer; text-decoration:none; border-bottom:1px solid rgba(var(--primary-rgb),0.35);} .place-link:hover{border-bottom-color:var(--primary);} .u-logi-section{margin-bottom:4px;} .u-logi-label{ font-size:0.72rem; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--slate-dim); margin-bottom:10px; } .u-logi{display:flex; flex-direction:column; gap:10px; margin-bottom:16px;} .u-logi-card{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; width:100%; text-align:left; padding:14px 16px 14px 14px; border-radius:var(--radius-sm); cursor:pointer; font-family:inherit; background:var(--surface-elevated); border:1px solid var(--border); color:var(--paper); box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), background var(--dur-fast) ease; } .u-logi-card:hover,.u-logi-card:focus-visible{ border-color:rgba(var(--primary-rgb),0.4); background:var(--surface); box-shadow:var(--shadow-md); transform:translateY(-2px); outline:none; } .u-logi-card:active{transform:translateY(0); box-shadow:var(--shadow-sm);} .u-logi-icon{ width:44px; height:44px; border-radius:var(--radius-sm); flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(var(--primary-rgb),0.1); color:var(--primary); } .u-logi-icon svg{width:22px; height:22px;} .u-logi-icon--group_tour{background:rgba(var(--primary-rgb),0.12); color:var(--primary);} .u-logi-icon--private_guide{background:rgba(242,169,59,0.14); color:#c2780a;} :root[data-theme="dark"] .u-logi-icon--private_guide{color:#f2a93b;} .u-logi-icon--car_rental{background:rgba(147,197,253,0.16); color:#3b82f6;} .u-logi-icon--shared_minibus{background:rgba(167,243,208,0.18); color:var(--primary);} .u-logi-icon--walk{background:rgba(14,165,160,0.14); color:#0EA5A0;} /* Walk-yourself option: a dashed frame sets it apart from the paid transfer offers. */ .u-logi-card--walk{border-style:dashed;} .u-logi-card--buddy{ grid-template-columns:auto minmax(0, 1fr); align-items:flex-start; border-color:rgba(var(--primary-rgb),0.35); background:linear-gradient(145deg, rgba(var(--primary-rgb),0.1), rgba(var(--accent-rgb),0.06)); } .u-logi-card--buddy .u-logi-main{width:100%;} .u-logi-card--buddy .u-logi-title, .u-logi-card--buddy .u-logi-hint, .u-logi-card--buddy .u-logi-meta{width:100%;} .u-logi-card--buddy .u-logi-price-row{width:100%; margin-top:6px;} .u-logi-section--buddy{ margin-top:14px; padding:14px 14px 12px; border-radius:var(--radius-md); border:1px solid rgba(var(--primary-rgb),0.28); background:linear-gradient(160deg, rgba(var(--primary-rgb),0.08), rgba(var(--accent-rgb),0.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); } .u-logi-section-head{margin-bottom:12px; text-align:left;} .u-logi-section-badge{ display:inline-block; margin-bottom:6px; padding:3px 10px; border-radius:var(--radius-pill); font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--primary); background:rgba(var(--primary-rgb),0.14); border:1px solid rgba(var(--primary-rgb),0.24); } .u-logi-section-title{font-size:0.94rem; font-weight:650; color:var(--paper); margin-bottom:4px;} .u-logi-section-lead,.u-logi-options-lead{ margin:0 0 10px; font-size:0.82rem; line-height:1.45; color:var(--slate-dim); text-align:left; } .u-logi--buddy .u-logi-card{margin-bottom:8px;} .u-logi--buddy .u-logi-card:last-child{margin-bottom:0;} /* LocalBuddy: доска объявлений компаньонов (кто уже едет) */ .buddy-board{margin:0 0 14px;} .buddy-board-title{font-size:0.88rem; font-weight:650; color:var(--paper); margin-bottom:2px; text-align:left;} .buddy-board-lead{margin:0 0 10px; font-size:0.8rem; line-height:1.4; color:var(--slate-dim); text-align:left;} .buddy-board-list{display:flex; flex-direction:column; gap:8px;} /* Карточка объявления: транспорт — герой; тап открывает детали в шторке/панели */ .buddy-listing-card{ display:flex; flex-direction:column; gap:9px; width:100%; text-align:left; cursor:pointer; padding:14px 16px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-elevated); box-shadow:var(--shadow-xs); font-family:inherit; color:inherit; transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .buddy-listing-card:hover{border-color:var(--primary); box-shadow:var(--shadow-md); transform:translateY(-1px);} .buddy-listing-card.is-full{opacity:0.58; cursor:default;} .buddy-listing-card.is-full:hover{transform:none; box-shadow:var(--shadow-sm); border-color:var(--border-strong);} .buddy-listing-card.is-joined{border-color:var(--primary); background:linear-gradient(150deg, rgba(var(--primary-rgb),0.06), rgba(var(--accent-rgb),0.03));} .bl-eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-height:22px;} .bl-avatar{flex:none; width:12px; height:12px; border-radius:50%; background:rgba(var(--accent-rgb),0.55);} .bl-eyebrow-r{margin-left:auto; display:flex; align-items:center; gap:8px;} .bl-main{display:flex; align-items:center; gap:11px;} .bl-titlewrap{display:flex; flex-direction:column; gap:3px; min-width:0;} .bl-vehicle{font-size:0.98rem; font-weight:650; line-height:1.3; color:var(--paper); text-wrap:balance;} .bl-date{font-size:0.8rem; color:var(--slate-dim);} .bl-divider{height:1px; background:var(--border); margin:2px 0;} .bl-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:12px;} .bl-foot-l{display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0;} .bl-foot-r{display:flex; align-items:center; gap:10px; flex:none;} .bl-pricewrap{display:flex; flex-direction:column; align-items:flex-end; gap:1px; text-align:right;} .bl-price{font-size:0.95rem; font-weight:700; color:var(--primary); letter-spacing:-0.02em; white-space:nowrap;} .bl-pricesub{font-size:0.68rem; color:var(--muted); white-space:nowrap;} .bl-chev{color:var(--primary); font-size:1.25rem; line-height:1;} .buddy-listing-org{font-weight:600; font-size:0.82rem; color:var(--paper); white-space:nowrap;} .buddy-listing-match{font-size:0.72rem; font-weight:700; padding:2px 8px; border-radius:var(--radius-pill); color:var(--primary); background:rgba(var(--primary-rgb),0.12);} .buddy-listing-kind{font-size:0.6rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:3px 8px; border-radius:var(--radius-xs); background:rgba(var(--accent-rgb),0.16); color:var(--accent);} .buddy-listing-kind.is-corridor{background:rgba(var(--primary-rgb),0.14); color:var(--primary);} .buddy-listing-kind.is-gather{background:transparent; color:var(--primary); border:1px dashed rgba(var(--primary-rgb),0.5); padding:2px 8px;} .buddy-listing-kind.is-own{background:var(--primary); color:#fff;} .buddy-listing-fav{color:var(--accent); font-size:0.95rem; line-height:1;} .buddy-fav-btn.is-on{border-color:rgba(var(--accent-rgb),0.5); color:var(--accent); background:rgba(var(--accent-rgb),0.08);} .buddy-listing-insta{font-size:0.82rem; font-weight:600; color:var(--primary);} .buddy-listing-icon{flex:none; width:42px; height:42px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center;} .buddy-listing-icon svg{width:22px; height:22px;} .buddy-listing-route{align-self:flex-start; font-size:0.78rem; font-weight:600; color:var(--primary); background:rgba(var(--primary-rgb),0.1); padding:3px 11px; border-radius:var(--radius-pill);} .buddy-listing-note{margin:0; font-size:0.9rem; line-height:1.55; color:var(--slate-dim);} .buddy-listing-seats{font-size:0.8rem; font-weight:600; color:var(--primary); white-space:nowrap;} .buddy-listing-status{font-size:0.7rem; font-weight:600; padding:3px 10px; border-radius:var(--radius-pill); background:rgba(var(--slate-rgb,120,130,128),0.14); color:var(--muted); white-space:nowrap;} .buddy-listing-status.is-ready{background:rgba(var(--primary-rgb),0.12); color:var(--primary);} /* Детали пула в шторке/панели (шелл .place-modal) */ .pool-modal-inner{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;} .pool-modal-body{display:flex; flex-direction:column; gap:14px; padding:8px 22px 26px;} .pmx-eyebrow{display:flex; align-items:center; gap:8px; padding-top:4px;} .pmx-title{margin:0; font-size:1.5rem; font-weight:700; line-height:1.16; color:var(--paper); letter-spacing:-.015em; text-wrap:balance;} .pmx-sub{margin:0; font-size:0.9rem; color:var(--slate-dim);} .pmx-tiles{display:flex; gap:10px; flex-wrap:wrap;} .pmx-tile{flex:1; min-width:120px; background:rgba(var(--slate-rgb,120,130,128),0.08); border-radius:var(--radius-md); padding:13px 15px; display:flex; flex-direction:column; gap:3px;} .pmx-tile.is-accent{background:rgba(var(--primary-rgb),0.1);} .pmx-tile-k{font-size:0.72rem; color:var(--muted);} .pmx-tile.is-accent .pmx-tile-k{color:var(--primary);} .pmx-tile-v{font-size:1.15rem; font-weight:700; color:var(--paper);} .pmx-tile.is-accent .pmx-tile-v{color:var(--primary);} .pmx-note{margin:0; font-size:0.95rem; line-height:1.6; color:var(--paper);} .pmx-roster{display:flex; flex-direction:column; gap:2px;} .pmx-roster-h{font-size:0.74rem; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px;} .pmx-person{display:flex; align-items:center; gap:11px; padding:7px 0;} .pmx-ava{flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:0.95rem;} .pmx-person-main{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;} .pmx-person-name{font-size:0.9rem; font-weight:600; color:var(--paper);} .pmx-person-meta{font-size:0.78rem; color:var(--slate-dim);} .pmx-person-insta{font-size:0.78rem; font-weight:600; color:var(--primary); flex:none; white-space:nowrap;} .pmx-roster-locked{margin-top:8px; font-size:0.76rem; color:var(--muted); display:flex; align-items:center; gap:6px;} .pmx-roster-locked::before{content:"🔒"; font-size:0.8rem;} .bl-progress{position:relative; display:block; height:5px; border-radius:3px; background:rgba(var(--accent-rgb),0.14); overflow:visible;} .bl-progress-fill{position:absolute; left:0; top:0; height:100%; border-radius:3px; background:var(--accent); transition:width .3s ease;} .bl-progress.is-ready .bl-progress-fill{background:var(--primary);} .bl-progress-tick{position:absolute; top:-2px; width:2px; height:9px; border-radius:1px; background:var(--muted); transform:translateX(-1px);} .bl-progress-tick.is-passed{background:var(--primary);} .bl-progress--lg{height:8px; border-radius:4px; margin:2px 0 4px;} .bl-progress--lg .bl-progress-tick{top:-3px; height:14px;} .pmx-ladder{margin:2px 0 2px;} .pmx-ladder-h{font-size:0.74rem; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px;} .pmx-ladder-row{display:flex; gap:6px; overflow-x:auto; padding-bottom:2px;} .pmx-ladder-col{flex:1 0 auto; min-width:56px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 6px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);} .pmx-ladder-col.is-cur{border-color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, transparent);} .pmx-ladder-p{font-size:0.9rem; font-weight:700; color:var(--paper); white-space:nowrap;} .pmx-ladder-col.is-cur .pmx-ladder-p{color:var(--primary);} .pmx-ladder-n{font-size:0.72rem; color:var(--slate-dim);} .bl-datefit{display:inline-block; font-size:0.66rem; font-weight:700; letter-spacing:0.02em; padding:1px 6px; border-radius:var(--radius-xs); vertical-align:middle;} .bl-datefit.is-out{background:rgba(180,103,15,0.14); color:#B4670F;} .bl-datefit.is-route{background:rgba(var(--primary-rgb),0.14); color:var(--primary);} .pmx-corridor{margin:2px 0 4px; padding:10px 12px; border-radius:var(--radius-sm); background:color-mix(in srgb, var(--primary) 6%, transparent); border:1px solid color-mix(in srgb, var(--primary) 18%, transparent);} .pmx-corridor-fit{font-size:0.8rem; font-weight:700; color:var(--primary); margin:0 0 4px; display:flex; align-items:center; gap:6px;} .pmx-corridor-fit::before{content:"✓"; font-weight:800;} .pmx-corridor-hint{font-size:0.82rem; line-height:1.4; color:var(--muted); margin:0;} .pmx-datefit{font-size:0.8rem; font-weight:600; margin:2px 0 4px; display:flex; align-items:center; gap:6px;} .pmx-datefit.is-in{color:var(--primary);} .pmx-datefit.is-in::before{content:"✓"; font-weight:800;} .pmx-datefit.is-out{color:#B4670F;} .pmx-datefit.is-out::before{content:"!"; font-weight:800; display:inline-flex; width:15px; height:15px; align-items:center; justify-content:center; border-radius:50%; background:rgba(180,103,15,0.16);} .buddy-confirm-overlay{position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,32,0.5); opacity:0; pointer-events:none; transition:opacity .2s ease;} .buddy-confirm-overlay.show{opacity:1; pointer-events:auto;} .buddy-confirm-box{width:100%; max-width:360px; background:var(--surface); border-radius:var(--radius-md); padding:22px; box-shadow:var(--shadow-lg); transform:translateY(8px); transition:transform .2s ease;} .buddy-confirm-overlay.show .buddy-confirm-box{transform:translateY(0);} .buddy-confirm-title{font-size:1.05rem; font-weight:700; color:var(--paper); margin-bottom:8px;} .buddy-confirm-body{font-size:0.9rem; line-height:1.45; color:var(--muted); margin-bottom:18px;} .buddy-confirm-actions{display:flex; gap:10px;} .buddy-confirm-actions button{flex:1;} .buddy-confirm-danger{background:#B4670F; border-color:#B4670F;} .buddy-confirm-danger:hover{filter:brightness(1.05);} .buddy-board-sort{display:flex; gap:6px; overflow-x:auto; margin-bottom:10px; padding-bottom:2px;} .buddy-sort-chip{flex:none; font-size:0.78rem; font-weight:600; padding:5px 11px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; white-space:nowrap;} .buddy-sort-chip.is-on{background:var(--primary); border-color:var(--primary); color:#fff;} .buddy-board-list.is-collapsed .buddy-listing-card:nth-child(n+4){display:none;} .buddy-board-more{display:block; width:100%; margin-top:8px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--primary); font-size:0.85rem; font-weight:600; cursor:pointer;} .buddy-board-more:hover{background:var(--surface-elevated);} .pmx-person--you{background:color-mix(in srgb, var(--primary) 8%, transparent); border-radius:var(--radius-sm); margin:0 -8px; padding-left:8px; padding-right:8px;} .pmx-you-chip{display:inline-block; font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--primary); background:color-mix(in srgb, var(--primary) 14%, transparent); border-radius:var(--radius-xs); padding:1px 6px; vertical-align:middle;} .pmx-foot{display:flex; align-items:center; gap:8px;} .pmx-actions{display:flex; flex-direction:column; gap:9px; margin-top:2px;} .pmx-actions > .btn-primary{width:100%; min-height:50px; font-size:1rem;} .pmx-actions-row{display:flex; gap:9px; flex-wrap:wrap;} .pmx-actions-row > .btn-secondary{flex:1 1 130px; min-height:44px;} .buddy-create{margin-top:4px;} .buddy-create-title{font-size:0.88rem; font-weight:650; color:var(--paper); margin-bottom:2px; text-align:left;} .buddy-create-lead{margin:0 0 10px; font-size:0.8rem; line-height:1.4; color:var(--slate-dim); text-align:left;} /* LocalBuddy: подтверждение вписки в чужое объявление */ .buddy-join-summary{ padding:12px 14px; border-radius:var(--radius-sm); border:1px solid rgba(var(--primary-rgb),0.28); background:var(--surface-elevated); margin-bottom:12px; text-align:left; } .buddy-join-org{display:flex; align-items:center; gap:8px; font-weight:650; color:var(--paper); margin-bottom:4px;} .buddy-join-trip{font-size:0.84rem; font-weight:600; color:var(--paper); margin-bottom:4px;} .buddy-join-note{margin:0 0 8px; font-size:0.82rem; line-height:1.4; color:var(--slate-dim);} .buddy-join-meta{display:flex; gap:12px; font-size:0.8rem; color:var(--primary); font-weight:600; margin-bottom:8px;} .buddy-join-share{display:flex; align-items:baseline; gap:8px; padding-top:8px; border-top:1px solid rgba(var(--primary-rgb),0.15);} .buddy-join-share strong{font-size:1.02rem; color:var(--paper);} .buddy-join-share-calc{font-size:0.78rem; color:var(--muted); margin-left:auto;} .buddy-join-actions{display:flex; flex-direction:column; gap:8px;} .u-logi-section--selected{ margin-top:14px; padding:14px 14px 12px; border-radius:var(--radius-md); border:1px solid rgba(var(--primary-rgb),0.18); background:rgba(var(--primary-rgb),0.04); } .u-logi-selected-date{font-size:0.82rem; color:var(--slate-dim);} .u-logi-card--static{ cursor:default; pointer-events:none; grid-template-columns:auto minmax(0, 1fr); } .u-logi-card--static .u-logi-chev{display:none;} .u-logi-meta{font-size:0.76rem; line-height:1.35; color:var(--primary); font-weight:600;} .u-request-note{ display:block; width:100%; margin:0 0 16px; text-align:left; } .u-request-note-label{ display:block; margin-bottom:6px; font-size:0.82rem; font-weight:650; color:var(--paper); } .u-request-note-input{ width:100%; min-height:72px; padding:12px 14px; border-radius:var(--radius-md); border:1px solid var(--border-strong); background:var(--surface); color:var(--paper); font-family:inherit; font-size:0.86rem; line-height:1.45; resize:vertical; box-sizing:border-box; } .u-request-note-input:focus{ outline:none; border-color:rgba(var(--primary-rgb),0.45); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.12); } .sheet-buddy-deadline{ margin:0 0 10px; padding:10px 12px; border-radius:var(--radius-sm); background:rgba(var(--primary-rgb),0.08); border:1px solid rgba(var(--primary-rgb),0.18); font-size:0.86rem; font-weight:650; color:var(--primary); text-align:center; } .sheet-notice-buddy{ margin-bottom:12px; padding:10px 12px; border-radius:var(--radius-sm); background:rgba(var(--accent-rgb),0.06); border:1px solid rgba(var(--primary-rgb),0.14); font-size:0.8rem; line-height:1.4; color:var(--slate-dim); text-align:left; } .sheet-buddy-share-label{font-weight:650; color:var(--primary);} .log-line.log-warn{color:#c2780a;} .u-logi-badge{ flex-shrink:0; align-self:flex-start; margin-top:2px; font-size:0.62rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--primary); background:rgba(var(--primary-rgb),0.12); border:1px solid rgba(var(--primary-rgb),0.22); border-radius:var(--radius-pill); padding:3px 7px; } .buddy-sharing-pick-label{ width:100%; margin:0 0 2px; font-size:0.88rem; line-height:1.4; color:var(--slate-dim); } .buddy-sharing-pick{ display:flex; flex-direction:column; gap:10px; width:100%; margin-top:4px; } .buddy-sharing-pick .btn-primary,.buddy-sharing-pick .btn-secondary{width:100%;} .understanding-actions .buddy-sharing-pick-label + .btn-primary{margin-left:0;} .u-logi-card--selected{ cursor:default; pointer-events:none; border-color:rgba(var(--primary-rgb),0.35); background:rgba(var(--primary-rgb),0.06); box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb),0.08); } .u-logi-card--selected:hover,.u-logi-card--selected:focus-visible{transform:none; box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb),0.08);} .u-logi-main{min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px;} .u-logi-title{font-size:0.93rem; font-weight:650; line-height:1.35; color:var(--paper);} .u-logi-hint{font-size:0.78rem; line-height:1.4; color:var(--slate);} .u-logi-price-row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-start; gap:4px 8px; margin-top:4px; width:100%; text-align:left; } .u-logi-price-row--stack{flex-direction:column; align-items:flex-start; gap:2px;} .u-logi-price{font-size:0.95rem; font-weight:700; color:var(--primary); letter-spacing:-0.02em; line-height:1.2;} .u-logi-unit{font-size:0.74rem; color:var(--slate-dim); line-height:1.3;} .u-logi-unit--seat{color:var(--primary); font-weight:600;} .u-logi-chev{ width:22px; height:22px; color:var(--slate-dim); flex-shrink:0; align-self:center; display:flex; align-items:center; justify-content:center; opacity:0.55; } .u-logi-card:hover .u-logi-chev,.u-logi-card:focus-visible .u-logi-chev{opacity:1; color:var(--primary);} .u-logi-chev svg{width:16px; height:16px;} .u-also-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 16px; border-radius:var(--radius-md); cursor:pointer; margin-bottom:18px; background:transparent; border:1px dashed var(--border-strong); color:var(--primary); font-weight:600; font-size:0.88rem; font-family:inherit; transition:border-color .15s, background .15s; } .u-also-btn:hover{border-color:var(--primary); background:rgba(var(--primary-rgb),0.06);} .u-also-icon{display:flex; align-items:center; justify-content:center; opacity:.85;} .u-also-icon svg{width:18px; height:18px;} .u-also-done{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 16px; border-radius:var(--radius-md); margin-bottom:18px; background:rgba(var(--success-rgb),0.08); border:1px solid rgba(var(--success-rgb),0.25); color:var(--success); font-weight:600; font-size:0.88rem; } .u-also-done svg{width:18px; height:18px; flex-shrink:0;} .u-also-draft{ width:100%; padding:14px 16px; border-radius:var(--radius-md); margin-bottom:18px; background:var(--surface); border:1px solid var(--border-strong); } .u-also-draft-main{font-weight:650; font-size:0.92rem; color:var(--paper); margin-bottom:4px;} .u-also-draft-hint{font-size:0.82rem; color:var(--slate-dim); margin-bottom:10px; line-height:1.4;} .u-also-edit{ padding:8px 14px; border-radius:var(--radius-pill); cursor:pointer; font-family:inherit; font-size:0.84rem; font-weight:600; background:transparent; border:1px solid var(--border-strong); color:var(--primary); } .u-also-edit:hover{border-color:var(--primary); background:rgba(var(--primary-rgb),0.06);} .success-hotel-cta{ width:100%; max-width:360px; margin:24px auto 0; padding:18px 16px; border-radius:var(--radius-md); background:rgba(var(--primary-rgb),0.08); border:1px solid rgba(var(--primary-rgb),0.2); text-align:center; } .success-hotel-title{font-weight:650; font-size:0.95rem; color:var(--paper); margin-bottom:6px; line-height:1.4;} .success-hotel-sub{font-size:0.84rem; color:var(--slate-dim); margin-bottom:14px;} .success-hotel-btn{width:100%; justify-content:center;} .u-bundle-banner{ padding:14px 16px; border-radius:var(--radius-md); margin-bottom:16px; background:rgba(var(--primary-rgb),0.08); border:1px solid rgba(var(--primary-rgb),0.2); color:var(--paper); font-size:0.9rem; line-height:1.45; display:flex; flex-direction:column; gap:12px; } .u-bundle-continue{align-self:flex-start; padding:10px 18px; font-size:0.86rem;} .u-bundle-prompt{ padding:14px 16px; border-radius:var(--radius-md); margin-bottom:10px; background:var(--surface); border:1px solid var(--border-strong); } .u-bundle-prompt-text{margin:0 0 12px; font-size:0.9rem; color:var(--paper); line-height:1.45;} .u-bundle-prompt-actions{display:flex; flex-wrap:wrap; gap:8px;} .u-bundle-prompt-actions .btn-primary, .u-bundle-prompt-actions .btn-secondary{padding:10px 16px; font-size:0.86rem;} .u-service-badge{display:inline-block; padding:6px 14px; border-radius:20px; font-weight:650; font-size:0.95rem; background:rgba(var(--primary-rgb),0.12); color:var(--primary); margin-bottom:12px;} .u-fields{margin-bottom:16px;} /* service fields form (screen-questions) */ .qform{display:flex; flex-direction:column; gap:18px;} .qform-cat{font-weight:650; font-size:1.08rem; margin-bottom:2px;} .q-field{display:flex; flex-direction:column; gap:8px;} .q-field[hidden]{display:none !important;} .q-field-label{font-size:0.85rem; color:var(--slate); font-weight:500;} .q-stepper{ display:flex; align-items:stretch; gap:8px; width:100%; } .q-stepper-input{ flex:1; min-width:0; text-align:center; font-weight:650; font-size:1rem; -moz-appearance:textfield; } .q-stepper-input::-webkit-outer-spin-button, .q-stepper-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;} .q-stepper-actions{ display:flex; flex-direction:row; gap:6px; flex-shrink:0; } .q-stepper-btn{ width:44px; height:44px; flex-shrink:0; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--paper); font-size:1.1rem; font-weight:650; line-height:1; cursor:pointer; font-family:inherit; transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease; } .q-stepper-btn:hover{ border-color:rgba(var(--primary-rgb),0.4); background:rgba(var(--primary-rgb),0.06); color:var(--primary); } .q-stepper-btn:active{transform:scale(0.96);} .req-star{color:var(--accent);} .q-input{ padding:12px 14px; border-radius:var(--radius-sm); font-family:inherit; font-size:0.95rem; background:var(--surface); border:1px solid var(--border-strong); color:var(--paper); box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .q-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.14); } .q-input--with-chips{margin-top:0;} .q-select{ cursor:pointer; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; appearance:none; -webkit-appearance:none; } .q-quick{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;} .q-quick .choice-chip{padding:8px 14px; font-size:0.86rem;} .q-date-quick{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;} .q-date-quick .choice-chip{padding:7px 13px; font-size:0.84rem;} .q-quick--duration .choice-chip{font-size:0.84rem; padding:9px 13px;} .qform-continue{margin-top:6px; display:inline-flex; align-items:center; justify-content:center; gap:8px;} .onboarding-form{display:flex; flex-direction:column; gap:4px;} .onb-section{ padding:20px 0 12px; border-bottom:1px solid var(--border); } .onb-section .q-field{margin-bottom:16px;} .onb-section .q-field:last-child{margin-bottom:0;} .onb-section:last-of-type{border-bottom:none; padding-bottom:4px;} .onb-section-title{ font-size:0.78rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate-dim); margin-bottom:14px; } .onb-section--optional{ padding-top:24px; border-bottom:none; background:linear-gradient(180deg, rgba(var(--primary-rgb),0.04) 0%, transparent 100%); border-radius:var(--radius); margin-top:8px; padding-left:4px; padding-right:4px; } .onb-section--optional .onb-section-title{color:var(--primary); margin-bottom:8px;} .onb-prefs-head{margin-bottom:18px;} .onb-prefs-lead{ font-size:0.95rem; font-weight:650; color:var(--paper); line-height:1.4; margin:0 0 8px; } .onb-prefs-detail{ font-size:0.86rem; color:var(--slate); line-height:1.5; margin:0; } .onb-prefs-footer{ font-size:0.8rem; color:var(--slate-dim); line-height:1.45; margin:16px 0 0; text-align:center; } .onb-pref-cards{display:flex; flex-direction:column; gap:14px;} .onb-pref-card{ padding:16px 16px 18px; border-radius:var(--radius-md); background:var(--surface-elevated); border:1px solid var(--border-strong); box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .onb-pref-card.is-active{ border-color:rgba(var(--primary-rgb),0.45); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.12), var(--shadow-sm); background:linear-gradient(145deg, rgba(var(--primary-rgb),0.05), rgba(var(--accent-rgb),0.03)); transform:translateY(-1px); } .onb-pref-card.is-done{border-color:var(--border);} .onb-pref-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; } .onb-pref-icon{ flex-shrink:0; width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--primary); background:linear-gradient(135deg, rgba(var(--primary-rgb),0.14), rgba(var(--accent-rgb),0.08)); border:1px solid rgba(var(--primary-rgb),0.18); transition:color var(--dur-fast) ease, background var(--dur-fast) ease, border-color var(--dur-fast) ease; } .onb-pref-icon svg{width:20px; height:20px;} .onb-pref-card.is-done .onb-pref-icon{ color:var(--success); background:linear-gradient(135deg, rgba(var(--success-rgb),0.16), rgba(var(--success-rgb),0.06)); border-color:rgba(var(--success-rgb),0.28); } .onb-pref-card-title{flex:1; font-size:0.92rem; font-weight:650; color:var(--paper); line-height:1.3;} .onb-pref-chips{gap:10px;} .onb-pref-chips .choice-chip{padding:10px 15px; font-size:0.86rem;} .onb-pref-input{margin-top:0;} .onb-pref-actions{ margin:18px 0 10px; display:flex; flex-direction:column; gap:8px; } .onb-more-prefs-btn{ flex:none; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 20px; } .onb-more-prefs-btn svg{ width:16px; height:16px; flex-shrink:0; } .onb-more-prefs-hint{ margin:0; font-size:0.78rem; line-height:1.45; color:var(--muted); text-align:center; } .survey-pref-section-label{ margin:6px 0 12px; font-size:0.72rem; font-weight:650; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); } .onb-pref-card--new{border-style:dashed;} .onb-pref-badge{ margin-left:auto; padding:3px 8px; border-radius:var(--radius-pill); font-size:0.68rem; font-weight:650; letter-spacing:0.02em; color:var(--accent); background:rgba(0,168,150,0.1); } .onb-pref-card-head .onb-pref-badge{flex-shrink:0;} /* LocalBuddy companion matching */ .localbuddy-safety{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; padding:16px; border-radius:var(--radius-md); border:1px solid rgba(var(--primary-rgb),0.22); background:linear-gradient(145deg, rgba(var(--primary-rgb),0.08), rgba(var(--accent-rgb),0.04)); box-shadow:var(--shadow-xs); } .localbuddy-safety-icon{ flex-shrink:0; width:36px; height:36px; color:var(--primary); display:flex; align-items:center; justify-content:center; } .localbuddy-safety-icon svg{width:28px; height:28px;} .localbuddy-safety-title{ font-size:0.92rem; font-weight:650; color:var(--paper); margin-bottom:6px; } .localbuddy-safety-text{ margin:0; font-size:0.84rem; line-height:1.55; color:var(--slate-dim); } .localbuddy-toggle-card{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; padding:16px 18px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface-elevated); box-shadow:var(--shadow-sm); } .localbuddy-toggle-title{font-size:0.94rem; font-weight:650; color:var(--paper); margin-bottom:4px;} .localbuddy-toggle-sub{margin:0; font-size:0.82rem; line-height:1.45; color:var(--muted);} .lb-switch{ position:relative; flex-shrink:0; display:inline-block; width:52px; height:30px; } .lb-switch input{opacity:0; width:0; height:0; position:absolute;} .lb-switch-slider{ position:absolute; cursor:pointer; inset:0; background:var(--border); border-radius:var(--radius-pill); transition:background 0.2s ease; } .lb-switch-slider:before{ content:""; position:absolute; height:24px; width:24px; left:3px; bottom:3px; background:var(--paper); border-radius:50%; transition:transform 0.2s ease; box-shadow:0 1px 3px rgba(0,0,0,0.18); } .lb-switch input:checked + .lb-switch-slider{background:var(--primary);} .lb-switch input:checked + .lb-switch-slider:before{transform:translateX(22px);} /* LocalBuddy co-match gathering */ .buddy-gather-trip{ margin:0 0 14px; padding:10px 14px; border-radius:var(--radius-sm); font-size:0.84rem; line-height:1.45; color:var(--slate-dim); background:rgba(var(--primary-rgb),0.06); border:1px solid rgba(var(--primary-rgb),0.16); } .buddy-gather-seats-wrap{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; } .buddy-gather-seats-label{font-size:0.82rem; color:var(--muted);} .buddy-gather-seats{font-size:1.35rem; font-weight:700; color:var(--primary);} .buddy-gather-radar{margin:0 auto 16px; max-width:140px;} #screen-buddy-gathering .flow-inner{ display:flex; flex-direction:column; gap:0; } .buddy-gather-log{ position:relative; height:120px; min-height:0; margin:0 auto 12px; max-width:100%; overflow-x:hidden; overflow-y:auto; padding:2px 4px; border:none; background:transparent; flex-shrink:0; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; text-align:center; -webkit-mask-image:none; mask-image:none; } .buddy-gather-log.matching-log{ min-height:0; margin-top:0; } .buddy-gather-log .log-line{ justify-content:center; opacity:1; transform:none; animation:rowIn .35s ease forwards; } .buddy-gather-log.is-collapsed{ height:0; margin-bottom:0; padding:0; } .buddy-joiner-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; position:relative; z-index:1; } .buddy-joiner-card{ display:block; width:100%; text-align:left; cursor:pointer; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface-elevated); font-family:inherit; color:inherit; box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .buddy-joiner-card:hover{ border-color:rgba(var(--primary-rgb),0.4); box-shadow:var(--shadow-sm); transform:translateY(-1px); } .buddy-joiner-card.is-expanded{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.12), var(--shadow-md); background:linear-gradient(145deg, rgba(var(--primary-rgb),0.05), rgba(var(--accent-rgb),0.03)); } .buddy-joiner-card.is-active{ animation:joinerPulse 2s ease-in-out infinite; } @keyframes joinerPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),0.15), var(--shadow-sm);} 50%{box-shadow:0 0 0 6px rgba(var(--primary-rgb),0.08), var(--shadow-md);} } .buddy-joiner-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px;} .buddy-joiner-match{ font-size:0.78rem; font-weight:700; padding:2px 8px; border-radius:var(--radius-pill); color:var(--primary); background:rgba(var(--primary-rgb),0.12); } .buddy-joiner-name{font-weight:650; font-size:0.92rem; color:var(--paper);} .buddy-joiner-party{font-size:0.78rem; color:var(--muted); margin-left:auto;} .buddy-joiner-bio, .buddy-joiner-bio-long{ margin:0 0 6px; font-size:0.84rem; line-height:1.45; color:var(--slate-dim); } .buddy-joiner-insta{font-size:0.8rem; font-weight:600; color:var(--primary);} .buddy-gather-partner{margin-top:8px;} .text-link-btn{ display:block; width:100%; margin-top:12px; padding:10px; background:none; border:none; font-family:inherit; font-size:0.88rem; font-weight:600; color:var(--primary); cursor:pointer; text-align:center; } .text-link-btn:hover{text-decoration:underline;} #onboarding-forget.profile-forget{margin-top:20px;} .q-input--readonly{opacity:0.85; cursor:not-allowed; background:var(--surface);} .auth-wrap{max-width:400px;} .auth-demo-pill{ display:inline-block; margin:0 auto 20px; padding:6px 12px; border-radius:var(--radius-pill); font-size:0.78rem; font-weight:600; color:var(--accent); background:rgba(var(--accent-rgb),0.1); border:1px solid rgba(var(--accent-rgb),0.22); box-shadow:var(--shadow-xs); } .auth-form{display:flex; flex-direction:column; gap:12px; margin-bottom:8px;} .auth-email-submit{justify-content:center;} .auth-divider{ display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--slate-dim); font-size:0.84rem; } .auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--border-strong); } .auth-social{display:flex; flex-direction:column; gap:10px;} .auth-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:13px 16px; min-height:48px; border-radius:var(--radius-sm); cursor:pointer; font-family:inherit; font-size:0.92rem; font-weight:600; border:1px solid var(--border-strong); background:var(--surface-elevated); color:var(--paper); box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .auth-btn:hover{ border-color:rgba(var(--primary-rgb),0.35); background:var(--surface); box-shadow:var(--shadow-sm); transform:translateY(-1px); } .auth-btn-icon{display:flex; align-items:center; justify-content:center; width:20px; height:20px;} .auth-btn-icon svg{width:20px; height:20px;} .auth-btn--apple .auth-btn-icon svg{color:var(--paper);} .auth-magic-icon{ width:72px; height:72px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(var(--primary-rgb),0.1); color:var(--primary); box-shadow:var(--shadow-sm); } .auth-magic-icon svg{width:36px; height:36px;} .auth-magic-hint{font-size:0.86rem; color:var(--slate-dim); line-height:1.45; margin:0 0 20px;} .auth-magic-demo{width:100%; justify-content:center;} .site-menu-user{ padding:10px 16px 4px; font-size:0.82rem; color:var(--slate-dim); line-height:1.4; word-break:break-all; } .site-menu-link-muted{color:var(--slate-dim);} /* place info modal — mobile: full-width bottom sheet; desktop: drawer from the right */ .place-modal-overlay{ position:fixed; inset:0; z-index:1000; display:none; background:rgba(15,23,42,0.45); flex-direction:column; align-items:stretch; justify-content:flex-end; padding:0; } .place-modal-overlay.show{display:flex;} body.place-modal-open{overflow:hidden;} .place-modal{ position:relative; width:100%; max-height:85dvh; background:var(--surface); border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; transform:translateY(100%); transition:transform var(--dur-normal) var(--ease-out); } .place-modal-overlay.show .place-modal{transform:translateY(0);} .place-modal-close{ position:absolute; top:calc(12px + env(safe-area-inset-top, 0px)); right:12px; z-index:8; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; background:rgba(0,0,0,0.42); color:#fff; backdrop-filter:blur(6px); } .place-modal-close svg{width:18px; height:18px;} .place-modal-inner{ display:flex; flex-direction:column; min-height:0; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* ============ Place / hotel modal = full-screen stories + swipe-up landing ============ Scoped to #place-modal so the shared LocalBuddy pool sheet (#pool-modal, same shell) stays a bottom sheet. */ #place-modal .place-modal{ height:100dvh; max-height:100dvh; flex:none; border-radius:0; } #place-modal .place-modal-inner{ scroll-snap-type:y mandatory; scroll-behavior:smooth; overflow-x:hidden; background:#0b1119; } /* Media stage — fills the screen; the vertical scroll snaps between it and the landing. */ .pm-stage{ position:relative; flex:0 0 100%; min-height:0; overflow:hidden; background:#0b1119; scroll-snap-align:start; scroll-snap-stop:always; } .pm-track{display:flex; height:100%; transition:transform .35s cubic-bezier(.22,.61,.36,1); touch-action:pan-y;} .pm-slide{flex:0 0 100%; height:100%; position:relative; overflow:hidden;} .pm-slide-media{display:block; width:100%; height:100%; object-fit:cover; background:#0b1119;} .pm-slide--ph{ display:flex; align-items:center; justify-content:center; background:#10202a; background:linear-gradient(150deg, color-mix(in srgb, var(--pm-tint,#0EA5A0) 34%, #0b1119), color-mix(in srgb, var(--pm-tint,#0EA5A0) 12%, #0b1119)); } .pm-slide-ico svg{width:54px; height:54px; color:var(--pm-tint,#0EA5A0); opacity:.5;} /* image slide whose src failed (offline OSM etc.) — fallback div keeps the classes */ .pm-slide .img-fallback{ display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(150deg, color-mix(in srgb, var(--pm-tint,#0EA5A0) 34%, #0b1119), color-mix(in srgb, var(--pm-tint,#0EA5A0) 12%, #0b1119)); } .pm-slide .img-fallback svg{width:54px; height:54px; opacity:.6;} /* progress segments */ .pm-progress{ position:absolute; top:calc(9px + env(safe-area-inset-top, 0px)); left:12px; right:56px; z-index:7; display:flex; gap:4px; } .pm-seg{flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.30); overflow:hidden;} .pm-seg i{display:block; height:100%; width:0; background:#fff; border-radius:2px;} .pm-seg.done i{width:100%;} /* invisible prev / next tap zones */ .pm-tap{ position:absolute; top:0; bottom:0; width:34%; z-index:5; padding:0; border:none; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:pan-y; } .pm-tap--prev{left:0;} .pm-tap--next{right:0;} /* bottom info overlay: title + caption + "swipe up" affordance */ .pm-stage-info{ position:absolute; left:0; right:0; bottom:0; z-index:6; pointer-events:none; padding:56px 18px calc(20px + env(safe-area-inset-bottom, 0px)); background:linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.18) 55%, rgba(0,0,0,0)); } .pm-stage-title{color:#fff; font-weight:700; font-size:1.5rem; line-height:1.2; letter-spacing:-0.02em; margin-bottom:6px;} .pm-caption{color:rgba(255,255,255,.86); font-size:0.92rem; line-height:1.35; min-height:1.25em;} .pm-more{ pointer-events:auto; margin-top:16px; display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.15); color:#fff; font-size:0.85rem; font-weight:600; cursor:pointer; backdrop-filter:blur(6px); } .pm-more svg{width:15px; height:15px;} /* text landing under the stories */ .pm-landing{ flex:0 0 auto; min-height:100%; position:relative; background:var(--surface); scroll-snap-align:start; border-radius:18px 18px 0 0; padding:0 20px calc(30px + env(safe-area-inset-bottom, 0px)); } .pm-landing-grab{ position:sticky; top:0; z-index:2; display:flex; justify-content:center; width:100%; padding:12px 0 10px; border:none; background:var(--surface); cursor:pointer; border-radius:18px 18px 0 0; } .place-modal-grabber{ margin:0; width:40px; height:5px; border-radius:var(--radius-pill); background:var(--border-strong); } .pm-chips{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 14px;} .pm-chip{ display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:var(--radius-pill); font-size:0.8rem; font-weight:600; color:var(--paper); background:var(--bg); border:1px solid var(--border); } .pm-chip svg{width:15px; height:15px; color:var(--slate-dim);} .pm-chip--warn{color:#B45309; background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.35);} [data-theme="dark"] .pm-chip--warn{color:#FCD34D; background:rgba(245,158,11,.16);} /* pool modal (#pool-modal) keeps the classic bottom-sheet drag handle */ .pm-handle{ position:absolute; top:0; left:0; right:0; z-index:4; height:26px; display:flex; align-items:flex-start; justify-content:center; padding-top:9px; cursor:grab; touch-action:none; } .pm-handle:active{cursor:grabbing;} .pm-handle .place-modal-grabber{background:rgba(255,255,255,0.9); box-shadow:0 1px 2px rgba(0,0,0,.25);} .place-modal-name{ font-weight:700; font-size:1.4rem; line-height:1.22; letter-spacing:-0.02em; margin:0 0 6px; } .place-modal-meta{ font-size:0.88rem; color:var(--slate); margin:0 0 16px; line-height:1.4; } .place-modal-actions{ display:flex; gap:10px; margin-bottom:18px; } .place-modal-action{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; padding:10px 18px; border-radius:var(--radius-pill); font-size:0.88rem; font-weight:600; text-decoration:none; font-family:inherit; border:1px solid var(--border-strong); color:var(--paper); background:var(--bg); } .place-modal-action-ico{width:17px; height:17px; flex:none;} /* "Аудиогид внутри" — internal audio routes of a place (museum halls / park zones) */ .pm-audio{ margin:2px 0 18px; border-top:1px solid var(--border); padding-top:16px; } .pm-audio-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; } .pm-audio-title{ font-weight:700; font-size:0.98rem; color:var(--paper); } .pm-audio-sub{ font-size:0.82rem; color:var(--slate); } .pm-audio-list{ display:flex; flex-direction:column; gap:8px; } .pm-audio-card{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; padding:10px 12px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-xs); font-family:inherit; transition:border-color var(--dur-fast), background var(--dur-fast); } .pm-audio-card:hover{ border-color:var(--border-strong); background:var(--card-hover); } .pm-audio-ico{ flex:none; width:38px; height:38px; border-radius:var(--radius-sm); display:grid; place-items:center; color:var(--mk); background:color-mix(in srgb, var(--mk) 15%, var(--surface)); } .pm-audio-ico .mapx-svg{ width:20px; height:20px; } .pm-audio-body{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; } .pm-audio-name{ font-weight:600; font-size:0.92rem; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pm-audio-meta{ font-size:0.78rem; color:var(--slate); } .pm-audio-go{ flex:none; color:var(--slate); display:grid; place-items:center; } .pm-audio-go svg{ width:18px; height:18px; } /* Offer context line — what a generic offer means for THIS place. */ .offer-context{ display:flex; align-items:center; gap:6px; margin-top:6px; font-size:0.82rem; font-weight:600; color:var(--accent); line-height:1.35; } .offer-context-ico{ flex:none; width:15px; height:15px; } /* ── Entry tickets (demo purchase) ─────────────────────────────────────── */ .pm-ticket{ margin:2px 0 4px; border-top:1px solid var(--border); padding-top:16px; } .pm-ticket-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:12px; } .pm-ticket-title{ font-weight:700; font-size:0.98rem; color:var(--paper); } .pm-ticket-sub{ font-size:0.82rem; color:var(--slate); } .pm-ticket-have{ display:flex; align-items:center; gap:8px; width:100%; margin:0 0 12px; cursor:pointer; padding:10px 12px; border-radius:var(--radius-md); font:inherit; font-size:0.86rem; font-weight:600; color:var(--primary); border:1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); background:color-mix(in srgb, var(--primary) 10%, var(--surface)); } .pm-ticket-have svg{ flex:none; width:17px; height:17px; } .pm-ticket-date{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; } .pm-ticket-date-label{ font-size:0.88rem; font-weight:600; color:var(--paper); } .pm-ticket-date-input{ font:inherit; font-size:0.88rem; color:var(--paper); padding:8px 12px; cursor:pointer; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); } .pm-ticket-date-input:focus{ outline:none; border-color:var(--primary); } .pm-ticket-rows{ display:flex; flex-direction:column; } .pm-ticket-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); } .pm-ticket-row:first-child{ border-top:1px solid var(--border); } .pm-ticket-info{ display:flex; flex-direction:column; gap:2px; min-width:0; } .pm-ticket-name{ font-weight:600; font-size:0.92rem; color:var(--paper); } .pm-ticket-price{ font-size:0.82rem; color:var(--slate); font-family:'JetBrains Mono',monospace; } .pm-ticket-unit{ font-family:inherit; } .pm-ticket-stepper{ flex:none; display:inline-flex; align-items:center; gap:6px; } .pm-ticket-step{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; cursor:pointer; border:1px solid var(--border-strong); background:var(--surface); color:var(--paper); transition:border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); } .pm-ticket-step:hover{ border-color:var(--primary); color:var(--primary); } .pm-ticket-step svg{ width:16px; height:16px; } .pm-ticket-qty{ min-width:22px; text-align:center; font-weight:700; font-size:0.95rem; color:var(--paper); font-variant-numeric:tabular-nums; } .pm-ticket-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:14px; } .pm-ticket-total{ display:flex; flex-direction:column; gap:1px; } .pm-ticket-total-label{ font-size:0.76rem; color:var(--slate); } .pm-ticket-total-val{ font-family:'JetBrains Mono',monospace; font-size:1.15rem; font-weight:700; color:var(--accent); } .pm-ticket-buy{ flex:0 0 auto; margin-left:auto; padding:11px 22px; border-radius:var(--radius-pill); border:0; cursor:pointer; font-family:inherit; font-size:0.88rem; font-weight:700; background:var(--btn-primary-bg); color:var(--btn-primary-text); transition:filter var(--dur-fast), opacity var(--dur-fast); } .pm-ticket-buy:hover{ filter:brightness(1.05); } .pm-ticket-buy:disabled{ opacity:.45; cursor:not-allowed; filter:none; } /* Ticket confirmation modal (reuses the .place-modal-overlay shell). */ .ticketbuy{ max-width:400px; overflow-y:auto; } .ticketbuy-inner{ padding:26px 22px 22px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; } .ticketbuy-badge{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--primary); box-shadow:0 0 0 6px color-mix(in srgb, var(--primary) 18%, transparent); } .ticketbuy-badge svg{ width:26px; height:26px; } .ticketbuy-title{ margin:6px 0 0; font-size:1.2rem; font-weight:700; color:var(--paper); } .ticketbuy-place{ margin:0; font-size:0.86rem; line-height:1.5; color:var(--slate); max-width:34ch; } .ticketbuy-visit{ margin:2px 0 0; font-size:0.9rem; font-weight:600; color:var(--paper); } .ticketbuy-qr{ width:180px; height:180px; margin:8px 0 2px; display:grid; place-items:center; background:#fff; border-radius:var(--radius-md); padding:10px; box-shadow:var(--shadow-md); color:#0f172a; } .ticketbuy-qr svg{ width:100%; height:100%; display:block; } .ticketbuy-code{ margin:0; font-size:0.78rem; color:var(--slate); font-family:'JetBrains Mono',monospace; letter-spacing:.02em; } .ticketbuy-items{ width:100%; display:flex; flex-direction:column; margin-top:6px; } .ticketbuy-item{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--border); font-size:0.88rem; color:var(--paper); } .ticketbuy-item span:last-child{ font-family:'JetBrains Mono',monospace; color:var(--slate); } .ticketbuy-total{ width:100%; display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0 2px; border-top:2px solid var(--border-strong); } .ticketbuy-total span{ font-size:0.9rem; color:var(--slate); } .ticketbuy-total strong{ font-family:'JetBrains Mono',monospace; font-size:1.2rem; color:var(--accent); } .ticketbuy-demo{ margin:6px 0 0; font-size:0.76rem; color:var(--slate-dim); } .ticketbuy-done{ width:100%; margin-top:8px; } .place-modal-action--primary{ background:var(--btn-primary-bg); color:var(--btn-primary-text); border-color:transparent; box-shadow:var(--shadow-sm); } [data-theme="dark"] .place-modal-action--primary{ background:var(--btn-primary-bg); color:var(--btn-primary-text); border-color:transparent; } .place-modal-rows{ display:flex; flex-direction:column; border-top:1px solid var(--border); margin-bottom:18px; } .place-modal-row{ display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); font-size:0.92rem; line-height:1.45; } .place-modal-row-icon{ flex:none; width:20px; height:20px; margin-top:1px; color:var(--slate-dim); } .place-modal-row-icon svg{width:20px; height:20px; display:block;} .place-modal-row-text{color:var(--paper);} .place-modal-desc{ font-size:0.95rem; line-height:1.6; color:var(--slate); margin:0; } @media (min-width:721px){ .place-modal-overlay{ flex-direction:row; align-items:stretch; justify-content:flex-end; background:var(--overlay); } .pm-handle{display:none;} .place-modal{ width:min(440px, 42vw); max-width:none; max-height:none; height:100dvh; border-radius:0; border-left:1px solid var(--border-strong); box-shadow:-24px 0 48px -24px rgba(0,0,0,0.35); transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); } #place-modal .place-modal{border-radius:0;} .place-modal-overlay.show .place-modal{transform:translateX(0);} } /* Profile / onboarding — same overlay shell as place cards. */ #profile-modal .profile-modal .place-modal-inner{ padding:22px 20px calc(28px + env(safe-area-inset-bottom, 0px)); background:var(--surface); } #profile-modal .place-modal-close{ background:var(--card); color:var(--paper); border:1px solid var(--border); } #profile-modal .flow-header{padding-right:40px;} #profile-modal .onboarding-form{margin-top:4px;} @media (min-width:721px){ #profile-modal .profile-modal{width:min(520px, 48vw);} } /* ready options before broadcast (screen-questions) */ .ready-list{display:flex; flex-direction:column; gap:12px; margin-bottom:18px;} .ready-card{cursor:pointer;} .ready-empty{padding:18px; text-align:center; color:var(--slate); font-size:0.92rem; margin-bottom:18px; border:1px dashed var(--border-strong); border-radius:var(--radius-md);} .ready-broadcast{width:100%; justify-content:center;} /* ============ Coming Soon gate (TZ 8) ============ */ .gate-active .topbar{display:none;} #screen-coming.screen{padding:0;} .coming-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; text-align:center; gap:0; } .coming-brand{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.9rem; letter-spacing:-0.01em;} .coming-brand .dot{color:var(--primary);} .coming-title{font-size:1.15rem; font-weight:600; margin-top:22px;} .coming-sub{font-size:0.95rem; color:var(--slate); margin-top:8px; max-width:340px; line-height:1.5;} .coming-owner-link{ margin-top:38px; background:none; border:none; cursor:pointer; padding:6px 8px; font-size:0.8rem; color:var(--slate-dim); text-decoration:underline; text-underline-offset:3px; } .coming-owner-link:hover{color:var(--primary);} .coming-form{ margin-top:28px; width:100%; max-width:290px; display:flex; flex-direction:column; gap:10px; } .coming-input{ padding:12px 14px; border-radius:var(--radius-sm); font-family:inherit; font-size:0.95rem; width:100%; background:var(--surface); border:1px solid var(--border-strong); color:var(--paper); } .coming-input:focus{outline:none; border-color:var(--primary);} .coming-submit{justify-content:center; margin-top:2px;} .coming-error{font-size:0.85rem; color:var(--danger); margin-top:2px;} /* ТЗ 16.5 — deleting the profile is available, not advertised: quiet by default, red on approach. */ .survey-danger{margin-top:34px; padding-top:22px; border-top:1px solid var(--border);} .profile-forget{ background:none; border:none; padding:0; cursor:pointer; color:var(--slate); font-size:0.88rem; text-decoration:underline; text-underline-offset:3px; } .profile-forget:hover{color:#DC2626;} .profile-forget-note{margin:8px 0 0; font-size:0.8rem; color:var(--slate-dim); max-width:46ch;} /* Presentation embed (?presentation=1&embed=1) — cleaner phone mock in slides */ body.presentation-embed .site-topbar{display:none !important;} body.presentation-embed .auth-badge{display:none !important;} body.presentation-embed .back-link{display:none !important;} body.presentation-embed .flow{padding-top:12px;} body.presentation-embed #screen-buddy-gathering .buddy-gather-radar{max-width:96px;margin-bottom:10px;} body.presentation-embed #screen-buddy-gathering .buddy-gather-log{height:96px;margin-bottom:10px;} /* ============================================================ SCREEN-LANDING (референс: vita-travel.webflow.io) Цвета — через локальные переменные, всегда тёмный экран Шрифты — из существующей дизайн-системы ============================================================ */ body:has(#screen-landing.active) { overflow: hidden; background: #081019; } body:has(#screen-landing.active) .topbar { display: none; } /* Локальные переменные (тёмный режим принудительно) */ #screen-landing { --sl-bg: #081019; --sl-bg-2: #0d1825; --sl-surface: #111827; --sl-text: #F5F3EE; --sl-muted: rgba(245,243,238,0.45); --sl-dim: rgba(245,243,238,0.18); --sl-border: rgba(255,255,255,0.08); --sl-primary: #5EEAD4; --sl-accent: #F2A93B; height: 100dvh; overflow-y: auto; overflow-x: hidden; background: var(--sl-bg); color: var(--sl-text); font-family: 'Inter', system-ui, sans-serif; scroll-behavior: smooth; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; animation: none; } @media (max-height: 720px) { .sl-panel { overflow-y: auto; } } @media (prefers-reduced-motion: reduce) { #screen-landing { scroll-snap-type: none; } } .sl-panel { height: 100dvh; min-height: 100dvh; max-height: 100dvh; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } /* Мобайл: покадровый scroll-snap мешает — блоки выше экрана (напр. «Возможности» в одну колонку) «залипают» и их трудно доскроллить, т.к. mandatory-снап магнитит обратно к началу блока. Отключаем снап и даём панелям расти по контенту, чтобы скролл был обычным и ничего не обрезалось. Десктоп (панели = высота экрана) не трогаем. */ @media (max-width: 860px) { #screen-landing { scroll-snap-type: none; } .sl-panel { height: auto; min-height: 100dvh; max-height: none; overflow: visible; scroll-snap-align: none; scroll-snap-stop: normal; } } /* Заголовочный шрифт внутри лендинга: Fraunces для EN, Geologica для RU/KK — наследуем логику body.lang-* */ #screen-landing .sl-heading { font-family: 'Fraunces', serif; font-weight: 500; } body.lang-ru #screen-landing .sl-heading, body.lang-kk #screen-landing .sl-heading { font-family: 'Geologica', sans-serif; font-weight: 700; } /* --- Анимации появления (IntersectionObserver добавляет .sl-visible) --- */ .sl-anim { opacity: 0; transform: translateY(28px); transition: opacity 0.65s var(--ease-out, cubic-bezier(.22,1,.36,1)), transform 0.65s var(--ease-out, cubic-bezier(.22,1,.36,1)); } .sl-anim.sl-visible { opacity: 1; transform: translateY(0); } .sl-anim-d1 { transition-delay: 0.1s; } .sl-anim-d2 { transition-delay: 0.2s; } /* --- Header --- */ .sl-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 2.5rem; background: linear-gradient(180deg, rgba(8,16,25,0.55) 0%, rgba(8,16,25,0.12) 70%, transparent 100%); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; } #screen-landing .sl-logo { font-size: 1rem; color: var(--sl-text); } .sl-nav { display: flex; align-items: center; gap: 0.75rem; } .sl-nav > span { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); cursor: pointer; transition: color 0.15s; } .sl-nav > span:hover, .sl-nav > span.active { color: var(--sl-text); } .sl-nav-cta { padding: 0.45rem 1.1rem; border-radius: 100px; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: var(--sl-text); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.18s; font-family: inherit; } .sl-nav-cta:hover { background: rgba(255,255,255,0.08); border-color: var(--sl-text); } #screen-landing .lang-dropdown { display: block; } #screen-landing .lang-dropdown-trigger { background: transparent; border-color: rgba(255,255,255,0.3); color: var(--sl-text); padding: 0.42rem 0.75rem; } #screen-landing .lang-dropdown-menu { background: #111827; border-color: rgba(255,255,255,0.12); box-shadow: 0 18px 40px -16px rgba(0,0,0,0.55); z-index: 220; } #screen-landing .lang-dropdown-item { color: var(--sl-text); } #screen-landing .lang-dropdown-item:hover { background: rgba(255,255,255,0.08); } #screen-landing .lang-dropdown-item.active { color: var(--sl-primary); background: rgba(94,234,212,0.12); } .sl-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,0.3); border-radius:var(--radius-pill); background: transparent; color: var(--sl-text); cursor: pointer; } .sl-menu-toggle svg { width: 18px; height: 18px; } .sl-menu-toggle:hover { background: rgba(255,255,255,0.08); border-color: var(--sl-text); } .sl-menu-overlay { position: fixed; inset: 0; z-index: 240; background: rgba(4,8,14,0.62); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .sl-menu-overlay.show { opacity: 1; pointer-events: auto; } .sl-menu { position: fixed; top: 0; right: 0; z-index: 250; width: min(360px, 88vw); height: 100dvh; background: #0d1825; color: var(--sl-text); padding: 1.25rem 1.4rem 2rem; display: flex; flex-direction: column; gap: 0.15rem; transform: translateX(100%); transition: transform 0.28s cubic-bezier(.22,1,.36,1); } .sl-menu.show { transform: translateX(0); } .sl-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .sl-menu-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.2); border-radius:var(--radius-pill); background: transparent; color: var(--sl-text); cursor: pointer; } .sl-menu-close svg { width: 16px; height: 16px; } .sl-menu-link { display: block; padding: 0.95rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); color: var(--sl-text); text-decoration: none; font-size: 1.05rem; font-weight: 500; } .sl-menu-link:hover { color: var(--sl-primary); } /* --- Hero --- */ .sl-hero { position: relative; align-items: center; justify-content: center; text-align: center; padding: 5.5rem 2.5rem 6.5rem; } .sl-hero-bg { position: absolute; inset: 0; overflow: hidden; background: #081019; } .sl-hero-bg video { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; } .sl-hero-dim { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 48%, rgba(8,16,25,0.18) 0%, rgba(8,16,25,0.52) 62%, rgba(8,16,25,0.82) 100%), linear-gradient(180deg, rgba(8,22,32,0.42) 0%, rgba(14,40,48,0.28) 38%, rgba(8,16,25,0.78) 100%); transition: opacity 0.7s cubic-bezier(.22,1,.36,1); } .sl-hero.is-playing .sl-hero-dim { opacity: 0.08; } .sl-hero-copy { position: relative; z-index: 2; width: 100%; transition: opacity 0.6s cubic-bezier(.22,1,.36,1), transform 0.6s cubic-bezier(.22,1,.36,1); } .sl-hero.is-playing .sl-hero-copy { opacity: 0; transform: translateY(-16px); pointer-events: none; } .sl-hero-body { position: relative; z-index: 2; max-width: min(1180px, 94vw); width: 100%; margin: 0 auto; } .sl-hero-play { position: absolute; z-index: 4; left: 50%; bottom: 2.1rem; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.42); background: rgba(8,16,25,0.38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #F5F3EE; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .sl-hero-play:hover { background: rgba(8,16,25,0.55); border-color: rgba(255,255,255,0.7); transform: translateX(-50%) scale(1.05); } .sl-hero-play svg { width: 22px; height: 22px; display: block; } .sl-hero-play .sl-hero-play-icon { margin-left: 3px; } .sl-hero-play .sl-hero-pause-icon { display: none; } .sl-hero.is-playing .sl-hero-play .sl-hero-play-icon { display: none; } .sl-hero.is-playing .sl-hero-play .sl-hero-pause-icon { display: block; } .sl-hero-h1 { margin-bottom: 1.6rem; } .sl-hero-welcome { display: block; margin-bottom: 0.4rem; font-size: clamp(1.08rem, 2.5vw, 1.5rem); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.35; } .sl-hero-welcome-word { color: var(--sl-primary); } .sl-hero-welcome-in:not(:empty) { color: var(--sl-text); margin-left: 0.4em; } .sl-hero-city { display: block; /* 14vw подобрано так, чтобы самое широкое написание («Кыргызстан», Geologica, ширина ≈ 5.9× кегля) влезало по ширине на планшетах/малых ноутах; на десктопе работает max-кап 11.5rem. Моб. переопределение — в @media (max-width:600px). */ font-size: clamp(3rem, 14vw, 11.5rem); font-weight: 700; line-height: 0.86; letter-spacing: -0.045em; color: var(--sl-text); overflow-wrap: normal; } .sl-hero-lead { font-size: clamp(1.08rem, 2.15vw, 1.4rem); line-height: 1.55; color: rgba(245,243,238,0.9); font-weight: 400; max-width: 22em; margin: 0 auto 2.4rem; } .sl-hero-actions { display: flex; gap: 0.65rem; flex-wrap: wrap; justify-content: center; } /* --- Кнопки --- */ .sl-btn { padding: 0.85rem 2rem; border-radius: 100px; font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: all 0.18s; border: none; font-family: inherit; letter-spacing: 0.01em; } .sl-btn-primary { background: var(--sl-primary); color: #06231f; } .sl-btn-primary:hover { filter: brightness(1.08); } .sl-btn-ghost { background: transparent; color: var(--sl-text); border: 1.5px solid rgba(255,255,255,0.35); } .sl-btn-ghost:hover { border-color: var(--sl-text); background: rgba(255,255,255,0.07); } /* --- Общие стили секций --- */ #screen-landing .sl-section.sl-panel { padding: 5.5rem 2.5rem 3rem; } .sl-content-wrap { max-width: 1060px; width: 100%; margin: 0 auto; } .sl-overline { font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sl-dim); margin-bottom: 1.25rem; } .sl-section-h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--sl-text); max-width: 640px; margin-bottom: 2.2rem; } /* --- About --- */ .sl-about { background: var(--sl-bg); } .sl-about-inner { max-width: 1060px; width: 100%; margin: 0 auto; } .sl-item-icon { width: 42px; height: 42px; border-radius:var(--radius-sm); display: flex; align-items: center; justify-content: center; background: rgba(94,234,212,0.12); color: var(--sl-primary); margin-bottom: 0.85rem; flex-shrink: 0; } .sl-item-icon svg { width: 20px; height: 20px; } .sl-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .sl-about-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius:var(--radius-xs); display: block; } .sl-about-text { font-size: 1rem; line-height: 1.8; color: var(--sl-muted); font-weight: 300; margin-bottom: 3rem; } .sl-about-stats { display: flex; gap: 3rem; } .sl-stat-n { font-family: 'Fraunces', serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 500; color: var(--sl-text); letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.4rem; } body.lang-ru .sl-stat-n, body.lang-kk .sl-stat-n { font-family: 'Geologica', sans-serif; font-weight: 700; } .sl-stat-l { font-size: 0.78rem; color: var(--sl-dim); font-weight: 300; line-height: 1.4; } /* --- How it works (fullscreen bg) --- */ .sl-how { position: relative; padding: 0 !important; justify-content: stretch; } .sl-how-bg { position: absolute; inset: 0; overflow: hidden; } .sl-how-bg img { width: 100%; height: 100%; object-fit: cover; } .sl-how-dim { position: absolute; inset: 0; background: rgba(8,16,25,0.62); } .sl-how-inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 7rem 2.5rem 3.5rem; } .sl-how-top { max-width: 580px; } .sl-how-label { font-size: 0.78rem; color: var(--sl-muted); letter-spacing: 0.05em; margin-bottom: 1.75rem; } .sl-how-lines { display: flex; flex-direction: column; gap: 0.1rem; } .sl-how-line { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; color: var(--sl-text); letter-spacing: -0.02em; line-height: 1.1; } .sl-how-bottom { display: grid; grid-template-columns: 1fr 3fr; gap: 3rem; align-items: stretch; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 2.5rem; margin-top: 5rem; } .sl-how-desc { font-size: clamp(1.05rem, 1.55vw, 1.25rem); line-height: 1.55; color: rgba(245,243,238,0.88); font-weight: 400; align-self: start; } .sl-steps-row { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid rgba(255,255,255,0.14); } .sl-step { display: flex; flex-direction: column; align-items: flex-start; min-height: 11.5rem; padding: 0 1.6rem 0.15rem; border-right: 1px solid rgba(255,255,255,0.14); } .sl-step-n { font-size: clamp(2.8rem, 5vw, 4.4rem); font-weight: 700; color: var(--sl-text); line-height: 0.95; letter-spacing: -0.04em; margin-bottom: 0.2rem; } .sl-step-kicker { font-size: 0.82rem; font-weight: 400; color: rgba(245,243,238,0.5); margin-bottom: auto; padding-bottom: 2.4rem; } .sl-step-label { font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--sl-text); line-height: 1.3; } /* --- Grid 2x2 (для Why и Trust) --- */ .sl-why { background: var(--sl-bg); } .sl-trust { background: var(--sl-bg-2); } .sl-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--sl-border); } .sl-grid-item { padding: 2.25rem 2.25rem 2.25rem 0; border-bottom: 1px solid var(--sl-border); border-right: 1px solid var(--sl-border); } .sl-grid-item:nth-child(even) { padding-left: 2.25rem; padding-right: 0; border-right: none; } .sl-grid-item:nth-child(3), .sl-grid-item:nth-child(4) { border-bottom: none; } .sl-item-title { font-size: 0.95rem; font-weight: 600; color: var(--sl-text); margin-bottom: 0.65rem; } .sl-item-text { font-size: 0.82rem; line-height: 1.75; color: var(--sl-muted); font-weight: 300; } /* --- Возможности: карточки с «Подробнее» --- */ .sl-feat-card { display: flex; flex-direction: column; } .sl-feat-card .sl-item-text { flex: 1; } .sl-feat-more { margin-top: 1.3rem; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 0; background: none; border: none; cursor: pointer; color: var(--sl-primary); font-family: inherit; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; } .sl-feat-more svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease-out, cubic-bezier(.22,1,.36,1)); } .sl-feat-more:hover svg { transform: translateX(4px); } .sl-feat-more:focus-visible { outline: 2px solid var(--sl-primary); outline-offset: 3px; border-radius: 4px; } /* --- Feature drawer: мобайл — шторка снизу, десктоп — панель справа --- */ .sl-drawer-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; background: rgba(4,8,14,0.62); opacity: 0; transition: opacity 0.3s ease; -webkit-font-smoothing: antialiased; } .sl-drawer-overlay[hidden] { display: none; } .sl-drawer-overlay.show { opacity: 1; } body.sl-drawer-open #screen-landing { overflow: hidden; } .sl-drawer { --sl-bg:#081019; --sl-bg-2:#0d1825; --sl-surface:#111827; --sl-text:#F5F3EE; --sl-muted:rgba(245,243,238,0.55); --sl-border:rgba(255,255,255,0.08); --sl-primary:#5EEAD4; position: relative; width: 100%; max-height: 90dvh; background: var(--sl-bg-2); color: var(--sl-text); border-top: 1px solid var(--sl-border); border-radius: 22px 22px 0 0; box-shadow: 0 -24px 60px -24px rgba(0,0,0,0.6); overflow: hidden; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.34s cubic-bezier(.2,.8,.2,1); font-family: 'Inter', system-ui, sans-serif; } .sl-drawer-overlay.show .sl-drawer { transform: translateY(0); } .sl-drawer-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--sl-border); background: rgba(255,255,255,0.05); color: var(--sl-text); cursor: pointer; transition: background 0.2s; } .sl-drawer-close:hover { background: rgba(255,255,255,0.12); } .sl-drawer-close svg { width: 18px; height: 18px; } .sl-drawer-inner { padding: 2.6rem 2rem 2.2rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .sl-drawer-icon { width: 52px; height: 52px; border-radius:var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--sl-primary); background: rgba(94,234,212,0.12); border: 1px solid rgba(94,234,212,0.22); margin-bottom: 1.4rem; } .sl-drawer-icon svg { width: 26px; height: 26px; } .sl-drawer-title { font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--sl-text); margin-bottom: 0.9rem; } .sl-drawer-lead { font-size: 0.95rem; line-height: 1.7; color: var(--sl-muted); font-weight: 300; margin-bottom: 1.6rem; } .sl-drawer-list { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .sl-drawer-list li { position: relative; padding-left: 1.7rem; font-size: 0.9rem; line-height: 1.55; color: var(--sl-text); } .sl-drawer-list li svg { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; color: var(--sl-primary); } .sl-drawer-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0.9rem 1.6rem; border-radius:var(--radius-pill); font-size: 0.9rem; font-weight: 600; cursor: pointer; border: none; background: var(--sl-primary); color: #06251f; font-family: inherit; transition: filter 0.2s, transform 0.2s; } .sl-drawer-cta:hover { filter: brightness(1.06); transform: translateY(-1px); } .sl-drawer-cta svg { width: 17px; height: 17px; } @media (min-width: 721px) { .sl-drawer-overlay { flex-direction: row; align-items: stretch; justify-content: flex-end; } .sl-drawer { width: min(460px, 44vw); max-height: none; height: 100dvh; border-radius: 0; border-top: none; border-left: 1px solid var(--sl-border); box-shadow: -30px 0 60px -30px rgba(0,0,0,0.7); transform: translateX(100%); } .sl-drawer-overlay.show .sl-drawer { transform: translateX(0); } .sl-drawer-inner { padding: 3.4rem 2.6rem 2.6rem; } } @media (prefers-reduced-motion: reduce) { .sl-drawer { transition: none; } } /* Секция «Возможности» — 6 карточек. Десктоп: сетка 3×2 (два ряда влезают в высоту экрана), планшет/мобайл (≤860px): одна колонка. Границы переопределяем — базовое правило .sl-grid-2x2 рассчитано на 2 колонки/4 карточки. */ .sl-features.sl-panel { height: auto; min-height: 100dvh; max-height: none; overflow: visible; } @media (min-width: 861px) { .sl-features.sl-panel { padding-top: 3rem; padding-bottom: 2rem; } .sl-features .sl-section-h2 { margin-bottom: 0.5rem; } .sl-features .sl-grid-2x2 { grid-template-columns: repeat(3, 1fr); margin-top: 1.5rem; } .sl-features .sl-grid-item { padding: 1.6rem 1.75rem; border-right: 1px solid var(--sl-border); border-bottom: 1px solid var(--sl-border); } .sl-features .sl-grid-item:nth-child(3n+1) { padding-left: 0; } .sl-features .sl-grid-item:nth-child(3n) { padding-right: 0; border-right: none; } .sl-features .sl-grid-item:nth-child(n+4) { border-bottom: none; padding-bottom: 0; } } @media (max-width: 860px) { .sl-features .sl-grid-2x2 { grid-template-columns: 1fr; } .sl-features .sl-grid-item { padding: 1.4rem 0; border-right: none; border-bottom: 1px solid var(--sl-border); } .sl-features .sl-grid-item:nth-child(even) { padding-left: 0; padding-right: 0; } .sl-features .sl-grid-item:last-child { border-bottom: none; } } @media (max-width: 860px) { .sl-why .sl-grid-2x2, .sl-trust .sl-grid-2x2 { grid-template-columns: 1fr; } .sl-why .sl-grid-item, .sl-trust .sl-grid-item { padding: 1.25rem 0; border-right: none; } .sl-why .sl-grid-item:nth-child(even), .sl-trust .sl-grid-item:nth-child(even) { padding-left: 0; padding-right: 0; } .sl-why .sl-grid-item:nth-child(3), .sl-why .sl-grid-item:nth-child(4), .sl-trust .sl-grid-item:nth-child(3), .sl-trust .sl-grid-item:nth-child(4) { border-bottom: 1px solid var(--sl-border); } .sl-why .sl-grid-item:last-child, .sl-trust .sl-grid-item:last-child { border-bottom: none; } .sl-steps-row { grid-template-columns: 1fr; border-left: none; } .sl-step { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; row-gap: 0.12rem; min-height: 0; padding: 1.05rem 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.14); align-items: start; } .sl-step:last-child { border-bottom: none; } .sl-step-n { grid-row: 1 / span 2; font-size: 2.35rem; margin: 0; line-height: 1; } .sl-step-kicker { padding-bottom: 0; margin: 0; } .sl-step-label { font-size: 1.08rem; } } /* --- CTA --- */ .sl-cta { background: var(--sl-bg); padding: 5.5rem 2.5rem 3rem !important; justify-content: center; } .sl-cta-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; } .sl-cta-h2 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--sl-text); max-width: 700px; margin-bottom: 2.5rem; } .sl-cta .sl-hero-actions { justify-content: flex-start; } /* --- Presence map --- */ .sl-presence { background: var(--sl-bg-2); padding: 5.5rem 2.5rem 0 !important; justify-content: flex-end; } .sl-presence-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 1100px; margin: 0 auto; min-height: 0; } .sl-presence .sl-section-h2 { margin-bottom: 0.7rem; } .sl-presence-desc { font-size: clamp(0.95rem, 1.4vw, 1.12rem); line-height: 1.55; color: rgba(245,243,238,0.72); max-width: 36rem; margin-bottom: 1.6rem; } .sl-presence-acc { width: 100%; border-top: 1px solid var(--sl-border); } .sl-acc { border-bottom: 1px solid var(--sl-border); } .sl-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; font-size: clamp(1.2rem, 2.6vw, 1.7rem); font-weight: 600; color: var(--sl-text); letter-spacing: -0.02em; } .sl-acc summary::-webkit-details-marker { display: none; } .sl-acc summary::marker { content: ""; } .sl-acc-icon { width: 0.55rem; height: 0.55rem; border-right: 1.5px solid rgba(245,243,238,0.55); border-bottom: 1.5px solid rgba(245,243,238,0.55); transform: rotate(45deg); transition: transform 0.2s ease; flex-shrink: 0; margin-right: 0.15rem; } .sl-acc[open] .sl-acc-icon { transform: rotate(225deg); } .sl-acc-body { display: flex; flex-direction: column; padding: 0 0 1.05rem; } .sl-acc-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.72rem 0; color: var(--sl-text); text-decoration: none; font-size: clamp(1rem, 1.5vw, 1.15rem); border-top: 1px solid rgba(255,255,255,0.06); } a.sl-acc-row:hover, a.sl-acc-row:focus-visible { color: var(--sl-primary); } .sl-acc-row.is-soon { color: rgba(245,243,238,0.45); cursor: default; } .sl-acc-soon { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-primary); border: 1px solid rgba(94,234,212,0.35); border-radius:var(--radius-pill); padding: 0.2rem 0.55rem; flex-shrink: 0; } /* --- Footer --- */ .sl-footer { padding: 1.4rem 0 1.6rem; margin-top: auto; background: transparent; border-top: 1px solid var(--sl-border); display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1060px; align-self: center; } #screen-landing .sl-footer-logo { font-size: 0.88rem; color: var(--sl-dim); } .sl-footer-credit { margin: 0; font-size: 0.72rem; line-height: 1.4; color: var(--sl-dim); letter-spacing: 0.02em; text-align: center; } .sl-footer-links { display: flex; gap: 1.75rem; } .sl-footer-links a { font-size: 0.7rem; color: var(--sl-dim); text-decoration: none; letter-spacing: 0.06em; transition: color 0.15s; } .sl-footer-links a:hover { color: var(--sl-muted); } /* --- Mobile --- */ @media (max-width: 600px) { .sl-header { padding: 1rem 1.25rem; } .sl-nav-cta { display: none; } .sl-hero { padding: 5rem 1.25rem 5.5rem; } .sl-hero-play { width: 56px; height: 56px; bottom: 1.5rem; } .sl-hero-city { font-size: clamp(2rem, 14vw, 5rem); } #screen-landing .sl-section.sl-panel { padding: 5rem 1.25rem 2rem; } .sl-about-grid { grid-template-columns: 1fr; gap: 1.25rem; } .sl-about-img img { aspect-ratio: 16/9; max-height: 28vh; } .sl-about-stats { gap: 1.5rem; } .sl-stat-n { font-size: 2.2rem; } .sl-how-inner { padding: 5rem 1.25rem 2rem; } .sl-how-bottom { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; padding-top: 1.25rem; } .sl-how-line { font-size: clamp(1.6rem, 8vw, 2.2rem); } .sl-how-desc { font-size: 1.02rem; } .sl-how.sl-panel { overflow-y: auto; } .sl-steps-row { grid-template-columns: 1fr; border-left: none; } .sl-step { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; row-gap: 0.12rem; min-height: 0; padding: 1.05rem 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.14); align-items: start; } .sl-step:last-child { border-bottom: none; } .sl-step-n { grid-row: 1 / span 2; font-size: 2.35rem; margin: 0; line-height: 1; } .sl-step-kicker { font-size: 0.72rem; padding-bottom: 0; margin: 0; } .sl-step-label { font-size: 1.05rem; } .sl-why .sl-grid-2x2, .sl-trust .sl-grid-2x2 { grid-template-columns: 1fr; } .sl-why .sl-grid-item, .sl-trust .sl-grid-item { padding: 1.15rem 0; border-right: none; } .sl-why .sl-grid-item:nth-child(even), .sl-trust .sl-grid-item:nth-child(even) { padding-left: 0; padding-right: 0; } .sl-why .sl-grid-item:nth-child(3), .sl-trust .sl-grid-item:nth-child(3) { border-bottom: 1px solid var(--sl-border); } .sl-why .sl-grid-item:last-child, .sl-trust .sl-grid-item:last-child { border-bottom: none; } .sl-why .sl-item-title, .sl-trust .sl-item-title { font-size: 1.02rem; } .sl-why .sl-item-text, .sl-trust .sl-item-text { font-size: 0.86rem; line-height: 1.55; } .sl-section-h2 { margin-bottom: 1.25rem; } .sl-cta { padding: 5rem 1.25rem 3rem !important; } .sl-cta .sl-hero-actions { justify-content: center; } .sl-cta-h2 { text-align: center; margin-left: auto; margin-right: auto; } .sl-why.sl-panel, .sl-trust.sl-panel, .sl-presence.sl-panel { overflow-y: auto; } .sl-presence { padding: 5rem 1.25rem 0 !important; } .sl-presence .sl-section-h2 { margin-bottom: 0.5rem; } .sl-presence-desc { margin-bottom: 1rem; font-size: 0.92rem; } .sl-acc summary { font-size: 1.15rem; padding: 1rem 0; } .sl-acc-row { font-size: 0.98rem; padding: 0.62rem 0; } .sl-footer { flex-direction: column; gap: 0.75rem; padding: 1.1rem 0 1.3rem; } } /* ============================================================ PRE-TRIP PLANNER ============================================================ */ #plan-params-form{gap:40px;} #plan-params-form .q-field{gap:16px;} #plan-params-form .q-field-head{ display:flex; align-items:center; gap:10px; } #plan-params-form .q-field-ico{ width:36px; height:36px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); background:rgba(var(--primary-rgb),0.12); color:var(--primary); } #plan-params-form .q-field-ico svg{width:20px; height:20px; display:block;} #plan-params-form .q-field-label{ font-size:1.18rem; font-weight:700; line-height:1.25; color:var(--paper); letter-spacing:-0.02em; } #plan-params-form .seg-track{ background:transparent; border:0; box-shadow:none; padding:0; gap:12px; border-radius:0; flex-wrap:nowrap; } #plan-params-form .seg-indicator{display:none;} #plan-params-form .seg-opt{ border:1px solid var(--border-strong); background:var(--surface); padding:12px 14px; font-size:0.9rem; font-weight:500; box-shadow:none; border-radius:var(--radius-sm); transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } #plan-params-form .seg-opt:hover{ border-color:rgba(var(--primary-rgb),0.4); color:var(--paper); } #plan-params-form .seg-opt.on{ background:linear-gradient(135deg, rgba(var(--primary-rgb),0.14), rgba(var(--accent-rgb),0.08)); border-color:var(--primary); color:var(--primary); font-weight:650; box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.1); } #plan-params-form .seg-opt-stack{ flex-direction:column; gap:2px; padding:10px 12px 11px; } #plan-params-form .seg-opt-title{ font-size:0.9rem; font-weight:650; line-height:1.2; } #plan-params-form .seg-opt-hint{ font-size:0.72rem; font-weight:500; color:var(--slate); line-height:1.2; } #plan-params-form .seg-star{ display:inline-block; margin:0 0.12em; font-size:0.92em; line-height:1; vertical-align:0.02em; } #plan-params-form .seg-opt.on .seg-opt-hint{ color:var(--primary); opacity:0.82; } #plan-params-form .seg-panel{ display:grid; grid-template-rows:0fr; opacity:0; margin-top:0; padding:0; border:0; background:transparent; overflow:hidden; pointer-events:none; } #plan-params-form .seg-panel:not([hidden]){ grid-template-rows:1fr; opacity:1; margin-top:14px; pointer-events:auto; } #plan-params-form.is-ready .seg-panel{ transition: grid-template-rows var(--dur-normal) var(--ease-out), opacity var(--dur-normal) ease, margin-top var(--dur-normal) var(--ease-out); } #plan-params-form .seg-panel[hidden]{ display:grid !important; } #plan-params-form .seg-reveal-inner{ min-height:0; overflow:hidden; } #plan-params-form .seg-reveal-card{ border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); padding:16px 18px; } #plan-params-form .count-block{ flex-direction:row; align-items:center; justify-content:space-between; gap:16px; width:100%; } #plan-params-form .count-block-label{ font-size:0.95rem; font-weight:500; color:var(--paper); text-align:left; min-width:0; flex:1; } #plan-params-form .count-pill{ flex-shrink:0; overflow:visible; align-items:center; padding:4px; gap:2px; } #plan-params-form .count-pill button{ width:32px; height:32px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface); } #plan-params-form .count-pill button:hover{ border-color:rgba(var(--primary-rgb),0.45); background:rgba(var(--primary-rgb),0.08); } #plan-params-form .count-pill button + span, #plan-params-form .count-pill span + button{border-left:0;} #plan-params-form .count-pill span{ min-width:36px; height:32px; } #plan-params-form .seg-time{ justify-content:space-between; } #plan-params-form .seg-age-field{ animation:planFieldIn var(--dur-normal) var(--ease-out); } @keyframes planFieldIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} } #plan-params-form .send-row{margin-top:4px;} #plan-needs.chip-choice{gap:12px;} #plan-needs .choice-chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px 10px 12px; background:var(--inset); } #plan-needs .choice-chip-ico{ width:18px; height:18px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; } #plan-needs .choice-chip-ico svg{width:18px; height:18px; display:block;} #plan-needs .choice-chip.on{ background:linear-gradient(135deg, rgba(var(--primary-rgb),0.14), rgba(var(--accent-rgb),0.08)); } @media (max-width:640px){ #screen-plan-params .flow{ padding:100px 16px calc(36px + env(safe-area-inset-bottom, 0px)); } #screen-plan-params .flow-header{margin-bottom:28px;} #screen-plan-params .flow-title{font-size:1.55rem;} #plan-params-form{gap:32px;} #plan-params-form .q-field{gap:14px;} #plan-params-form .q-field-label{font-size:1.06rem;} #plan-params-form .q-field-ico{width:32px; height:32px; border-radius:var(--radius-sm);} #plan-params-form .seg-track{ flex-wrap:wrap; gap:8px; } #plan-group .seg-track > .seg-opt{ flex:1 1 calc(50% - 4px); min-height:44px; padding:10px 8px; font-size:0.82rem; } #plan-budget .seg-track, #plan-arrival-point .seg-track{ flex-wrap:nowrap; } #plan-budget .seg-track > .seg-opt, #plan-arrival-point .seg-track > .seg-opt{ flex:1 1 0; min-width:0; min-height:44px; padding:8px 6px; } #plan-params-form .seg-opt-title{font-size:0.8rem;} #plan-params-form .seg-opt-hint{ font-size:0.62rem; line-height:1.25; } #plan-params-form .seg-reveal-card{padding:14px 14px;} #plan-params-form .count-block{ flex-wrap:nowrap; gap:10px; } #plan-params-form .count-block-label{font-size:0.88rem;} #plan-params-form .count-pill button{ width:36px; height:36px; } #plan-params-form .count-pill span{ min-width:32px; height:36px; } #plan-params-form .seg-time{ flex-wrap:nowrap; gap:10px; } #plan-params-form .seg-time .q-input{ flex:1; max-width:none; min-width:0; min-height:44px; } #plan-params-form .seg-unknown{ height:44px; padding:0 14px; flex-shrink:0; } #plan-params-form .seg-age-fields{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } #plan-params-form .send-row{ justify-content:stretch; margin-top:4px; } #plan-params-form .send-row .btn-primary{width:100%;} #plan-needs.chip-choice{gap:8px;} } @media (max-width:380px){ #plan-budget .seg-track{ flex-wrap:wrap; } #plan-budget .seg-track > .seg-opt{ flex:1 1 calc(50% - 4px); } } .plan-range{position:relative;} .plan-range-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; padding:13px 16px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface); color:var(--paper); font-family:inherit; font-size:0.95rem; font-weight:550; cursor:pointer; box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .plan-range-btn:hover{border-color:rgba(var(--primary-rgb),0.4);} .plan-range-btn:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.14); } .plan-range-btn.is-open{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.14); } .plan-range-text{flex:1; min-width:0;} .plan-range-text.is-placeholder{color:var(--slate); font-weight:500;} .plan-range-ico{width:20px; height:20px; flex-shrink:0; color:var(--primary); opacity:0.85;} .plan-range-pop{ position:absolute; z-index:30; top:calc(100% + 8px); left:0; right:0; background:var(--surface-elevated); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:14px 16px 16px; /* Контейнер для запроса по СВОЕЙ ширине: попап ограничен шириной карточки, а не вьюпорта, поэтому сворачивание двух месяцев в один считаем от ширины попапа. */ container:plancal / inline-size; } .plan-range-pop[hidden]{display:none !important;} .plan-cal-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; } .plan-cal-titles{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; text-align:center; font-weight:650; font-size:0.92rem; text-transform:capitalize; } .plan-cal-nav{ width:36px; height:36px; flex-shrink:0; border:1px solid var(--border-strong); border-radius:var(--radius-pill); background:var(--surface); color:var(--paper); font-size:1.25rem; line-height:1; cursor:pointer; font-family:inherit; } .plan-cal-nav:hover{border-color:rgba(var(--primary-rgb),0.45); color:var(--primary);} .plan-cal-nav:disabled{opacity:0.35; cursor:default; color:var(--slate-dim);} .plan-cal-months{ display:grid; /* minmax(0,1fr): без него grid-колонка не сжимается ниже min-content месяца (~200px), и два месяца вылезают за узкую панель-попап внутри карточки (overflow вправо). */ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; } .plan-cal-month{min-width:0;} .plan-cal-week{ display:grid; grid-template-columns:repeat(7, 1fr); margin-bottom:4px; } .plan-cal-week span{ text-align:center; font-size:0.7rem; font-weight:650; letter-spacing:0.04em; text-transform:uppercase; color:var(--slate-dim); padding:4px 0; } .plan-cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px 0; } .plan-cal-day{ height:36px; border:0; background:transparent; color:var(--paper); font-family:inherit; font-size:0.82rem; font-weight:550; cursor:pointer; border-radius:var(--radius-pill); position:relative; z-index:1; } .plan-cal-day.is-out, .plan-cal-day.is-past{ color:var(--slate-dim); opacity:0.38; pointer-events:none; } .plan-cal-day.in-range{ background:rgba(var(--primary-rgb),0.12); border-radius:0; } .plan-cal-day.range-start, .plan-cal-day.range-end{ background:var(--primary); color:var(--btn-primary-text); font-weight:700; border-radius:var(--radius-pill); } .plan-cal-day.is-today:not(.range-start):not(.range-end){ box-shadow:inset 0 0 0 1.5px rgba(var(--primary-rgb),0.55); } .plan-cal-day:not(.is-past):not(.is-out):hover:not(.range-start):not(.range-end){ background:rgba(var(--primary-rgb),0.1); } /* Два месяца требуют ~460px. Когда попап уже (узкая карточка) — один месяц с навигацией стрелками. Запрос по ширине контейнера-попапа, а не вьюпорта: иначе на широком экране с узкой карточкой сетка вылезает за панель. */ @container plancal (max-width:459px){ .plan-cal-months{grid-template-columns:1fr;} .plan-cal-titles{grid-template-columns:1fr;} .plan-cal-titles span:nth-child(2), .plan-cal-month:nth-child(2){display:none;} .plan-cal-day{height:44px; font-size:0.95rem;} } .plan-nights-hint{ font-size:0.84rem; color:var(--slate); margin-top:-8px; } .accom-nights-hint{ font-size:0.86rem; font-weight:600; color:var(--primary); margin:-6px 0 4px; } .plan-kids-add{ display:flex; gap:8px; align-items:center; margin-top:8px; } .plan-kids-add .q-input{max-width:120px;} .plan-kids-add .btn-secondary{padding:10px 14px; font-size:0.84rem;} .plan-time-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .plan-time-row .q-input{max-width:180px;} .plan-diy{ width:100%; text-align:left; cursor:pointer; border:1px solid var(--border-strong); background:var(--surface-elevated); border-radius:var(--radius-md); padding:22px 24px; box-shadow:var(--shadow-xs); margin-bottom:28px; transition:border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease; } .plan-diy:hover{ transform:translateY(-2px); border-color:rgba(var(--primary-rgb),0.4); box-shadow:var(--shadow-md); } .plan-diy-kicker{ font-size:0.72rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--primary); margin-bottom:6px; } .plan-diy-title{font-size:1.15rem; font-weight:650; margin-bottom:6px;} .plan-diy-sub{font-size:0.88rem; color:var(--slate); line-height:1.45;} .plan-preset-label{ font-size:0.74rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-dim); margin-bottom:14px; } .plan-preset-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; } @media (max-width:640px){ .plan-preset-grid{grid-template-columns:1fr;} } .plan-preset-card{ display:flex; flex-direction:column; text-align:left; cursor:pointer; border:1px solid var(--border); background:var(--surface-elevated); border-radius:var(--radius-md); padding:0; overflow:hidden; box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease; } .plan-preset-media{ position:relative; } .plan-preset-photo{ width:100%; aspect-ratio:4 / 3; height:auto; object-fit:cover; display:block; background:var(--card); } .plan-preset-cat{ position:absolute; top:12px; left:12px; font-size:0.7rem; font-weight:700; letter-spacing:0.03em; color:#fff; background:rgba(15,23,42,0.62); backdrop-filter:blur(6px); padding:5px 10px; border-radius:var(--radius-pill); } .plan-preset-copy{ display:flex; flex-direction:column; flex:1; padding:16px 18px 18px; } .plan-preset-card:hover{ transform:translateY(-2px); border-color:rgba(var(--primary-rgb),0.35); box-shadow:var(--shadow-md); } .plan-preset-name{ font-size:1.08rem; font-weight:700; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .plan-preset-meta{ font-size:0.84rem; color:var(--slate); line-height:1.45; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em; } .plan-preset-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; min-height:58px; max-height:58px; overflow:hidden; align-content:flex-start; } .plan-preset-tag{ font-size:0.74rem; font-weight:600; color:var(--paper); background:var(--card); border-radius:var(--radius-pill); padding:4px 10px; white-space:nowrap; } .plan-preset-stats{ display:flex; flex-wrap:wrap; gap:8px 14px; padding-top:12px; margin-bottom:14px; border-top:1px solid var(--border); } .plan-preset-stat{ display:inline-flex; align-items:center; gap:5px; font-size:0.78rem; color:var(--slate); } .plan-preset-stat svg{ width:15px; height:15px; color:var(--slate-dim); flex-shrink:0; } .plan-preset-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:nowrap; } .plan-preset-price{font-size:1.05rem; font-weight:700; color:var(--paper); white-space:nowrap;} .plan-preset-cta{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; font-size:0.82rem; font-weight:650; color:var(--primary); background:rgba(var(--primary-rgb),0.1); border-radius:var(--radius-pill); padding:7px 14px; white-space:nowrap; transition:background var(--dur-fast) ease; } .plan-preset-card:hover .plan-preset-cta{ background:rgba(var(--primary-rgb),0.18); } .plan-preset-cta svg{ width:15px; height:15px; } .plan-builder-flow{padding-bottom:140px;} @media (max-width:720px){ .plan-builder-flow{padding-bottom:188px;} } .plan-module{ border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-md); padding:18px; margin-bottom:16px; box-shadow:var(--shadow-xs); } .plan-module-h{ font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate-dim); margin-bottom:12px; } .plan-stay-card, .plan-item-card, .plan-transfer-opt, .plan-extra-row{ display:flex; gap:14px; align-items:flex-start; } .plan-stay-photo, .plan-item-photo{ width:88px; height:72px; border-radius:var(--radius-sm); object-fit:cover; flex-shrink:0; background:var(--card); } .plan-stay-body, .plan-item-body{flex:1; min-width:0;} .plan-stay-name, .plan-item-name{font-weight:650; margin-bottom:3px; line-height:1.3;} .plan-item-head{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-bottom:4px; } .plan-item-head .plan-item-name{margin-bottom:0; flex:1 1 8rem; min-width:0;} .plan-item-flags{display:flex; flex-wrap:wrap; gap:4px; flex-shrink:0;} .plan-stay-meta, .plan-item-meta{font-size:0.82rem; color:var(--slate); line-height:1.4;} .plan-item-meta{ display:flex; flex-wrap:wrap; align-items:center; row-gap:4px; } .plan-item-chip{ white-space:nowrap; font-variant-numeric:tabular-nums; } .plan-item-chip:not(:last-child)::after{ content:"·"; margin:0 0.42em; opacity:0.42; font-weight:600; } .plan-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-weight:650; font-size:0.92rem; margin-top:6px; } .plan-price-now{white-space:nowrap; font-variant-numeric:tabular-nums;} .plan-price-hint{ font-size:0.78rem; font-weight:550; color:var(--slate); white-space:nowrap; } .plan-free{ display:inline-block; font-size:0.72rem; font-weight:650; color:var(--success); background:rgba(var(--success-rgb),0.12); border-radius:var(--radius-pill); padding:2px 8px; } .plan-item-card{ width:100%; text-align:left; cursor:pointer; border:1px solid var(--border); background:var(--surface-elevated); border-radius:var(--radius-sm); padding:12px; margin-bottom:8px; } .plan-item-card:hover{border-color:rgba(var(--primary-rgb),0.35);} /* days rendered as separate cards, not one big module box */ .plan-module--days{ border:none; background:none; box-shadow:none; padding:0; } .plan-module--days > .plan-module-h{ padding-left:2px; } .plan-day{ position:relative; background:var(--surface-elevated); border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:var(--radius-md); padding:15px 16px 13px; margin-bottom:16px; box-shadow:var(--shadow-xs); } .plan-day-h{ display:flex; align-items:center; gap:10px; font-size:1rem; font-weight:700; padding-bottom:11px; margin-bottom:10px; border-bottom:1px solid var(--border); } .plan-day-title{ flex:1; min-width:0; } .plan-day-badge{ font-size:0.7rem; font-weight:600; color:var(--slate); background:var(--card); border-radius:var(--radius-pill); padding:3px 9px; white-space:nowrap; } .plan-day-empty{ font-size:0.86rem; color:var(--slate-dim); padding:8px 0; } /* time-of-day sections */ .plan-slot{ border:1px solid transparent; border-radius:var(--radius-md); padding:6px 8px 4px; margin-bottom:6px; transition:background .12s ease, border-color .12s ease; } .plan-slot.is-drop-target{ background:rgba(var(--primary-rgb),0.05); border-color:rgba(var(--primary-rgb),0.4); } .plan-slot-h{ display:flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:650; letter-spacing:0.05em; text-transform:uppercase; color:var(--slate-dim); margin:2px 2px 8px; } .plan-slot-h svg{ width:14px; height:14px; } .plan-slot-items{ min-height:8px; } .plan-slot-empty{ font-size:0.8rem; color:var(--slate-dim); padding:6px 4px 10px; } .plan-add-btn, .plan-text-btn{ background:none; border:none; color:var(--primary); font-weight:600; font-size:0.84rem; cursor:pointer; padding:8px 0; } .plan-text-btn{color:var(--slate);} .plan-text-btn:hover{color:var(--paper);} .plan-transfer-opt{ width:100%; text-align:left; cursor:pointer; border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:8px; background:var(--surface-elevated); } .plan-transfer-opt.on{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.1); } .plan-extra-row{ align-items:center; padding:10px 0; border-bottom:1px solid var(--border); } .plan-extra-row:last-child{border-bottom:none;} .plan-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:none; padding:12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); background:var(--surface-elevated); border-top:1px solid var(--border); box-shadow:var(--shadow-lg); } #screen-plan-builder.active ~ .plan-sticky, body:has(#screen-plan-builder.active) .plan-sticky{display:block;} .plan-sticky-inner{ max-width:1080px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; } .plan-sticky-meta{min-width:0; flex:1;} .plan-sticky-total{font-size:0.82rem; color:var(--slate);} .plan-sticky-sum{ font-size:1.1rem; font-weight:700; color:var(--paper); white-space:nowrap; font-variant-numeric:tabular-nums; } .plan-sticky-later{ font-size:0.82rem; color:var(--slate); white-space:nowrap; } .plan-sticky .btn-primary{flex-shrink:0;} @media (max-width:720px){ .plan-sticky{ padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); } .plan-sticky-inner{ flex-direction:column; align-items:stretch; gap:10px; } .plan-sticky-now{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .plan-sticky-sum{font-size:1.22rem;} .plan-sticky-later{white-space:normal;} .plan-sticky .btn-primary{ width:100%; flex-shrink:1; padding:14px 18px; } } .plan-modal-overlay{ position:fixed; inset:0; z-index:80; background:var(--overlay); display:flex; align-items:flex-end; justify-content:center; } .plan-modal-overlay[hidden]{display:none;} .plan-modal{ position:relative; width:100%; max-width:560px; max-height:88dvh; overflow:auto; background:var(--surface-elevated); border-radius:24px 24px 0 0; padding:28px 22px 32px; } @media (min-width:721px){ /* Десктоп: панель справа во всю высоту (единый паттерн) */ .plan-modal-overlay{align-items:stretch; justify-content:flex-end;} .plan-modal{ width:min(440px,42vw); max-width:none; max-height:none; height:100dvh; border-radius:0; border-left:1px solid var(--border-strong); box-shadow:-24px 0 48px -24px rgba(0,0,0,0.35); animation:sheetSlideRight .3s cubic-bezier(.2,.8,.2,1); } } .plan-modal-close{ position:absolute; top:14px; right:14px; width:36px; height:36px; border:none; background:var(--card); border-radius:50%; cursor:pointer; color:var(--paper); display:flex; align-items:center; justify-content:center; } .plan-modal-close svg{width:16px; height:16px;} .plan-modal-photo{ width:100%; height:180px; object-fit:cover; border-radius:var(--radius-md); margin-bottom:16px; background:var(--card); } .plan-modal-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;} .plan-alt-list{display:flex; flex-direction:column; gap:8px; margin-top:12px;} /* concierge fulfilment-format cards */ .format-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; } @media (max-width:640px){ .format-grid{ grid-template-columns:1fr; } } .format-card{ display:flex; align-items:flex-start; gap:14px; text-align:left; cursor:pointer; border:1px solid var(--border); background:var(--surface-elevated); border-radius:var(--radius-md); padding:18px; box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease; } .format-card:hover{ transform:translateY(-2px); border-color:rgba(var(--primary-rgb),0.35); box-shadow:var(--shadow-md); } .format-card:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.35); border-color:var(--primary); } .format-ico{ width:44px; height:44px; border-radius:var(--radius-sm); flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(var(--primary-rgb),0.12); color:var(--primary); } .format-ico svg{ width:22px; height:22px; } .format-body{ flex:1; min-width:0; } .format-title{ display:block; font-weight:650; margin-bottom:3px; } .format-desc{ display:block; font-size:0.85rem; color:var(--slate); line-height:1.4; } .format-price{ align-self:center; font-weight:650; font-size:0.9rem; color:var(--paper); white-space:nowrap; } .format-tag{ align-self:center; font-size:0.72rem; font-weight:650; color:var(--primary); background:rgba(var(--primary-rgb),0.12); border-radius:var(--radius-pill); padding:3px 9px; white-space:nowrap; } /* activity picker: search + category filter */ .plan-pick-controls{ position:sticky; top:-4px; z-index:2; background:var(--surface-elevated); padding-top:4px; margin-top:14px; } .plan-pick-search{ width:100%; } .plan-pick-cats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .plan-pick-cat{ font-size:0.8rem; font-weight:600; color:var(--slate); border:1px solid var(--border); background:var(--surface-elevated); border-radius:var(--radius-pill); padding:6px 12px; cursor:pointer; transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease; } .plan-pick-cat:hover{ border-color:rgba(var(--primary-rgb),0.4); } .plan-pick-cat.on{ color:var(--primary); border-color:var(--primary); background:rgba(var(--primary-rgb),0.1); } .plan-pick-cat:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.35); } .plan-pick-empty{ padding:24px 4px; text-align:center; color:var(--slate-dim); font-size:0.9rem; } .plan-pick-back{ display:inline-flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer; color:var(--slate); font-size:0.86rem; font-weight:600; padding:0 0 12px; } .plan-pick-back:hover{ color:var(--primary); } .plan-pick-back:focus-visible{ outline:none; color:var(--primary); text-decoration:underline; } /* --- Builder UX pass: keyboard focus, inline remove, add affordance --- */ .plan-item-card:focus-visible, .plan-transfer-opt:focus-visible, .plan-extra-row [data-extra]:focus-visible, .plan-add-btn:focus-visible, .plan-add-day:focus-visible, .plan-text-btn:focus-visible, .plan-modal-close:focus-visible, .plan-item-remove:focus-visible, .plan-replace-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.35); border-color:var(--primary); } .plan-add-btn:focus-visible, .plan-text-btn:focus-visible{ border-radius:var(--radius-xs); } /* non-colour cue for the selected transfer */ .plan-transfer-opt.on .plan-stay-name::after{ content:"✓"; margin-left:8px; color:var(--primary); font-weight:700; } /* inline remove control + drag handle on day items */ .plan-item-wrap{ position:relative; margin-bottom:8px; transition:transform .12s ease; } .plan-item-wrap.is-dragging{ transition:none; } .plan-item-wrap .plan-item-card{ margin-bottom:0; padding-left:34px; padding-right:48px; } .plan-item-wrap--fixed .plan-item-card{ padding-left:12px; } .plan-allday{ display:inline-block; font-size:0.72rem; font-weight:650; color:var(--primary); background:rgba(var(--primary-rgb),0.12); border-radius:var(--radius-pill); padding:2px 8px; } .plan-day-allday{ position:relative; } .plan-day-full-note{ font-size:0.8rem; color:var(--slate-dim); margin-top:8px; padding-left:2px; } .plan-item-drag{ position:absolute; top:0; bottom:0; left:0; width:30px; z-index:2; display:flex; align-items:center; justify-content:center; color:var(--slate-dim); cursor:grab; touch-action:none; border-radius:var(--radius-sm) 0 0 var(--radius-sm); } .plan-item-drag:hover{ color:var(--slate); } .plan-item-drag:active{ cursor:grabbing; } .plan-item-drag svg{ width:18px; height:18px; } .plan-item-wrap.is-dragging{ z-index:6; } .plan-item-wrap.is-dragging .plan-item-card{ border-color:var(--primary); box-shadow:var(--shadow-lg); } body.plan-reordering{ user-select:none; -webkit-user-select:none; } .plan-item-remove{ position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--surface-elevated); color:var(--slate-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0.55; transition:opacity .15s, color .15s, border-color .15s; } .plan-item-remove svg{ width:15px; height:15px; } .plan-item-wrap:hover .plan-item-remove{ opacity:1; } .plan-item-remove:hover, .plan-item-remove:focus-visible{ opacity:1; color:var(--danger); border-color:var(--danger); } @media (max-width:720px){ .plan-stay-photo, .plan-item-photo{ width:56px; height:56px; border-radius:var(--radius-sm); } .plan-stay-card, .plan-item-card, .plan-transfer-opt, .plan-extra-row{gap:10px;} .plan-item-wrap .plan-item-card{ padding:10px 36px 10px 26px; } .plan-item-meta{font-size:0.75rem;} .plan-item-drag{width:24px;} .plan-item-remove{top:6px; right:6px; width:28px; height:28px;} } /* stronger "add to this day" affordance */ .plan-add-day{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; border:1.5px dashed rgba(var(--primary-rgb),0.5); border-radius:var(--radius-md); background:rgba(var(--primary-rgb),0.04); color:var(--primary); font-weight:600; font-size:0.86rem; padding:12px; cursor:pointer; margin-top:2px; transition:background .15s, border-color .15s; } .plan-add-day:hover{ background:rgba(var(--primary-rgb),0.09); border-color:var(--primary); } .plan-add-day svg{ width:16px; height:16px; } /* lock background scroll while a builder modal is open */ body.plan-modal-open{ overflow:hidden; } .plan-sum-meta{ font-size:0.78rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-dim); padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--border); } .plan-sum-row{ display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); } .plan-sum-ico{ width:40px; height:40px; border-radius:var(--radius-sm); flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(var(--primary-rgb),0.12); color:var(--primary); } .plan-sum-ico svg{width:20px; height:20px; display:block;} .plan-sum-body{flex:1; min-width:0;} .plan-sum-cat{font-size:0.78rem; color:var(--slate); margin-bottom:4px;} .plan-sum-title{font-weight:650; line-height:1.35;} .plan-sum-price{font-weight:700; white-space:nowrap; padding-top:2px;} .plan-sum-total{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 8px; padding:16px 18px; background:var(--inset); border-radius:var(--radius-md); font-weight:650; } .plan-sum-total strong{font-size:1.05rem;} #screen-plan-summary .send-row, #screen-plan-confirm .send-row{margin-top:22px;} .plan-confirm-status{margin-top:8px;} .plan-confirm-progress{ display:flex; align-items:center; gap:14px; margin:0 0 22px; } .plan-confirm-bar{ flex:1; height:6px; border-radius:var(--radius-pill); background:var(--border); overflow:hidden; } .plan-confirm-bar span{ display:block; height:100%; width:0; background:var(--primary); border-radius:inherit; transition:width var(--dur-normal) var(--ease-out); } .plan-confirm-count{font-size:0.86rem; font-weight:650; color:var(--slate); white-space:nowrap;} .plan-confirm-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px 10px; box-shadow:var(--shadow-xs); } .plan-confirm-head{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:14px; padding:0 4px 12px; border-bottom:1px solid var(--border); } .plan-confirm-head span{color:var(--slate); font-size:0.9rem;} .plan-confirm-item{ display:flex; align-items:flex-start; gap:12px; padding:14px 12px; margin-bottom:10px; background:var(--inset); border:1px solid var(--border); border-radius:var(--radius-md); transition:opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .plan-confirm-item.is-in{animation:planFieldIn var(--dur-normal) var(--ease-out);} .plan-confirm-main{flex:1; min-width:0;} .plan-confirm-item .plan-sum-price{color:var(--primary); font-weight:650; margin-top:6px;} .plan-confirm-side{ display:flex; flex-direction:row; align-items:center; gap:10px; flex-shrink:0; padding-top:2px; } .plan-status{ font-size:0.78rem; font-weight:650; color:var(--slate); display:inline-flex; flex-direction:row; align-items:center; gap:6px; white-space:nowrap; } .plan-status.is-pending{color:var(--slate);} .plan-status.is-confirmed{color:var(--success);} .plan-status.is-declined{color:var(--danger);} .plan-status-check{ width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(var(--success-rgb),0.14); color:var(--success); } .plan-status-check svg{width:14px; height:14px;} .plan-status-spin{ width:18px; height:18px; border-radius:50%; border:2px solid var(--border-strong); border-top-color:var(--primary); animation:spin 0.7s linear infinite; } .plan-replace-btn{ background:none; border:0; color:var(--primary); font:inherit; font-size:0.8rem; font-weight:650; cursor:pointer; padding:0; } .plan-cabinet-cover{ width:100%; height:220px; object-fit:cover; border-radius:20px; background:var(--card); margin-bottom:18px; display:block; } .plan-cabinet-hero{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:20px 20px 8px; margin-bottom:22px; box-shadow:var(--shadow-xs); } .plan-cabinet-badge{ display:inline-flex; align-items:center; gap:6px; background:rgba(var(--success-rgb),0.12); color:var(--success); font-size:0.78rem; font-weight:700; border-radius:var(--radius-pill); padding:5px 10px; margin-bottom:12px; } .plan-cabinet-meta{color:var(--slate); font-size:0.92rem; margin-bottom:16px;} .plan-cabinet-day{margin-bottom:18px;} .plan-cabinet-day h3{font-size:0.95rem; margin:0 0 8px;} .plan-cabinet-line{ padding:10px 0; border-bottom:1px solid var(--border); font-size:0.92rem; } .plan-cabinet-line:last-child{border-bottom:0;} .plan-cabinet-line span{display:block; font-size:0.78rem; color:var(--slate); margin-bottom:2px;} .plan-cabinet-hint{ color:var(--slate); font-size:0.82rem; margin:2px 0 12px; } .plan-cabinet-items{display:flex; flex-direction:column; gap:10px;} .plan-cabinet-item{ display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; font:inherit; color:inherit; } .plan-cabinet-item--link{cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, transform .05s ease;} .plan-cabinet-item--link:hover{border-color:var(--primary); box-shadow:var(--shadow-xs);} .plan-cabinet-item--link:active{transform:scale(0.995);} .plan-cabinet-item-main{flex:1 1 auto; min-width:0;} .plan-cabinet-item-name{font-size:0.98rem; font-weight:600; margin-bottom:6px;} .plan-cabinet-item-incl{font-size:0.8rem; color:var(--slate); margin-top:6px;} .plan-cabinet-item-side{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; } .plan-cabinet-item-more{ font-size:0.8rem; font-weight:600; color:var(--primary); white-space:nowrap; } .plan-cabinet-day-region{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--slate); vertical-align:middle; } .plan-cabinet-day-region::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--rc, var(--primary)); } @media (max-width:640px){ .plan-sum-row{gap:10px; padding:14px 0;} .plan-sum-price{font-size:0.9rem;} .plan-confirm-item{flex-wrap:wrap;} .plan-confirm-side{ width:100%; margin-top:4px; padding-left:52px; justify-content:flex-start; } .plan-confirm-side:has(.plan-replace-btn){justify-content:space-between;} #screen-plan-summary .send-row, #screen-plan-confirm .send-row, #screen-plan-cabinet .send-row{justify-content:stretch;} #screen-plan-summary .btn-primary, #screen-plan-confirm .btn-primary, #screen-plan-cabinet .btn-secondary{width:100%;} .plan-cabinet-cover{height:160px;} } /* ============ AUDIO ROUTES (on-site walks) ============ */ /* Hero entry CTA */ .hero-route-cta{ display:inline-flex; align-items:center; gap:14px; margin-top:18px; width:auto; padding:13px 18px; border-radius:var(--radius-md); background:linear-gradient(135deg, rgba(var(--primary-rgb),0.12), rgba(var(--accent-rgb),0.10)); border:1px solid var(--border); box-shadow:var(--shadow-sm); cursor:pointer; text-align:left; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast); } .hero-route-cta:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-strong);} .hero-route-cta-ico{ flex:none; width:40px; height:40px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--surface); color:var(--primary); box-shadow:var(--shadow-xs); } .hero-route-cta-ico svg{width:22px; height:22px;} .hero-route-cta-text{display:flex; flex-direction:column; gap:2px;} .hero-route-cta-title{font-weight:600; color:var(--paper); font-size:0.95rem;} .hero-route-cta-hint{font-size:0.8rem; color:var(--slate);} .hero-route-cta-arrow{width:18px; height:18px; color:var(--slate); flex:none; margin-left:2px;} /* ── Interactive map screen (Places / Routes) ─────────────────────────────── Full-bleed 2D map below the fixed .topbar (79px / 64px mobile); all controls float over the canvas without covering the center. Theme-aware via tokens. */ #screen-route.mapx-screen.active{ /* min-height:0 overrides .screen{min-height:100vh}: otherwise the fixed screen is a full 100vh tall starting at top:79px, so its bottom (and the card sheet anchored to it) fall 79px below the viewport and get clipped. */ display:block; position:fixed; inset:79px 0 0 0; min-height:0; overflow:hidden; background:var(--surface); } @media (max-width:640px){ #screen-route.mapx-screen.active{inset:64px 0 0 0;} } /* ID selector so it beats maplibre-gl.css `.maplibregl-map{position:relative}` (that stylesheet loads after styles.css). */ #mapx-canvas.mapx-canvas{position:absolute; inset:0; width:100%; height:100%;} .mapx-canvas .maplibregl-ctrl-attrib{font-size:9px;} /* Inline line-icon inside text buttons (e.g. auto-fill) */ .ic-inline{ width:16px; height:16px; vertical-align:-3px; } .mapx-empty-overlay{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5; max-width:72%; text-align:center; padding:12px 18px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-md); color:var(--slate); font-size:0.9rem; pointer-events:none; } .mapx-empty-overlay[hidden]{display:none;} .mapx-nomap{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:0 40px; color:var(--slate); font-size:0.95rem; background:var(--surface); } /* Keep MapLibre's own controls clear of our floating UI. */ .mapx-canvas .maplibregl-ctrl-top-right, .mapx-canvas .maplibregl-ctrl-top-left{display:none;} /* Top overlay: back · search · mode switch · category pills */ .mapx-top{ position:absolute; top:0; left:0; right:0; z-index:6; display:flex; flex-direction:column; gap:10px; padding:14px 14px 8px; pointer-events:none; background:linear-gradient(to bottom, var(--surface) 0%, color-mix(in srgb, var(--surface) 62%, transparent) 62%, transparent 100%); } .mapx-top > *{pointer-events:auto;} .mapx-top-row{display:flex; align-items:center; gap:10px;} .mapx-back{ flex:none; width:42px; height:42px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); color:var(--paper); cursor:pointer; box-shadow:var(--shadow-md); transition:background var(--dur-fast), color var(--dur-fast); } .mapx-back:hover{background:var(--card-hover);} .mapx-back svg{width:19px; height:19px;} .mapx-search{ flex:1; display:flex; align-items:center; gap:8px; min-width:0; height:42px; padding:0 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); box-shadow:var(--shadow-md); } .mapx-search-ico{flex:none; width:17px; height:17px; color:var(--slate);} .mapx-search-input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--paper); font-size:0.92rem; font-family:inherit; } .mapx-search-input::placeholder{color:var(--slate);} .mapx-search-clear{ flex:none; width:24px; height:24px; display:grid; place-items:center; border:0; border-radius:var(--radius-pill); background:var(--chip, var(--card-hover)); color:var(--slate); cursor:pointer; } .mapx-search-clear svg{width:13px; height:13px;} /* Segmented mode control */ .mapx-modes{ align-self:flex-start; display:inline-flex; padding:4px; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); box-shadow:var(--shadow-md); } .mapx-mode{ appearance:none; border:0; cursor:pointer; padding:7px 18px; border-radius:var(--radius-pill); background:transparent; color:var(--slate); font-size:0.86rem; font-weight:600; font-family:inherit; transition:background var(--dur-fast), color var(--dur-fast); } .mapx-mode.active{background:var(--primary); color:var(--on-primary, #fff); box-shadow:var(--shadow-xs);} /* Category pills (horizontal scroll) */ .mapx-pills{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .mapx-pills::-webkit-scrollbar{display:none;} .mapx-pill{ flex:none; display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:7px 14px; border-radius:var(--radius-pill); font-size:0.83rem; font-weight:500; font-family:inherit; background:var(--surface); border:1px solid var(--border); color:var(--paper); box-shadow:var(--shadow-sm); transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); white-space:nowrap; } .mapx-pill:hover{background:var(--card-hover);} .mapx-pill.active{background:var(--paper); color:var(--surface); border-color:var(--paper);} .mapx-pill-ico{display:inline-flex; line-height:0;} .mapx-pill-ico .mapx-svg{width:15px; height:15px;} /* "← Все маршруты" chip (routes mode, while one route is focused) */ .mapx-route-back{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:8px 15px 8px 11px; border-radius:var(--radius-pill); font-size:0.83rem; font-weight:600; font-family:inherit; background:var(--surface); border:1px solid var(--border); color:var(--paper); box-shadow:var(--shadow-md); } .mapx-route-back[hidden]{display:none;} .mapx-route-back:hover{background:var(--card-hover);} .mapx-route-back svg{width:16px; height:16px;} /* Floating controls (GPS + zoom) */ .mapx-fabs{ position:absolute; right:14px; bottom:150px; z-index:6; display:flex; flex-direction:column; gap:12px; align-items:center; } .mapx-zoom{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-md);} .mapx-fab{ width:44px; height:44px; display:grid; place-items:center; cursor:pointer; background:var(--surface); border:1px solid var(--border); color:var(--paper); box-shadow:var(--shadow-md); transition:background var(--dur-fast), color var(--dur-fast); } .mapx-fab:hover{background:var(--card-hover);} .mapx-fab svg{width:20px; height:20px;} .mapx-gps{border-radius:var(--radius-pill);} .mapx-zoom .mapx-fab{border:0; border-radius:0; box-shadow:none;} .mapx-zoom .mapx-zoom-in{border-bottom:1px solid var(--border);} /* Bottom cards: hidden by default, slide up when the toggle is open. */ .mapx-sheet{ position:absolute; left:0; right:0; bottom:0; z-index:6; display:flex; gap:12px; overflow-x:auto; padding:14px 14px 68px; scrollbar-width:none; -webkit-overflow-scrolling:touch; background:linear-gradient(to top, var(--surface) 20%, color-mix(in srgb, var(--surface) 55%, transparent) 75%, transparent 100%); transform:translateY(115%); pointer-events:none; transition:transform .34s cubic-bezier(.4,0,.2,1); } .mapx-sheet.open{ transform:translateY(0); pointer-events:auto; } .mapx-sheet::-webkit-scrollbar{display:none;} /* Toggle pill (always visible at bottom-center): shows/hides the cards. */ .mapx-sheet-toggle{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:7; display:inline-flex; align-items:center; gap:7px; padding:9px 17px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); box-shadow:var(--shadow-md); color:var(--paper); font-size:0.85rem; font-weight:600; font-family:inherit; cursor:pointer; transition:background var(--dur-fast); } .mapx-sheet-toggle:hover{ background:var(--card-hover); } .mapx-sheet-chev{ width:16px; height:16px; transition:transform .3s var(--ease-out); } .mapx-sheet-toggle.open .mapx-sheet-chev{ transform:rotate(180deg); } .mapx-empty{color:var(--slate); font-size:0.9rem; padding:10px 6px 22px;} .mapx-card{ flex:none; width:252px; max-width:76vw; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; padding:11px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast); } .mapx-card:hover{transform:translateY(-2px); border-color:var(--border-strong);} .mapx-card.sel{border-color:var(--mk); box-shadow:0 0 0 2px var(--mk) inset, var(--shadow-md);} .mapx-card-ico{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:var(--radius-sm); color:var(--mk); background:color-mix(in srgb, var(--mk) 15%, var(--surface)); } .mapx-card-ico .mapx-svg{width:21px; height:21px;} .mapx-card-body{flex:1; display:flex; flex-direction:column; gap:1px; min-width:0;} .mapx-card-eyebrow{ font-size:0.66rem; font-weight:700; letter-spacing:0.04em; color:var(--mk); text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mapx-card-title{ font-weight:600; font-size:0.95rem; color:var(--paper); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mapx-card-meta{color:var(--slate); font-size:0.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} /* Map markers (places) and numbered route pins */ /* Modern label marker: a colored icon disc + the place name on a white pill, right on the map (informative — you read the name without tapping). */ .mapx-marker{ display:inline-flex; align-items:center; gap:7px; padding:4px 13px 4px 4px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); box-shadow:0 3px 10px rgba(0,0,0,.16); cursor:pointer; white-space:nowrap; transition:box-shadow var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); } .mapx-marker:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.22); z-index:4; } .mapx-lm-ico{ position:relative; flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--mk); color:#fff; line-height:0; } .mapx-lm-ico .mapx-svg{ width:15px; height:15px; } /* Headphones badge — place has internal audio routes (halls/zones). */ .mapx-lm-badge{ position:absolute; top:-5px; right:-5px; width:16px; height:16px; border-radius:50%; background:var(--paper); color:var(--surface); display:grid; place-items:center; border:1.5px solid var(--surface); } .mapx-lm-badge .mapx-svg{ width:9px; height:9px; } .mapx-lm-name{ font-size:0.8rem; font-weight:600; color:var(--paper); max-width:150px; overflow:hidden; text-overflow:ellipsis; } .mapx-lm-rating{ flex:none; display:inline-flex; align-items:center; gap:2px; font-size:0.76rem; font-weight:700; color:var(--paper); } .mapx-lm-star{ color:var(--accent); } .mapx-marker.focus{ z-index:5; border-color:var(--mk); box-shadow:0 0 0 2px var(--mk), 0 6px 16px rgba(0,0,0,.22); } /* Zoomed out: collapse each label to just its icon disc (thin white rim). */ .mapx-canvas.mapx-collapsed .mapx-marker{ padding:2px; gap:0; } .mapx-canvas.mapx-collapsed .mapx-lm-name, .mapx-canvas.mapx-collapsed .mapx-lm-rating{ display:none; } /* Place cluster bubble (count of grouped markers) */ .mapx-cluster{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; cursor:pointer; background:var(--primary); color:#fff; font-weight:700; font-size:0.88rem; font-family:inherit; border:2.5px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.28), 0 0 0 6px color-mix(in srgb, var(--primary) 20%, transparent); transition:transform var(--dur-fast) var(--ease-out); } .mapx-cluster.md{ width:44px; height:44px; font-size:0.95rem; } .mapx-cluster.lg{ width:52px; height:52px; font-size:1.02rem; } .mapx-cluster:hover{ transform:scale(1.06); } .mapx-pin{ width:26px; height:26px; padding:0; cursor:pointer; border:2px solid #fff; border-radius:50%; background:var(--mk); color:#fff; font-size:0.8rem; font-weight:700; line-height:1; display:grid; place-items:center; box-shadow:0 2px 5px rgba(0,0,0,.32); font-family:inherit; } .mapx-me{ width:16px; height:16px; border-radius:50%; background:#2f74ff; border:3px solid #fff; box-shadow:0 0 0 4px rgba(47,116,255,.28); } /* Route-preview player overlay (walk in advance). Shown only when the screen carries .mapx-player-open — a class beats the [hidden] attribute, which a plain `.route-player-view{display:flex}` would otherwise override. */ .route-player-view{position:absolute; inset:0; z-index:8; display:none; background:var(--surface);} #screen-route.mapx-player-open .route-player-view{display:flex;} .route-frame{flex:1; width:100%; border:0; min-height:0;} .mapx-player-back{ position:absolute; top:14px; left:14px; z-index:9; display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px 0 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); color:var(--paper); font-size:0.9rem; font-weight:600; font-family:inherit; cursor:pointer; box-shadow:var(--shadow-md); transition:background var(--dur-fast); } .mapx-player-back:hover{background:var(--card-hover);} .mapx-player-back svg{width:19px; height:19px; flex:none;} #screen-route.mapx-player-open .mapx-top, #screen-route.mapx-player-open .mapx-fabs, #screen-route.mapx-player-open .mapx-sheet{display:none;} @media (max-width:640px){ .mapx-fabs{bottom:158px;} .mapx-card{width:230px;} } /* ── On-map route walkthrough (audio-points carousel + geolocation) ─────────── */ .mapx-walk{ position:absolute; left:0; right:0; bottom:0; z-index:8; display:flex; flex-direction:column; gap:9px; padding:11px 12px 14px; background:linear-gradient(to top, var(--surface) 58%, color-mix(in srgb, var(--surface) 78%, transparent) 84%, transparent 100%); } .mapx-walk[hidden]{ display:none; } /* the [hidden] attribute alone loses to display:flex above */ /* During a walkthrough the map's own chrome is noise — collapse it so the map breathes; only the floating back arrow (top-left) survives. */ #screen-route.mapx-walk-open .mapx-sheet, #screen-route.mapx-walk-open .mapx-sheet-toggle, #screen-route.mapx-walk-open .mapx-fabs, #screen-route.mapx-walk-open .mapx-search, #screen-route.mapx-walk-open .mapx-modes, #screen-route.mapx-walk-open .mapx-pills, #screen-route.mapx-walk-open .mapx-route-back{ display:none; } #screen-route.mapx-walk-open .mapx-top{ background:none; pointer-events:none; padding-bottom:0; } #screen-route.mapx-walk-open .mapx-back{ pointer-events:auto; } /* One slim row: route name + a compact cluster of icon tools */ .mapx-walk-top{ display:flex; align-items:center; gap:10px; } .mapx-walk-name{ flex:1; min-width:0; font-weight:700; font-size:0.98rem; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mapx-walk-tools{ flex:none; display:flex; align-items:center; gap:6px; } .mapx-walk-tool{ flex:none; height:36px; min-width:36px; padding:0 9px; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; border-radius:var(--radius-pill); background:var(--surface); border:1px solid var(--border); color:var(--paper); font-size:0.8rem; font-weight:600; font-family:inherit; box-shadow:var(--shadow-sm); transition:background .15s, color .15s, border-color .15s; } .mapx-walk-tool svg{ width:17px; height:17px; flex:none; } .mapx-walk-tool:hover{ background:var(--card-hover); } .mapx-walk-tool.on{ background:var(--primary); border-color:var(--primary); color:#fff; } .mapx-walk-auto-label{ white-space:nowrap; } .mapx-walk-finish{ color:var(--slate); } .mapx-walk-status{ font-size:0.8rem; font-weight:600; color:var(--paper); padding:6px 8px 6px 11px; border-radius:var(--radius-xs); display:none; align-self:flex-start; max-width:100%; background:color-mix(in srgb, var(--primary) 12%, var(--surface)); } .mapx-walk-status.show{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; } .mapx-walk-status-text{ min-width:0; } .mapx-walk-status-enter{ flex:none; display:inline-flex; align-items:center; gap:5px; cursor:pointer; padding:5px 11px; border-radius:999px; font-size:0.78rem; font-weight:700; font-family:inherit; color:#fff; background:var(--primary); border:1px solid var(--primary); box-shadow:var(--shadow-sm); transition:filter .15s; } .mapx-walk-status-enter svg{ width:14px; height:14px; flex:none; } .mapx-walk-status-enter:hover{ filter:brightness(1.06); } /* Bus-line instruction strip (transit excursion) */ .mapx-walk-transit{ display:flex; align-items:center; gap:8px; align-self:flex-start; max-width:100%; font-size:0.8rem; font-weight:600; color:var(--paper); padding:6px 11px; border-radius:var(--radius-xs); background:color-mix(in srgb, #2563eb 13%, var(--surface)); } .mapx-walk-transit[hidden]{ display:none; } .mapx-walk-transit-ico{ flex:none; display:inline-flex; color:#2563eb; } .mapx-walk-transit-ico svg{ width:17px; height:17px; } .mapx-walk-cards{ display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; } .mapx-walk-cards::-webkit-scrollbar{ display:none; } .mapx-walk-card{ flex:none; width:236px; max-width:74vw; display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; padding:9px 11px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast); } .mapx-walk-card:hover{ transform:translateY(-2px); border-color:var(--border-strong); } .mapx-walk-card.active{ border-color:var(--mk); box-shadow:0 0 0 2px var(--mk) inset, var(--shadow-md); } .mapx-walk-num{ flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--mk) 16%, var(--surface)); color:var(--mk); font-size:0.85rem; font-weight:700; line-height:1; } .mapx-walk-card.active .mapx-walk-num{ background:var(--mk); color:#fff; } .mapx-walk-card-body{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; } .mapx-walk-card-title{ font-weight:600; font-size:0.92rem; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mapx-walk-card-meta{ color:var(--slate); font-size:0.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mapx-walk-play{ flex:none; position:relative; overflow:hidden; width:38px; height:38px; display:grid; place-items:center; cursor:pointer; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--mk) 45%, transparent); background:var(--surface); color:var(--mk); font-family:inherit; transition:background .15s, color .15s, transform .1s; } .mapx-walk-play svg{ width:17px; height:17px; position:relative; z-index:1; } .mapx-walk-play:active{ transform:scale(.94); } .mapx-walk-card.playing .mapx-walk-play{ background:var(--mk); border-color:var(--mk); color:#fff; } /* A stop that dives into a venue (museum halls): "Войти" pill + wider card */ .mapx-walk-card.has-venue{ width:280px; max-width:82vw; } .mapx-walk-enter{ flex:none; display:inline-flex; align-items:center; gap:5px; cursor:pointer; padding:7px 11px; border-radius:999px; font-size:0.76rem; font-weight:700; font-family:inherit; color:#fff; background:var(--mk); border:1px solid var(--mk); box-shadow:var(--shadow-sm); transition:filter .15s; } .mapx-walk-enter svg{ width:14px; height:14px; flex:none; } .mapx-walk-enter:hover{ filter:brightness(1.06); } .mapx-walk-prog{ position:absolute; left:0; bottom:0; width:0; height:3px; z-index:2; background:#fff; opacity:.85; transition:width .2s linear; } .mapx-walk-tool[hidden]{ display:none; } /* [hidden] must beat the tool's inline-flex */ .mapx-walk-status.done{ display:flex; align-items:center; gap:8px; color:#0f8a5f; font-weight:700; background:color-mix(in srgb, #16a34a 14%, var(--surface)); } .mapx-walk-status.done svg{ width:18px; height:18px; flex:none; } /* Completion block: route complete + restart / favourite / share */ .mapx-walk-done{ display:flex; flex-direction:column; gap:10px; padding:12px 14px; border-radius:var(--radius-md); background:color-mix(in srgb, #16a34a 12%, var(--surface)); border:1px solid color-mix(in srgb, #16a34a 30%, transparent); } .mapx-walk-done[hidden]{ display:none; } .mapx-walk-done-head{ display:flex; align-items:center; gap:9px; color:#0f8a5f; font-weight:700; font-size:0.95rem; } .mapx-walk-done-head svg{ width:20px; height:20px; flex:none; } .mapx-walk-done-acts{ display:flex; flex-wrap:wrap; gap:8px; } .mapx-walk-done-btn{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; padding:8px 13px; border-radius:var(--radius-pill); font-size:0.83rem; font-weight:600; font-family:inherit; background:var(--surface); border:1px solid var(--border); color:var(--paper); box-shadow:var(--shadow-sm); transition:background var(--dur-fast), border-color var(--dur-fast); } .mapx-walk-done-btn svg{ width:16px; height:16px; flex:none; } .mapx-walk-done-btn:hover{ background:var(--card-hover); } .mapx-walk-done-btn.on{ color:var(--primary); border-color:color-mix(in srgb, var(--primary) 45%, transparent); } /* Share modal (link + QR) */ .route-share{ max-width:380px; text-align:center; } .route-share-inner{ padding:26px 22px 22px; display:flex; flex-direction:column; align-items:center; gap:10px; } .route-share-title{ margin:0; font-size:1.2rem; font-weight:700; color:var(--paper); } .route-share-sub{ margin:0; font-size:0.88rem; line-height:1.5; color:var(--slate); max-width:32ch; } .route-share-qr{ width:200px; height:200px; margin:6px 0 2px; display:grid; place-items:center; background:#fff; border-radius:var(--radius-md); padding:10px; box-shadow:var(--shadow-md); } .route-share-qr svg{ width:100%; height:100%; display:block; } .route-share-qr-load{ display:grid; place-items:center; } .route-share-qr-load .spin{ width:26px; height:26px; border-radius:50%; border:3px solid var(--border-strong); border-top-color:var(--primary); animation:spin .8s linear infinite; } .route-share-qr-fail{ font-size:0.8rem; color:var(--slate); padding:0 14px; } .route-share-scan{ margin:0; font-size:0.78rem; color:var(--slate); } .route-share-url{ width:100%; font-size:0.76rem; color:var(--slate); word-break:break-all; line-height:1.4; background:var(--card-hover); border-radius:var(--radius-sm); padding:8px 10px; font-family:var(--mono, ui-monospace, monospace); } .route-share-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; width:100%; margin-top:4px; } .route-share-btn{ flex:1 1 auto; min-width:130px; } .sl-cta-wip{opacity:.5; cursor:not-allowed; pointer-events:none; filter:grayscale(0.3);} /* ── Национальный портал: экран выбора дестинации + scope-пилюля ─────────── */ .dest-wrap{max-width:1040px;margin:0 auto;padding:96px 24px 64px;} .dest-head{text-align:center;max-width:640px;margin:0 auto 40px;} .dest-title{font-size:clamp(2.2rem,4vw,3.2rem);line-height:1.05;margin:12px 0 14px;color:var(--paper);} .dest-sub{color:var(--slate);font-size:1.05rem;line-height:1.5;} .dest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;} .dest-card{display:flex;flex-direction:column;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s;padding:0;font:inherit;color:inherit;} .dest-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-strong);} .dest-card:active{transform:scale(0.99);} .dest-card-map{width:100%;height:150px;object-fit:cover;display:block;background:var(--inset);} .dest-card-map--fallback{display:flex;align-items:center;justify-content:center;color:var(--slate-dim);height:150px;} .dest-card-map--fallback svg{width:40px;height:40px;} .dest-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1;} .dest-card-name{font-size:1.3rem;font-weight:700;color:var(--paper);} .dest-card-region{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--primary);font-weight:600;} .dest-card-tagline{color:var(--slate);font-size:.95rem;line-height:1.4;flex:1;} .dest-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;} .dest-card-count{color:var(--slate-dim);font-size:.85rem;} .dest-card-cta{color:var(--primary);font-weight:600;font-size:.92rem;} .dest-card--all{background:linear-gradient(135deg,rgba(var(--primary-rgb),0.10),rgba(var(--primary-rgb),0.03));cursor:default;} .dest-card--all .dest-card-body{justify-content:center;gap:10px;padding-top:26px;padding-bottom:26px;} .dest-card-allbtns{display:flex;flex-direction:column;gap:8px;margin-top:8px;} .dest-all-btn{padding:11px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--paper);font:inherit;font-weight:600;cursor:pointer;transition:background .15s;} .dest-all-btn:hover{background:var(--card-hover);} .dest-all-btn--primary{background:var(--primary);color:#fff;border-color:var(--primary);} .dest-all-btn--primary:hover{filter:brightness(1.06);} .hero-scope-row{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;} .hero-scope-row .hero-scope-pill{margin-bottom:0;} .hero-scope-share{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-pill);padding:6px 12px;font:inherit;font-size:.85rem;color:var(--paper);cursor:pointer;transition:background .15s,border-color .15s;} .hero-scope-share:hover{background:var(--card-hover);border-color:var(--border-strong);} .hero-scope-share svg{width:15px;height:15px;color:var(--primary);} .hero-scope-pill{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-pill);padding:6px 14px;font:inherit;font-size:.85rem;color:var(--paper);cursor:pointer;margin-bottom:16px;transition:background .15s,border-color .15s;} .hero-scope-pill:hover{background:var(--card-hover);border-color:var(--border-strong);} .hero-scope-pill svg{width:15px;height:15px;color:var(--primary);} .hero-scope-change{color:var(--slate-dim);font-size:.8rem;} @media (max-width:640px){.dest-wrap{padding:72px 16px 48px;}.dest-grid{grid-template-columns:1fr;}} .img-fallback{display:flex;align-items:center;justify-content:center;background:var(--inset);color:var(--slate-dim);} .img-fallback svg{width:32px;height:32px;opacity:.6;} .dest-card{position:relative;} .dest-card--soon{cursor:default;opacity:.62;filter:grayscale(0.35);} .dest-card--soon:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--border);} .dest-card-badge{position:absolute;top:12px;right:12px;z-index:2;background:var(--paper);color:var(--bg);font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:4px 9px;border-radius:var(--radius-pill);opacity:.9;} .dest-card-soon{color:var(--slate-dim);font-size:.85rem;font-weight:600;} /* ── Конструктор маршрута по стране ──────────────────────────────────────── */ #screen-route-builder .flow-inner, #screen-route-summary .flow-inner{padding-bottom:96px;} .route-people-field{max-width:200px;} .route-stops{display:flex;flex-direction:column;gap:0;margin-top:8px;} .route-stop{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-xs);} .route-stop-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;} .route-stop-num{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto;} .route-stop-title{font-weight:600;color:var(--paper);font-size:.9rem;text-transform:uppercase;letter-spacing:.03em;} .route-stop-remove{margin-left:auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--slate);font-size:1.1rem;line-height:1;cursor:pointer;} .route-stop-remove:hover{background:var(--card-hover);color:var(--danger);} .route-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;} .route-chip{padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface);color:var(--paper);font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;} .route-chip:hover{background:var(--card-hover);} .route-chip.active{background:var(--primary);color:#fff;border-color:var(--primary);} .route-chip--soon{opacity:.5;cursor:default;font-weight:500;background:var(--inset);border-style:dashed;} .route-dates{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .route-date{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--slate);} .route-date input{font:inherit;padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--paper);} .route-nights{font-size:.85rem;color:var(--slate-dim);font-weight:600;} .route-leg{padding:10px 0 10px 30px;position:relative;} .route-leg-head{font-size:.82rem;color:var(--slate);margin-bottom:8px;} .route-leg-head--muted{opacity:.6;} .route-leg-opts{display:flex;flex-wrap:wrap;gap:8px;} .route-leg-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);cursor:pointer;font:inherit;transition:border-color .15s,background .15s;} .route-leg-opt:hover{background:var(--card-hover);} .route-leg-opt.active{border-color:var(--primary);background:rgba(var(--primary-rgb),0.08);} .route-leg-opt-name{font-size:.85rem;font-weight:600;color:var(--paper);} .route-leg-opt-price{font-size:.8rem;color:var(--slate);} .route-add-stop{margin-top:14px;} .route-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(15,23,42,0.06);} .route-bar-total{display:flex;flex-direction:column;line-height:1.2;} .route-bar-total-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--slate-dim);} .route-bar-total-val{font-size:1.3rem;font-weight:700;color:var(--paper);} .route-bar-btn{white-space:nowrap;} /* summary */ .route-summary{margin-top:8px;} .route-sum-stop{display:flex;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-xs);} .route-sum-stop-num{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto;} .route-sum-stop-name{font-size:1.15rem;font-weight:700;color:var(--paper);} .route-sum-stop-meta{font-size:.85rem;color:var(--slate);margin-top:2px;} .route-sum-stop-places{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;} .route-sum-stop-places span{font-size:.8rem;background:var(--inset);color:var(--slate);padding:3px 9px;border-radius:var(--radius-pill);} .route-sum-stop-cost{margin-top:8px;font-weight:700;color:var(--primary);} .route-sum-leg{padding:8px 0 8px 44px;} .route-sum-leg-text{font-size:.82rem;color:var(--slate);} @media (max-width:640px){.route-bar{padding:12px 16px;}.route-bar-total-val{font-size:1.1rem;}} /* ── Конструктор маршрута: блоки, услуги, календарь ──────────────────────── */ .route-topgrid{margin-top:4px;} .route-block{margin-top:26px;} .route-block-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin-bottom:10px;} .route-block-hint{font-size:.85rem;color:var(--slate-dim);margin:-4px 0 12px;} .route-stepper{display:inline-flex;align-items:center;gap:0;border:1px solid var(--border-strong);border-radius:var(--radius-pill);overflow:hidden;background:var(--surface);} .route-step-btn{width:38px;height:38px;border:none;background:transparent;color:var(--paper);font-size:1.2rem;cursor:pointer;line-height:1;transition:background .15s;} .route-step-btn:hover{background:var(--card-hover);} .route-step-input{width:56px;text-align:center;border:none!important;background:transparent!important;padding:0!important;font-weight:700;-moz-appearance:textfield;} .route-step-input::-webkit-outer-spin-button,.route-step-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .route-step-val{min-width:34px;text-align:center;font-weight:700;color:var(--paper);} .route-people-field{max-width:200px;} /* услуги */ .route-services{display:flex;flex-wrap:wrap;gap:8px;} .route-svc{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface);color:var(--paper);font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;transition:all .15s;} .route-svc:hover{background:var(--card-hover);} .route-svc.active{background:rgba(var(--primary-rgb),0.10);border-color:var(--primary);color:var(--primary);} .route-svc-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--inset);font-size:.75rem;font-weight:800;} .route-svc.active .route-svc-check{background:var(--primary);color:#fff;} /* календарь */ .route-calendar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-xs);max-width:420px;} .route-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;} .route-cal-month{font-weight:700;color:var(--paper);text-transform:capitalize;} .route-cal-nav{width:32px;height:32px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--card);color:var(--paper);font-size:1.1rem;cursor:pointer;line-height:1;} .route-cal-nav:hover{background:var(--card-hover);} .route-cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;} .route-cal-week span{text-align:center;font-size:.72rem;font-weight:600;color:var(--slate-dim);padding:4px 0;} .route-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;} .route-cal-cell{aspect-ratio:1;border:none;background:transparent;font:inherit;font-size:.9rem;color:var(--paper);border-radius:var(--radius-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s;} .route-cal-day:hover{background:var(--card-hover);} .route-cal-empty{cursor:default;} .route-cal-in{background:color-mix(in srgb, var(--rc) 18%, transparent);color:var(--paper);font-weight:600;position:relative;} .route-cal-in:hover{background:color-mix(in srgb, var(--rc) 30%, transparent);} .route-cal-in::after{content:"";position:absolute;left:6px;right:6px;bottom:4px;height:3px;border-radius:2px;background:var(--rc);} .route-cal-start{outline:2px solid var(--rc);outline-offset:-2px;font-weight:800;} .route-cal-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);} .route-cal-leg{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--slate);} .route-cal-leg i{width:12px;height:12px;border-radius:4px;display:inline-block;flex:0 0 auto;} /* стоп с акцентом региона */ .route-stop{border-left:4px solid var(--rc);} .route-stop-nights{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px;} .route-stop-nights-label{font-size:.85rem;color:var(--slate);} .route-stop-daterange{font-size:.85rem;font-weight:600;color:var(--rc);} /* готовые маршруты */ .route-ready{margin-top:24px;padding-top:18px;border-top:1px dashed var(--border-strong);} .route-ready-label{display:block;font-size:.85rem;color:var(--slate);margin-bottom:10px;} .route-ready-btns{display:flex;flex-wrap:wrap;gap:10px;} .route-ready-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 16px;border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--surface);cursor:pointer;font:inherit;transition:all .15s;} .route-ready-btn:hover{border-color:var(--primary);background:var(--card-hover);} .route-ready-btn-name{font-weight:700;color:var(--paper);font-size:.92rem;} .route-ready-btn-days{font-size:.8rem;color:var(--slate);} /* summary accents */ .route-sum-stop{border-left:4px solid var(--rc);} .route-sum-stop-num{background:var(--rc);} .route-sum-services{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;padding:12px 4px 0;} .route-sum-services-label{font-size:.8rem;color:var(--slate-dim);text-transform:uppercase;letter-spacing:.04em;margin-right:4px;} .route-sum-svc{font-size:.82rem;background:var(--inset);color:var(--slate);padding:4px 11px;border-radius:var(--radius-pill);} /* ── Программа тура по дням (route summary) ──────────────────────────────── */ .route-day{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--rc);border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-xs);margin-bottom:12px;} .route-day-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;} .route-day-title{font-weight:700;color:var(--paper);font-size:1.02rem;} .route-day-region{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#fff;background:var(--rc);padding:3px 10px;border-radius:var(--radius-pill);} .route-day-items{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;} .route-day-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--inset);border-radius:var(--radius-sm);} .route-day-item-name{font-weight:600;color:var(--paper);} .route-day-item-time{font-size:.8rem;color:var(--slate-dim);} .route-day-item-price{margin-left:auto;font-weight:600;color:var(--primary);font-size:.9rem;} .route-day-item-x{width:24px;height:24px;border-radius:50%;border:none;background:transparent;color:var(--slate-dim);font-size:1.1rem;line-height:1;cursor:pointer;} .route-day-item-x:hover{background:var(--card-hover);color:var(--danger);} .route-day-empty{padding:10px 12px;color:var(--slate-dim);font-size:.9rem;font-style:italic;} .route-day-add{width:100%;padding:11px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);background:transparent;color:var(--primary);font:inherit;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;} .route-day-add:hover,.route-day-add.active{background:rgba(var(--primary-rgb),0.06);border-color:var(--primary);} .route-day-picker{margin-top:10px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;background:var(--surface-elevated);} .route-day-pick{display:flex;align-items:center;gap:10px;padding:9px 12px;border:none;background:transparent;border-radius:var(--radius-xs);font:inherit;cursor:pointer;text-align:left;transition:background .12s;} .route-day-pick:hover{background:var(--card-hover);} .route-day-pick-name{font-weight:600;color:var(--paper);} .route-day-pick-price{margin-left:auto;color:var(--slate);font-size:.88rem;} .route-day-allday{display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--rc,var(--primary));background:color-mix(in srgb, var(--rc,var(--primary)) 14%, transparent);padding:2px 7px;border-radius:var(--radius-pill);margin-left:6px;vertical-align:middle;} .route-day-mealtag{display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--accent);background:rgba(var(--accent-rgb),0.14);padding:2px 7px;border-radius:var(--radius-pill);margin-left:6px;vertical-align:middle;} /* Time-of-day slot chip on a day item (morning / afternoon / evening). */ .route-day-slot{display:inline-block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:var(--radius-pill);margin-left:6px;vertical-align:middle;color:var(--slate-dim);background:rgba(100,116,139,0.12);} .route-day-slot--morning{color:#c2780a;background:rgba(242,169,59,0.16);} .route-day-slot--day{color:#0EA5A0;background:rgba(14,165,160,0.14);} .route-day-slot--evening{color:#6366f1;background:rgba(99,102,241,0.14);} .route-day-item--allday{background:color-mix(in srgb, var(--rc) 12%, var(--inset));} .route-day-item{cursor:default;} .route-day-handle{cursor:grab;color:var(--slate-dim);font-size:1rem;line-height:1;letter-spacing:-2px;user-select:none;padding-right:2px;} .route-day-handle:active{cursor:grabbing;} .route-day-item.route-drag{opacity:.4;} .route-day.route-drop{outline:2px dashed var(--primary);outline-offset:2px;} .route-day.route-drop .route-day-items{min-height:44px;} /* ── Модалка «Что добавить в день» ───────────────────────────────────────── */ .route-pick-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;} .route-pick-modal[hidden]{display:none;} .route-pick-backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.45);backdrop-filter:blur(2px);} .route-pick-sheet{position:relative;width:100%;max-width:600px;max-height:88vh;display:flex;flex-direction:column;background:var(--surface);border-radius:24px 24px 0 0;box-shadow:var(--shadow-lg);padding:22px 22px 12px;animation:routePickIn .22s var(--ease-out);} @media(min-width:721px){ /* Десктоп: панель справа во всю высоту (единый паттерн) */ .route-pick-modal{align-items:stretch; justify-content:flex-end;} .route-pick-sheet{ width:min(440px,42vw); max-width:none; max-height:none; height:100dvh; border-radius:0; border-left:1px solid var(--border-strong); box-shadow:-24px 0 48px -24px rgba(0,0,0,0.35); animation:sheetSlideRight .3s cubic-bezier(.2,.8,.2,1); } } @keyframes routePickIn{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}} @keyframes sheetSlideRight{from{transform:translateX(100%);}to{transform:translateX(0);}} .route-pick-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:var(--card);color:var(--paper);font-size:1.3rem;line-height:1;cursor:pointer;} .route-pick-x:hover{background:var(--card-hover);} .route-pick-title{font-size:1.4rem;font-weight:700;color:var(--paper);margin:0 40px 16px 0;} .route-pick-search{display:flex;align-items:center;gap:10px;border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:0 14px;margin-bottom:14px;background:var(--surface);} .route-pick-search svg{width:18px;height:18px;color:var(--slate-dim);flex:0 0 auto;} .route-pick-search input{flex:1;border:none;background:transparent;padding:13px 0;font:inherit;color:var(--paper);outline:none;} .route-pick-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;} .route-pick-chip{padding:7px 14px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface);color:var(--paper);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .15s;} .route-pick-chip:hover{background:var(--card-hover);} .route-pick-chip.active{background:rgba(var(--primary-rgb),0.10);border-color:var(--primary);color:var(--primary);} .route-pick-list{overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:12px;-webkit-overflow-scrolling:touch;} .route-pick-card{display:flex;align-items:center;gap:14px;border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;background:var(--surface);} .route-pick-card:hover{border-color:var(--primary);box-shadow:var(--shadow-sm);} .route-pick-thumb{width:96px;height:72px;border-radius:var(--radius-sm);object-fit:cover;flex:0 0 auto;background:var(--inset);} .route-pick-thumb--fallback{display:flex;align-items:center;justify-content:center;color:var(--slate-dim);} .route-pick-thumb--fallback svg{width:28px;height:28px;} .route-pick-card-body{flex:1;min-width:0;} .route-pick-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .route-pick-card-name{font-weight:700;color:var(--paper);} .route-pick-free{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--success);background:rgba(var(--success-rgb),0.14);padding:3px 9px;border-radius:var(--radius-pill);} .route-pick-card-meta{font-size:.85rem;color:var(--slate);margin-top:3px;} .route-pick-card-price{font-weight:700;color:var(--paper);margin-top:5px;} .route-pick-info{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--slate);font-weight:700;font-style:italic;cursor:pointer;font-family:Georgia,serif;} .route-pick-info:hover{border-color:var(--primary);color:var(--primary);} .route-pick-empty{text-align:center;color:var(--slate-dim);padding:28px;} body.route-pick-open{overflow:hidden;} /* ── Проживание в маршруте ───────────────────────────────────────────────── */ .route-stay{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--rc);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-xs);margin-bottom:12px;} .route-stay-head{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin-bottom:10px;} .route-stay-hotel{display:flex;align-items:center;gap:12px;} .route-stay-thumb{width:72px;height:56px;border-radius:var(--radius-sm);object-fit:cover;flex:0 0 auto;background:var(--inset);} .route-stay-thumb--fallback{display:flex;align-items:center;justify-content:center;color:var(--slate-dim);} .route-stay-thumb--fallback svg{width:24px;height:24px;} .route-stay-body{flex:1;min-width:0;} .route-stay-name{font-weight:700;color:var(--paper);} .route-stay-meta{font-size:.82rem;color:var(--slate);margin-top:2px;} .route-stay-price{font-weight:700;color:var(--paper);white-space:nowrap;} .route-stay-change{flex:0 0 auto;padding:8px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--primary);font:inherit;font-weight:600;font-size:.85rem;cursor:pointer;transition:background .15s;} .route-stay-change:hover{background:var(--card-hover);} @media(max-width:560px){.route-stay-hotel{flex-wrap:wrap;}.route-stay-change{width:100%;}} /* хотел-карточки в модалке */ .route-pick-budget{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);background:var(--inset);padding:3px 9px;border-radius:var(--radius-pill);} .route-pick-chosen{color:var(--primary);font-weight:800;} .route-pick-card--active{border-color:var(--primary);background:rgba(var(--primary-rgb),0.05);} .route-pick-total{color:var(--slate);font-weight:600;} .route-day-actions{display:flex;gap:8px;} .route-day-actions .route-day-add{flex:1;} .route-day-auto{flex:0 0 auto;padding:11px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--paper);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s;} .route-day-auto:hover{background:var(--card-hover);border-color:var(--primary);color:var(--primary);} .route-autofill-all{display:block;width:100%;margin-bottom:14px;padding:13px;border-radius:var(--radius-md);border:1px solid var(--primary);background:rgba(var(--primary-rgb),0.08);color:var(--primary);font:inherit;font-weight:700;cursor:pointer;transition:background .15s;} .route-autofill-all:hover{background:rgba(var(--primary-rgb),0.14);} @media(max-width:560px){.route-day-auto span,.route-day-auto{font-size:.88rem;}} /* ── Concierge → route: chat card + modal (reuses .place-modal shell) ── */ .route-preview-card{ display:flex; align-items:center; gap:0; width:100%; text-align:left; cursor:pointer; border:1px solid var(--border-strong); border-radius:var(--radius-md); overflow:hidden; background:var(--surface); padding:0; font-family:inherit; color:inherit; box-shadow:var(--shadow-sm); transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .route-preview-card:hover{ border-color:var(--rc-accent,rgba(var(--primary-rgb),0.45)); box-shadow:var(--shadow-md); transform:translateY(-2px); } .route-preview-accent{ align-self:stretch; width:5px; flex:0 0 5px; background:var(--rc-accent,#0EA5A0); } .route-preview-body{ flex:1 1 auto; min-width:0; padding:11px 12px; display:flex; flex-direction:column; gap:2px; } .route-preview-eyebrow{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--rc-accent,var(--primary)); } .route-preview-name{ font-weight:650; font-size:0.95rem; } .route-preview-meta{ font-size:.78rem; color:var(--slate); } .route-preview-go{ flex:0 0 auto; padding:0 14px; color:var(--rc-accent,var(--primary)); } .route-preview-go svg{ width:20px; height:20px; } .route-modal-hero{ padding:20px 22px 16px; border-bottom:1px solid var(--border); background:linear-gradient(135deg, color-mix(in srgb, var(--rc-accent,#0EA5A0) 14%, transparent), transparent); border-left:5px solid var(--rc-accent,#0EA5A0); } .route-modal-eyebrow{ font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; font-weight:700; color:var(--rc-accent,var(--primary)); } .route-modal-name{ font-size:1.3rem; font-weight:750; margin:4px 0 4px; } .route-modal-sub{ color:var(--ink,inherit); opacity:.85; margin:0 0 8px; font-size:.92rem; } .route-modal-meta{ font-size:.8rem; color:var(--slate); margin:0; } .route-modal-stops{ padding:14px 22px; display:flex; flex-direction:column; gap:10px; } .route-modal-stops-load{ color:var(--slate); font-size:.85rem; } .route-modal-stop{ display:flex; align-items:center; gap:10px; padding:6px 8px; margin:0 -8px; border-radius:var(--radius-sm); transition:background .18s ease, box-shadow .18s ease; } .route-modal-stop-ico{ flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--rc-accent, var(--primary)) 16%, var(--surface)); color:var(--rc-accent, var(--primary)); font-size:.76rem; font-weight:700; line-height:1; } .route-modal-stop-body{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; } .route-modal-stop-name{ font-weight:600; font-size:.9rem; } .route-modal-stop-type{ font-size:.76rem; color:var(--slate); } .route-modal-stop.is-playing{ background:color-mix(in srgb, var(--rc-accent, var(--primary)) 9%, var(--surface)); } .route-modal-stop.in-zone{ box-shadow:inset 0 0 0 1.5px var(--rc-accent, var(--primary)); } .route-modal-stop.in-zone .route-modal-stop-ico{ background:var(--rc-accent, var(--primary)); color:#fff; } /* Self-guided audio guide (per-stop player + zone controls) */ .route-audio-stops{ display:flex; flex-direction:column; gap:2px; } .route-audio-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; } .route-audio-locate{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; padding:7px 13px; border-radius:var(--radius-pill); font-size:.82rem; font-weight:600; color:var(--rc-accent, var(--primary)); background:transparent; border:1.5px solid color-mix(in srgb, var(--rc-accent, var(--primary)) 45%, transparent); transition:background .15s ease, color .15s ease, border-color .15s ease; } .route-audio-locate svg{ width:16px; height:16px; } .route-audio-locate:hover{ background:color-mix(in srgb, var(--rc-accent, var(--primary)) 10%, var(--surface)); } .route-audio-locate.on{ background:var(--rc-accent, var(--primary)); border-color:var(--rc-accent, var(--primary)); color:#fff; } .route-audio-auto{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:.82rem; color:var(--paper); user-select:none; } .route-audio-auto input{ width:17px; height:17px; accent-color:var(--rc-accent, var(--primary)); cursor:pointer; } .route-audio-status{ font-size:.8rem; color:var(--paper); font-weight:600; padding:8px 12px; border-radius:var(--radius-sm); background:color-mix(in srgb, var(--rc-accent, var(--primary)) 12%, var(--surface)); } .route-audio-hint{ font-size:.76rem; line-height:1.45; color:var(--slate); margin:2px 0 0; } .route-stop-play{ flex:0 0 auto; position:relative; overflow:hidden; width:34px; height:34px; display:grid; place-items:center; cursor:pointer; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--rc-accent, var(--primary)) 40%, transparent); background:var(--surface); color:var(--rc-accent, var(--primary)); transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; } .route-stop-play svg{ width:16px; height:16px; position:relative; z-index:1; } .route-stop-play:hover{ background:color-mix(in srgb, var(--rc-accent, var(--primary)) 12%, var(--surface)); } .route-stop-play:active{ transform:scale(.94); } .route-stop-play.playing{ background:var(--rc-accent, var(--primary)); border-color:var(--rc-accent, var(--primary)); color:#fff; } .route-stop-prog{ position:absolute; left:0; bottom:0; width:0; height:3px; z-index:2; background:#fff; opacity:.85; transition:width .2s linear; } .route-modal-stop.in-zone .route-stop-play:not(.playing){ animation:raPulse 1.5s ease-in-out infinite; } @keyframes raPulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--rc-accent, var(--primary)) 45%, transparent); } 50%{ box-shadow:0 0 0 6px color-mix(in srgb, var(--rc-accent, var(--primary)) 0%, transparent); } } @media (prefers-reduced-motion:reduce){ .route-modal-stop.in-zone .route-stop-play:not(.playing){ animation:none; } } /* Route-type badge, movement modes, per-kind blocks */ .route-modal-kind{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:5px 11px; border-radius:var(--radius-pill); font-size:0.74rem; font-weight:700; letter-spacing:.01em; color:#fff; background:var(--rc-accent, var(--primary)); margin-bottom:10px; } .route-modal-kind svg{ width:14px; height:14px; } .route-modes{ padding:2px 22px 6px; } .route-modes-label{ display:block; font-size:0.76rem; color:var(--slate); margin-bottom:7px; } .route-modes-chips{ display:flex; flex-wrap:wrap; gap:8px; } .route-mode-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:var(--radius-pill); cursor:pointer; background:var(--card); border:1px solid var(--border); font-size:0.8rem; color:var(--paper); font-family:inherit; transition:background var(--dur-fast), border-color var(--dur-fast); } .route-mode-chip:hover{ background:var(--card-hover); } .route-mode-chip.active{ background:color-mix(in srgb, var(--primary) 14%, var(--surface)); border-color:var(--primary); } .route-mode-chip svg{ width:15px; height:15px; color:var(--slate); } .route-mode-chip.active svg{ color:var(--primary); } .route-mode-time{ font-weight:700; color:var(--slate); font-size:0.76rem; } .route-mode-chip.active .route-mode-time{ color:var(--primary); } .route-mode-est{ margin-top:8px; font-size:0.82rem; color:var(--paper); font-weight:600; } .route-note{ margin:2px 22px 12px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--card); color:var(--slate); font-size:0.85rem; display:flex; gap:8px; align-items:flex-start; line-height:1.4; } .route-note--accent{ background:color-mix(in srgb, var(--primary) 10%, var(--surface)); color:var(--paper); } .route-note-ico{ flex:none; color:var(--primary); line-height:0; } .route-note-ico svg{ width:17px; height:17px; } /* Venue entry-payment tie-in (museum ticket) */ .venue-entry{ display:flex; align-items:center; gap:10px; width:calc(100% - 44px); margin:2px 22px 12px; padding:11px 13px; border-radius:var(--radius-sm); font-family:inherit; font-size:0.88rem; text-align:left; } .venue-entry-ico{ flex:none; display:inline-flex; line-height:0; } .venue-entry-ico svg{ width:18px; height:18px; } .venue-entry.is-paid{ background:color-mix(in srgb, #16a34a 13%, var(--surface)); color:#0f8a5f; font-weight:700; border:1px solid color-mix(in srgb,#16a34a 28%,transparent); } .venue-entry-buy{ cursor:pointer; color:#fff; background:var(--rc-accent, var(--primary)); border:none; box-shadow:var(--shadow-sm); transition:filter .15s; } .venue-entry-buy:hover{ filter:brightness(1.06); } .venue-entry-body{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; } .venue-entry-label{ font-weight:700; } .venue-entry-price{ font-size:0.78rem; opacity:.9; } .venue-entry-go{ flex:none; display:inline-flex; line-height:0; } .venue-entry-go svg{ width:18px; height:18px; } .route-group{ margin:2px 22px 14px; padding:14px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--card); } .route-group-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:4px; } .route-group-title{ font-weight:700; font-size:0.95rem; color:var(--paper); } .route-group-sub{ font-size:0.82rem; color:var(--slate); } .route-group-transport{ font-size:0.8rem; color:var(--slate); margin:4px 0 2px; } .route-group-dates-label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); font-weight:700; margin:10px 0 6px; } .route-group-list{ display:flex; flex-direction:column; gap:6px; } .route-group-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; padding:10px 12px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); font-family:inherit; transition:border-color var(--dur-fast); } .route-group-row:hover{ border-color:var(--border-strong); } .route-group-date{ flex:1; font-weight:600; font-size:0.88rem; color:var(--paper); } .route-group-seats{ flex:none; font-size:0.8rem; color:var(--primary); font-weight:700; } .route-group-go{ flex:none; color:var(--slate); line-height:0; } .route-group-go svg{ width:16px; height:16px; } .route-group-empty{ font-size:0.85rem; color:var(--slate); margin:4px 0 0; } /* Места на маршруте — tappable place chips → place modal */ .route-places{ padding:2px 22px 8px; } .route-places-title{ font-size:0.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); font-weight:700; margin:6px 0 8px; } .route-places-list{ display:flex; flex-direction:column; gap:8px; } .route-place-chip{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; font-family:inherit; padding:9px 12px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast), background var(--dur-fast); } .route-place-chip:hover{ border-color:var(--border-strong); background:var(--card-hover); } .route-place-ico{ flex:none; width:32px; height:32px; border-radius:var(--radius-xs); display:grid; place-items:center; color:var(--mk); background:color-mix(in srgb, var(--mk) 15%, var(--surface)); } .route-place-ico svg{ width:17px; height:17px; } .route-place-name{ flex:1; min-width:0; font-weight:600; font-size:0.9rem; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .route-place-rating{ flex:none; font-size:0.8rem; font-weight:700; color:var(--accent); } /* Ready offers block */ .route-offers{ margin:2px 22px 14px; } /* In the place modal the offers section follows the description/audio block, so it gets the same top-divider treatment as .pm-audio and drops the extra side inset (pm-landing already pads the sides). */ .pm-landing .route-offers{ margin:2px 0 4px; border-top:1px solid var(--border); padding-top:16px; } .route-offers-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; } .route-offers-title{ font-weight:700; font-size:0.98rem; color:var(--paper); } .route-offers-sub{ font-size:0.82rem; color:var(--slate); } .route-offers-list{ display:flex; flex-direction:column; gap:8px; } /* Offer cards reuse the site's .offer-card grid (avatar | body | full-width price↔action row). .route-offer is just the expand-state hook + details. */ .route-offers-list .route-offer.offer-card{ margin-bottom:0; } .route-offer-toggle{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; flex-shrink:0; border:1px solid var(--border); background:none; color:var(--paper); border-radius:var(--radius-pill); padding:8px 14px; font:inherit; font-size:0.82rem; font-weight:600; cursor:pointer; transition:border-color var(--dur-fast), color var(--dur-fast); } .route-offer-toggle:hover{ border-color:var(--primary); color:var(--primary); } .route-offer-toggle svg{ width:16px; height:16px; transition:transform .25s var(--ease-out); } .route-offer.open .route-offer-toggle svg{ transform:rotate(180deg); } .offer-price-unit{ display:block; margin-top:1px; font-family:inherit; font-weight:500; font-size:0.78rem; color:var(--slate); line-height:1.2; } .route-offer-details{ grid-column:1 / -1; display:none; } .route-offer.open .route-offer-details{ display:block; } .route-offer-desc{ font-size:0.88rem; color:var(--paper); margin:2px 0 12px; line-height:1.45; } .route-offer-incl-title{ font-size:0.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); font-weight:700; margin:8px 0 6px; } .route-offer-incl{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px; } .route-offer-incl li{ position:relative; padding-left:22px; font-size:0.88rem; color:var(--paper); } .route-offer-incl li::before{ content:""; position:absolute; left:3px; top:6px; width:9px; height:5px; border-left:2px solid var(--primary); border-bottom:2px solid var(--primary); transform:rotate(-45deg); } .route-offer-terms{ display:flex; flex-direction:column; margin:2px 0 14px; } .route-offer-term{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--border); font-size:0.86rem; } .route-offer-term span{ color:var(--slate); } .route-offer-term strong{ color:var(--paper); font-weight:600; text-align:right; } .route-offer-btn{ width:100%; padding:11px 14px; border-radius:var(--radius-pill); border:0; cursor:pointer; font-family:inherit; font-size:0.85rem; font-weight:600; background:var(--btn-primary-bg); color:var(--btn-primary-text); } .route-offer-btn:hover{ filter:brightness(1.05); } /* Inline join panel (one forming group) */ .route-join{ display:flex; flex-direction:column; gap:6px; margin:6px 0 12px; } .route-join-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; font-size:0.86rem; color:var(--slate); } .route-join-row strong{ margin-left:auto; color:var(--paper); font-weight:600; } .route-join-share strong{ color:var(--primary); } .route-join-calc{ flex-basis:100%; text-align:right; font-size:0.74rem; color:var(--slate); } .route-join-actions{ display:flex; flex-wrap:wrap; gap:8px; } .route-join-actions .btn-primary, .route-join-actions .btn-secondary{ flex:1; min-width:120px; } .route-join-done{ padding:9px 14px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--primary) 14%, var(--surface)); color:var(--primary); font-weight:700; font-size:0.85rem; text-align:center; flex:1; } .route-modal-actions{ position:sticky; bottom:0; padding:14px 22px calc(14px + env(safe-area-inset-bottom)); display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--surface); border-top:1px solid var(--border); } .route-modal-btn{ flex:1 1 auto; } .route-modal-fav{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:11px 14px; border-radius:var(--radius-md); border:1px solid var(--border-strong); background:var(--surface); color:var(--paper); font:inherit; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s, background .15s; } .route-modal-fav svg{ width:18px; height:18px; } .route-modal-fav:hover{ border-color:#e0556a; color:#e0556a; } .route-modal-fav.on{ color:#e0556a; border-color:#e0556a; background:rgba(224,85,106,.08); } /* ── AI "Add to trip" picker (day + time-of-day slot) ─────────────────────── */ .tripadd-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;} .tripadd-modal[hidden]{display:none!important;} @media (min-width:641px){ .tripadd-modal{align-items:center;} } .tripadd-backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.45);backdrop-filter:blur(2px);} .tripadd-sheet{position:relative;z-index:1;width:min(560px,100%);max-height:86vh;overflow:auto;background:var(--bg); border:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px)); box-shadow:0 -18px 44px rgba(15,23,42,0.22);animation:tripaddIn .22s ease;} @media (min-width:641px){ .tripadd-sheet{border-radius:var(--radius-lg);} } @keyframes tripaddIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}} .tripadd-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:var(--surface);border-radius:var(--radius-pill); color:var(--slate);font-size:20px;line-height:1;cursor:pointer;box-shadow:var(--shadow-xs);} .tripadd-title{font-family:var(--font-display,inherit);font-size:1.15rem;font-weight:700;color:var(--paper);padding-right:32px;} .tripadd-sub{font-size:.86rem;color:var(--slate-dim);margin-top:4px;} .tripadd-body{margin-top:16px;display:flex;flex-direction:column;gap:10px;} .tripadd-day{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:12px 14px;} .tripadd-day--has{border-color:rgba(var(--primary-rgb),0.4);background:rgba(var(--primary-rgb),0.05);} .tripadd-day-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;} .tripadd-day-date{font-weight:600;color:var(--paper);font-size:.92rem;} .tripadd-day-region{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--rc,var(--primary)); background:color-mix(in srgb,var(--rc,var(--primary)) 14%,transparent);padding:2px 8px;border-radius:var(--radius-pill);} .tripadd-slots{display:flex;flex-wrap:wrap;gap:8px;align-items:center;} .tripadd-slot{border:1px solid var(--border);background:var(--bg);color:var(--slate);border-radius:var(--radius-pill); padding:7px 15px;font-size:.86rem;font-weight:600;cursor:pointer;transition:all var(--dur-fast) ease;} .tripadd-slot:hover:not(:disabled){border-color:rgba(var(--primary-rgb),0.5);color:var(--primary);background:rgba(var(--primary-rgb),0.06);} .tripadd-slot:disabled{opacity:.4;cursor:not-allowed;} .tripadd-slot--allday{border-style:dashed;} .tripadd-blocked{font-size:.78rem;color:var(--slate-dim);} .tripadd-has-note{margin-top:8px;font-size:.78rem;color:var(--primary);font-weight:600;} .tripadd-empty{color:var(--slate-dim);font-size:.9rem;padding:8px 2px;} body.tripadd-open{overflow:hidden;} /* ── Trip plans: switcher button + plans list ─────────────────────────────── */ .route-plans-btn{display:inline-flex;align-items:center;gap:8px;margin:2px 0 14px;padding:8px 14px; border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-pill); color:var(--paper);font-size:.9rem;font-weight:600;cursor:pointer;box-shadow:var(--shadow-xs);transition:all var(--dur-fast) ease;} .route-plans-btn:hover{border-color:rgba(var(--primary-rgb),0.4);} .route-plans-btn svg{width:16px;height:16px;flex:none;color:var(--primary);} .route-plans-btn .route-plans-chev{width:14px;height:14px;color:var(--slate-dim);} #route-plans-label{max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tripadd-new{width:100%;margin-top:14px;padding:12px;border:1px dashed var(--border);background:transparent; border-radius:14px;color:var(--primary);font-size:.92rem;font-weight:600;cursor:pointer;transition:all var(--dur-fast) ease;} .tripadd-new:hover{border-color:rgba(var(--primary-rgb),0.5);background:rgba(var(--primary-rgb),0.05);} .trips-row{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:14px;background:var(--surface); padding:12px 12px;cursor:pointer;transition:all var(--dur-fast) ease;} .trips-row:hover{border-color:rgba(var(--primary-rgb),0.35);} .trips-row--active{border-color:rgba(var(--primary-rgb),0.5);background:rgba(var(--primary-rgb),0.05);} .trips-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;} .trips-row-name{font-weight:600;color:var(--paper);font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .trips-row-cur{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--primary); background:rgba(var(--primary-rgb),0.12);padding:2px 7px;border-radius:var(--radius-pill);margin-left:4px;} .trips-row-meta{font-size:.78rem;color:var(--slate-dim);} .trips-row-act{flex:none;width:30px;height:30px;border:none;background:var(--bg);border-radius:var(--radius-pill); color:var(--slate);font-size:16px;line-height:1;cursor:pointer;} .trips-row-act:hover{color:var(--primary);} /* Business card modal (barber / dentist / pharmacy / clinic) — reuses the tripadd shell. */ .biz-sheet{padding-top:0;} .biz-body{display:flex;flex-direction:column;gap:6px;} .biz-map{margin:0 -20px 14px;overflow:hidden;} .biz-map img{display:block;width:100%;height:200px;object-fit:cover;} .biz-cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--primary);} .biz-urgent{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--radius-pill); background:rgba(220,38,38,0.12);color:#dc2626;font-size:.66rem;letter-spacing:.02em;vertical-align:middle;} .biz-feats{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 2px;} .biz-feat{padding:2px 9px;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--border); color:var(--slate);font-size:.72rem;font-weight:600;} .biz-name{font-family:var(--font-display,inherit);font-size:1.2rem;font-weight:700;color:var(--paper);margin:2px 0 0;padding-right:32px;} .biz-status{font-size:.9rem;font-weight:600;margin:2px 0 8px;} .biz-status.biz-open{color:#16a34a;} .biz-status.biz-closed{color:var(--slate-dim);} .biz-row{display:flex;align-items:flex-start;gap:8px;font-size:.9rem;color:var(--slate);} .biz-row svg{flex:none;width:18px;height:18px;color:var(--slate-dim);margin-top:1px;} .biz-note{font-size:.86rem;color:var(--slate);background:var(--surface);border-radius:12px;padding:10px 12px;margin:8px 0 0;} .biz-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;} .biz-actions .btn-primary,.biz-actions .btn-secondary{flex:1;min-width:140px;} .biz-demo{font-size:.74rem;color:var(--slate-dim);margin:14px 0 0;}