*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} fieldset{border:none}legend{display:block;width:100%} output{display:block} cite{font-style:inherit} article,section,aside,header,main,nav{display:block} :root{ --bg:#161619;--bg2:#1c1c20;--bg3:#232328; --card:rgba(255,255,255,0.05);--card2:rgba(255,255,255,0.03); --text:#eaeaea;--text2:#b0b0b0;--text3:#707070; --coral:#FF6B8A;--sea:#36D7B7;--sand:#F5A623;--sky:#45AEF5; --glass:rgba(255,255,255,0.06); --border:rgba(255,255,255,0.08); --glow1:rgba(255,255,255,0.06);--glow2:rgba(255,255,255,0.04); --r:22px;--r2:26px; --bottom-h:68px; --safe-b:0px; --safe-t:0px; --tg-safe-top:env(safe-area-inset-top, 0px); --tg-safe-bottom:env(safe-area-inset-bottom, 0px); --viewport-safe-top:0px; --wave-bg:none; --wet:rgba(255,255,255,0.10); --wet-border:rgba(255,255,255,0.14); --wet-blur:none; --wet-shine:inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(255,255,255,0.02); --card-grad:linear-gradient(172deg, rgba(80,80,85,0.88) 0%, rgba(60,60,65,0.9) 35%, rgba(45,45,50,0.92) 100%); --card-bdr:rgba(255,255,255,0.18); --card-bdr-top:rgba(255,255,255,0.3); --card-soft:rgba(255,255,255,0.03); --card-bdr-soft:rgba(255,255,255,0.06); --text-on-card:rgba(255,255,255,0.88); } html{overflow:hidden;height:100%;width:100%;background:var(--bg);overflow-x:hidden!important} @media (display-mode: standalone), (display-mode: fullscreen){ :root{ --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } } body{height:100%;width:100%;overflow:hidden;overflow-x:hidden!important; background:var(--bg); background-image: radial-gradient(ellipse 90% 70% at 25% 85%, rgba(54,215,183,0.12) 0%, transparent 50%), radial-gradient(ellipse 80% 60% at 75% 15%, rgba(69,174,245,0.085) 0%, transparent 45%), radial-gradient(ellipse 70% 70% at 50% 50%, rgba(255,255,255,0.036) 0%, transparent 50%), radial-gradient(ellipse 60% 50% at 10% 30%, rgba(255,107,138,0.048) 0%, transparent 45%), radial-gradient(ellipse 50% 40% at 90% 70%, rgba(245,166,35,0.048) 0%, transparent 40%); } body{ font-family:'Inter',sans-serif;color:var(--text); line-height:1.5;-webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; position:relative;min-height:100vh;min-height:100dvh; } ::selection{background:var(--coral);color:#fff} ::-webkit-scrollbar{width:3px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--sea);border-radius:3px} /* ============ AMBIENT GLOW — WET GLASS ============ */ body::before{ content:'';position:fixed;top:0;left:0;width:100%;height:100%; background: radial-gradient(ellipse at 20% 80%, rgba(54,215,183,0.084) 0%, transparent 50%), radial-gradient(ellipse at 80% 15%, rgba(69,174,245,0.072) 0%, transparent 45%), radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 40%), radial-gradient(ellipse at 70% 60%, rgba(245,166,35,0.042) 0%, transparent 40%), radial-gradient(ellipse at 15% 20%, rgba(255,107,138,0.036) 0%, transparent 45%); pointer-events:none;z-index:0; animation:ambientShift 22s ease-in-out infinite alternate; } @keyframes ambientShift{ 0%{opacity:.5;filter:hue-rotate(0deg)} 50%{opacity:1;filter:hue-rotate(5deg)} 100%{opacity:.5;filter:hue-rotate(-3deg)} } body::after{ content:'';position:fixed;bottom:0;left:0;right:0;height:50%; background:linear-gradient(to top, rgba(54,215,183,0.042), transparent); pointer-events:none;z-index:0; } /* ============ SUBTLE VFX LAYER (revised 2026-07-08 - touch-safe) ============ Hover polish is gated behind @media (hover:hover) so it never latches on touch (Telegram Mini App is touch-first). .place-card is kept out of hover- lift / glow to avoid the halo-flicker fixed earlier. No global will-change. */ @keyframes softScreenIn{from{opacity:.82;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes softGlowSweep{from{transform:translateX(-120%) skewX(-16deg)}to{transform:translateX(220%) skewX(-16deg)}} @keyframes activeNavBreath{0%,100%{opacity:.58;transform:scale(.92)}50%{opacity:.95;transform:scale(1)}} @keyframes softBorderPulse{0%,100%{box-shadow:0 0 0 1px rgba(54,215,183,.05),0 8px 24px rgba(0,0,0,.18)}50%{box-shadow:0 0 0 1px rgba(54,215,183,.12),0 10px 28px rgba(0,0,0,.22)}} .screen.active{animation:softScreenIn .32s cubic-bezier(.2,.75,.25,1) both} .cat-card,.cat-hero,.cat-row,.place-card,.tip-bubble,.channel-banner,.bnav-item{transition-duration:.26s;transition-timing-function:cubic-bezier(.2,.75,.25,1)} .topbar::after,.bottomnav::before{background-size:220% 100%;animation:gradientSlide 10s linear infinite} .pc-cover img{transition:transform .55s cubic-bezier(.2,.75,.25,1),filter .55s ease} .aic-fab{transition:transform .18s cubic-bezier(.2,.75,.25,1),box-shadow .22s ease,filter .22s ease} .bnav-item.active::before{animation:activeNavBreath 3.6s ease-in-out infinite} .bnav-item.active .icon svg{filter:drop-shadow(0 2px 9px rgba(54,215,183,.42))} .bnav-item.sos-tab.active .icon svg{filter:drop-shadow(0 2px 9px rgba(255,107,138,.42))} @media (hover:hover) and (pointer:fine){ .cat-card:hover,.cat-hero:hover,.cat-row:hover,.tip-bubble:hover,.channel-banner:hover{transform:translateY(-2px)} .quick-chip:hover,.pill:hover,.subcat-chip:hover{transform:translateY(-1px)} .aic-fab:hover{transform:translateY(-1px);filter:saturate(1.05)} .place-card:hover .pc-cover img{transform:scale(1.025);filter:saturate(1.04) contrast(1.02)} .home-search-btn:hover,.lang-trigger:hover,.explore-back-btn:hover,.pc-stars:hover,.pc-photos:hover,.pc-reviews:hover,.pc-map:hover{border-color:rgba(54,215,183,.28);box-shadow:0 0 0 1px rgba(54,215,183,.08),0 6px 18px rgba(0,0,0,.18)} .cat-hero:hover,.cat-row:hover,.channel-banner:hover{animation:softBorderPulse 1.8s ease-in-out 1} .cat-card:nth-child(4n+1):hover{border-color:rgba(54,215,183,.18)} .cat-card:nth-child(4n+2):hover{border-color:rgba(69,174,245,.16)} .cat-card:nth-child(4n+3):hover{border-color:rgba(245,166,35,.14)} .cat-card:nth-child(4n+4):hover{border-color:rgba(255,107,138,.13)} .cat-card,.cat-hero,.cat-row,.home-hero,.quick-chip,.pill,.subcat-chip,.pc-stars,.pc-photos,.pc-reviews,.pc-map,.lang-trigger,.home-search-btn{position:relative;overflow:hidden} .cat-card::after,.cat-hero::after,.cat-row::after{content:'';position:absolute;inset:-45% auto -45% -65%;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.075),transparent);opacity:0;pointer-events:none;transform:translateX(-120%) skewX(-16deg)} .cat-card:hover::after,.cat-hero:hover::after,.cat-row:hover::after{opacity:1;animation:softGlowSweep 1.15s ease-out 1} .home-hero::before,.quick-chip::before,.pill::before,.subcat-chip::before,.pc-stars::before,.pc-photos::before,.pc-reviews::before,.pc-map::before,.lang-trigger::before,.home-search-btn::before{content:'';position:absolute;inset:0 auto 0 -70%;width:48%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.055),transparent);opacity:0;pointer-events:none;transform:skewX(-18deg)} .home-hero:hover::before,.quick-chip:hover::before,.pill:hover::before,.subcat-chip:hover::before,.pc-stars:hover::before,.pc-photos:hover::before,.pc-reviews:hover::before,.pc-map:hover::before,.lang-trigger:hover::before,.home-search-btn:hover::before{opacity:1;animation:softGlowSweep 1.05s ease-out 1} } @media (prefers-reduced-motion: reduce){ .screen.active,.bnav-item.active::before,.topbar::after,.bottomnav::before{animation:none} } /* ============ APP SHELL ============ */ .app{display:flex;flex-direction:column;height:100vh;height:100dvh;background:transparent;overflow-x:hidden!important;width:100%;max-width:100%} /* --- TOP BAR --- */ .topbar{ display:flex;align-items:center;justify-content:space-between; padding:.35rem .8rem; padding-top:calc(.35rem + var(--tg-safe-top, 0px)); background:#222226; border-top:1px solid rgba(255,255,255,0.15); border-bottom:1px solid rgba(0,0,0,0.3); border-left:1px solid rgba(255,255,255,0.05); border-right:1px solid rgba(255,255,255,0.05); box-shadow: inset 0 1px 2px rgba(255,255,255,0.08), inset 0 -1px 2px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.3); flex-shrink:0;z-index:50;position:relative; } .topbar::before{ content:'';display:none; } .topbar::after{ content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(54,215,183,0.08),rgba(245,166,35,0.06),transparent); opacity:1; } @keyframes gradientSlide{0%{background-position:0% 0}100%{background-position:200% 0}} .topbar-menu-btn{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);margin-top:calc(var(--tg-safe-top,0px)/2); display:inline-flex;align-items:center;justify-content:center; height:22px;padding:0 4px;border-radius:4px; font-family:'Inter','Space Grotesk',sans-serif;font-weight:500;font-size:.82rem;letter-spacing:.01em;line-height:1;text-transform:lowercase; color:var(--text); background:transparent;border:none;box-shadow:none; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:transform .15s,opacity .25s,color .25s; z-index:1;white-space:nowrap; } .topbar-menu-btn>.tmb-label{opacity:.55;transition:opacity .25s,color .25s;position:relative;display:inline-block;padding-bottom:2px} .topbar-menu-btn>.tmb-label::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:currentColor;opacity:0;transform:scaleX(.6);transform-origin:center; transition:opacity .25s,transform .3s cubic-bezier(.4,0,.2,1); } .topbar-menu-btn:hover>.tmb-label,.topbar-menu-btn.is-open>.tmb-label{opacity:1} .topbar-menu-btn.is-open>.tmb-label{color:var(--sea)} .topbar-menu-btn.is-open>.tmb-label::after{opacity:.6;transform:scaleX(1)} .topbar-menu-btn:active{transform:translate(-50%,-50%) scale(.94)} /* Round Menu variant — sits inline right after the GUIDE logo */ .topbar-menu-btn-round{ position:static;left:auto;top:auto;transform:none;margin-top:0; margin-left:.5rem;margin-right:auto; width:34px;height:34px;padding:0;border-radius:50%;flex-shrink:0; background:var(--wet,rgba(255,255,255,0.06)); border:1px solid var(--wet-border,rgba(255,255,255,0.12)); box-shadow:var(--wet-shine,inset 0 1px 0 rgba(255,255,255,0.08)),0 2px 8px rgba(0,0,0,0.18); backdrop-filter:var(--wet-blur,blur(20px));-webkit-backdrop-filter:var(--wet-blur,blur(20px)); color:var(--text);opacity:1; transition:transform .15s ease,background .25s,border-color .25s; } .topbar-menu-btn-round:active{transform:scale(.94)} .topbar-menu-btn-round:hover{background:rgba(54,215,183,0.1);border-color:rgba(54,215,183,0.3)} .topbar-menu-btn-round.is-open{background:linear-gradient(160deg,rgba(54,215,183,0.22),rgba(54,215,183,0.08));border-color:rgba(54,215,183,0.45);color:var(--sea)} .topbar-menu-btn-round .tmb-ico{display:block} body.light-theme .topbar-menu-btn-round{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.08)} .topbar-logo{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem; display:flex;align-items:center;gap:.3rem; } .topbar-logo .flag{font-size:1.2rem;filter:drop-shadow(0 0 4px rgba(54,215,183,0.2));display:flex;align-items:center;align-self:center} .topbar-logo .flag svg{vertical-align:middle;position:relative;top:1px} .logo-dolphin{animation:dolphinSwim 3s ease-in-out infinite} @keyframes dolphinSwim{0%,100%{transform:translateY(0)}40%{transform:translateY(-2px)}70%{transform:translateY(.5px)}} .logo-dolphin .wave{animation:waveMove 2.5s linear infinite} @keyframes waveMove{0%{transform:translateX(0)}100%{transform:translateX(-7px)}} .topbar-logo .t1{color:var(--sea)} .topbar-logo .t2{color:var(--sand)} @keyframes catMapHighlight{0%{box-shadow:0 0 0 0 rgba(54,215,183,0.5)}50%{box-shadow:0 0 0 6px rgba(54,215,183,0.3)}100%{box-shadow:none}} .lang-row{display:flex;gap:3px} .lang-b{ padding:3px 8px;border:none;background:transparent;color:var(--text3); cursor:pointer;border-radius:6px;font-size:.65rem;font-weight:700; transition:all .2s;font-family:inherit;letter-spacing:.5px;display:none; } .lang-b.on{background:var(--sea);color:#fff;display:inline-flex} .lang-b:active:not(.on){background:var(--bg3)} /* Compact language trigger button */ .lang-trigger{ display:flex;align-items:center;gap:5px; padding:5px 12px;border:1px solid var(--wet-border); background:var(--wet);color:var(--text); cursor:pointer;border-radius:20px;font-size:.72rem;font-weight:700; font-family:'Space Grotesk',sans-serif;letter-spacing:.5px; backdrop-filter:var(--wet-blur); box-shadow:var(--wet-shine),0 2px 8px rgba(0,0,0,0.1); transition:all .25s; -webkit-tap-highlight-color:transparent; } .lang-trigger:active{transform:scale(.95);background:rgba(54,215,183,0.15)} .lang-trigger .lt-flag{font-size:.9rem;line-height:1} .lang-trigger .lt-code{color:var(--sea);font-weight:800} .lang-trigger .lt-arrow{color:var(--text3);font-size:.6rem;transition:transform .3s} .lang-trigger:active .lt-arrow{transform:rotate(180deg)} /* Flag-only round variant */ .lang-trigger.lang-trigger-flag-only{ width:34px;height:34px;padding:0;gap:0;border-radius:50%; display:flex;align-items:center;justify-content:center; } .lang-trigger.lang-trigger-flag-only .lt-flag{font-size:1.05rem} /* --- LANGUAGE PICKER MODAL --- */ .lp-overlay{ position:fixed;inset:0;z-index:200; display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,0.6); opacity:1;transition:opacity .35s; } .lp-overlay.hidden{opacity:0;pointer-events:none} .lp-modal{ background:rgba(14,14,14,0.95);border-radius:var(--r2);padding:1.8rem 1.5rem; max-width:380px;width:92%;text-align:center; border:1px solid rgba(255,255,255,0.1); box-shadow:0 20px 60px rgba(0,0,0,0.5); backdrop-filter:blur(40px) saturate(1.5);-webkit-backdrop-filter:blur(40px) saturate(1.5); animation:lpIn .4s ease; } @keyframes lpIn{from{opacity:0;transform:scale(.9) translateY(20px)} to{opacity:1;transform:none}} .lp-modal h2{ font-family:'Space Grotesk',sans-serif;font-size:1.2rem;margin-bottom:.3rem; color:var(--sea); } .lp-modal p{color:var(--text2);margin-bottom:1.2rem;font-size:.85rem} .lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .lp-btn{ display:flex;flex-direction:column;align-items:center;gap:3px; padding:12px 6px;border:1px solid var(--wet-border); border-radius:14px; background:var(--wet);color:var(--text);cursor:pointer; transition:all .2s;font-family:inherit;font-size:.8rem; backdrop-filter:var(--wet-blur); box-shadow:var(--wet-shine), 0 2px 10px rgba(0,0,0,0.08); } .lp-btn:active,.lp-btn:hover{ background:var(--sea);color:#fff;border-color:var(--sea); transform:scale(1.04); } .lp-btn .lp-flag{font-size:1.5rem;line-height:1} .lp-btn .lp-name{font-weight:600;font-size:.75rem;line-height:1.2} .lp-btn .lp-sub{font-size:.6rem;color:var(--text3);font-weight:400} /* --- SCREENS --- */ .screens{flex:1;overflow:hidden;position:relative;background:transparent;width:100%;max-width:100%} .screen{ position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:scroll;overflow-x:hidden; padding:1rem 1rem calc(var(--bottom-h) + var(--safe-b) + 1rem); display:none; width:100%;max-width:100%; -webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; overflow-wrap:break-word;word-wrap:break-word; z-index:1; } .screen::-webkit-scrollbar{display:none} .screen.active{display:block;z-index:2} .screen.slide-left,.screen.slide-right{display:block} /* --- BOTTOM NAV --- */ .bottomnav{ position:fixed;bottom:0;left:0;right:0; display:flex;justify-content:space-around;align-items:center; height:calc(var(--bottom-h) + var(--safe-b)); padding-bottom:var(--safe-b); background:#0e0e0e; border-top:1px solid rgba(255,255,255,0.1);z-index:50; box-shadow:0 -4px 24px rgba(0,0,0,0.5); } .bottomnav::before{ content:'';position:absolute;top:-1px;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent); opacity:1; } html.tg-webapp .bottomnav{ transition:opacity .18s ease,transform .18s cubic-bezier(.2,.75,.25,1); } html.tg-shell-settling .bottomnav{ opacity:0; transform:translateY(10px); pointer-events:none; } .bnav-item{ display:flex;flex-direction:column;align-items:center;gap:2px; padding:8px 14px;border:none;background:none;color:var(--text3); cursor:pointer;font-family:inherit; transition:all .35s cubic-bezier(.4,0,.2,1); -webkit-tap-highlight-color:transparent;min-width:56px; position:relative;border-radius:16px; } .bnav-item::before{ content:'';position:absolute;inset:4px 6px;border-radius:14px; background:transparent;transition:all .35s cubic-bezier(.4,0,.2,1); z-index:-1; } .bnav-item.active::before{ background:rgba(54,215,183,0.12); box-shadow:0 0 20px rgba(54,215,183,0.15),inset 0 1px 0 rgba(255,255,255,0.08); } .bnav-item::after{ content:'';position:absolute;top:0;left:50%;width:0;height:2px; background:var(--sea);border-radius:0 0 2px 2px; transition:all .35s cubic-bezier(.4,0,.2,1); transform:translateX(-50%); box-shadow:0 0 8px rgba(54,215,183,0.3); } .bnav-item.active::after{ width:20px; } .bnav-item .icon{font-size:1.4rem;transition:all .35s cubic-bezier(.4,0,.2,1);line-height:1} .bnav-item .icon svg{width:22px;height:22px;color:#8a8a8a;transition:all .35s cubic-bezier(.4,0,.2,1)} .bnav-item.active .icon svg{color:var(--sea);filter:drop-shadow(0 2px 8px rgba(54,215,183,0.4))} .bnav-item.sos-tab .icon svg{color:var(--text3)} .bnav-item.sos-tab.active .icon svg{color:var(--coral);filter:drop-shadow(0 2px 8px rgba(255,107,138,0.4))} .bnav-item.sos-tab.active::before{background:rgba(255,107,138,0.12);box-shadow:0 0 20px rgba(255,107,138,0.12),inset 0 1px 0 rgba(255,255,255,0.06)} .bnav-item.sos-tab.active::after{background:var(--coral);box-shadow:0 0 8px rgba(255,107,138,0.4)} .bnav-item .label{font-size:.62rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;transition:all .35s;color:#8a8a8a} .bnav-item.active{color:var(--sea)} .bnav-item.active .label{color:var(--sea)} .bnav-item.active .icon{transform:scale(1.1) translateY(-1px)} .bnav-item.sos-tab{color:var(--text3)} .bnav-item.sos-tab.active{color:var(--coral)} /* ============ HOME SCREEN ============ */ /* Mini weather banner */ .weather-banner{ display:none; } .weather-banner::after{ content:'';position:absolute;bottom:-20px;left:-10px;width:80px;height:80px; background:radial-gradient(circle,rgba(255,255,255,0.06),transparent 70%); border-radius:50%;pointer-events:none; } .weather-banner::before{ content:'';position:absolute;top:0;left:5%;right:5%;height:45%; background:linear-gradient(180deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.04) 40%,transparent 100%); border-radius:var(--r2) var(--r2) 50% 50%;pointer-events:none; } .wb-temp{ font-family:'Space Grotesk',sans-serif;font-size:2.2rem;font-weight:800; color:var(--sky);flex-shrink:0; } .wb-info{flex:1;min-width:0} .wb-top-row{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem} .wb-city{font-weight:600;font-size:.9rem} .wb-datetime{font-size:.7rem;color:var(--sand);font-weight:600;font-family:'Space Grotesk',sans-serif;white-space:nowrap;opacity:.85} .wb-desc{font-size:.75rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wb-details{display:flex;gap:.8rem;margin-top:2px} .wb-det{font-size:.7rem;color:var(--text3)} /* Exchange mini row — marquee ticker */ .exchange-row{ overflow:hidden;padding-bottom:.3rem;margin-bottom:.4rem; width:100%;position:relative;direction:ltr; -webkit-mask-image:linear-gradient(to right,#000 90%,transparent 100%); mask-image:linear-gradient(to right,#000 90%,transparent 100%); } .exchange-row::-webkit-scrollbar{display:none} .exchange-track{ display:inline-flex;gap:.5rem;white-space:nowrap;will-change:transform; } .exr-chip{ flex-shrink:0;display:flex;align-items:center;gap:.4rem; background:var(--wet); border:1px solid var(--wet-border); backdrop-filter:var(--wet-blur); border-radius:14px;padding:.5rem .8rem;transition:all .25s; box-shadow:var(--wet-shine), 0 2px 10px rgba(0,0,0,0.08); } .exr-chip:active{box-shadow:0 0 16px rgba(255,209,102,0.1);border-color:rgba(255,209,102,0.2)} .exr-flag{font-size:1rem} .exr-code{font-size:.7rem;font-weight:600;color:var(--text2)} .exr-val{font-size:.8rem;font-weight:700;color:var(--sand);font-family:'Space Grotesk',sans-serif} /* Section title */ .sec-title{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.9rem; margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem; background:linear-gradient(165deg,rgba(255,255,255,0.28),rgba(255,255,255,0.14) 60%,rgba(255,255,255,0.08)); background-color:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.25); border-top:1px solid rgba(255,255,255,0.38); border-radius:14px; padding:.6rem 1rem; backdrop-filter:var(--wet-blur); box-shadow:inset 0 1px 3px rgba(255,255,255,0.2), 0 2px 12px rgba(0,0,0,0.15); position:relative;overflow:hidden; } .sec-title::before{ content:'';position:absolute;top:0;left:0;right:0;height:50%; background:linear-gradient(180deg,rgba(255,255,255,0.18),transparent); pointer-events:none;border-radius:14px 14px 0 0; } .sec-title .dot{ width:8px;height:8px;border-radius:50%;background:var(--sea);flex-shrink:0; box-shadow:0 0 12px rgba(255,255,255,0.3); } @keyframes dotPulse{0%,100%{box-shadow:0 0 6px rgba(255,255,255,0.15)}50%{box-shadow:0 0 14px rgba(255,255,255,0.25)}} /* Search */ .home-search-btn{margin-left:auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;transition:.2s;flex-shrink:0} .home-search-btn:active{transform:scale(.9);background:rgba(255,255,255,.12)} .search-overlay{display:none} .search-overlay.open{display:block} .search-inline{margin-bottom:.8rem} .search-input-wrap{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.5rem .7rem;margin-bottom:.5rem} .search-input-wrap svg{flex-shrink:0;color:var(--text3)} .search-input{flex:1;background:none;border:none;color:#fff;font-size:.85rem;font-family:inherit;outline:none} .search-input::placeholder{color:var(--text3)} .search-close{background:none;border:none;color:var(--text3);font-size:.9rem;cursor:pointer;padding:2px 6px;flex-shrink:0} .search-results{max-height:50vh;overflow-y:auto;scrollbar-width:none} .search-results::-webkit-scrollbar{display:none} .sr-item{display:flex;align-items:flex-start;gap:.6rem;padding:.8rem .8rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:12px;margin-bottom:6px;cursor:pointer;transition:.15s;min-height:44px} .sr-item:active{background:rgba(255,255,255,.15)} .sr-icon{font-size:1.1rem;flex-shrink:0;margin-top:2px} .sr-body{flex:1;min-width:0} .sr-name{font-size:.8rem;font-weight:600;color:var(--text)} .sr-cat{font-size:.62rem;color:var(--text3);margin-top:1px} .sr-desc{font-size:.7rem;color:var(--text2);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sr-empty{text-align:center;color:var(--text3);font-size:.8rem;padding:1.5rem} /* Category grid — home */ .cat-grid{ display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem; width:100%;margin-bottom:.5rem; } .cat-grid .cat-card{width:calc(33.333% - .34rem)} .cat-card{ aspect-ratio:1; display:flex;flex-direction:column;align-items:center;justify-content:center; background: radial-gradient(ellipse at 50% 115%, color-mix(in srgb, var(--grp) 32%, transparent) 0%, transparent 55%), linear-gradient(165deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.02) 100%); background-color:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.18); border-top:1px solid rgba(255,255,255,0.34); border-bottom:1px solid rgba(0,0,0,0.28); border-radius:30%; padding:.5rem;text-align:center;cursor:pointer; transition:all .3s cubic-bezier(.4,0,.2,1); -webkit-tap-highlight-color:transparent; position:relative;overflow:hidden; backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5); box-shadow: inset 0 1px 4px rgba(255,255,255,0.24), inset 0 -1px 4px rgba(0,0,0,0.3), 0 6px 22px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.15); } .cat-card::before{ content:'';position:absolute;top:0;left:8%;right:8%;height:42%; background:linear-gradient(180deg,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.04) 60%,transparent 100%); border-radius:16px 16px 50% 50%;pointer-events:none; } .cat-card::after{ content:'';position:absolute;inset:0;border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,0.06) 0%,transparent 35%,rgba(0,0,0,0.08) 100%); opacity:0;transition:opacity .3s; } .cat-card:active{transform:scale(0.93) translateY(2px)} .cat-card:hover::after,.cat-card:active::after{opacity:1} .cat-card:active{box-shadow:inset 0 2px 5px rgba(0,0,0,0.35),inset 0 1px 2px rgba(255,255,255,0.05),0 1px 3px rgba(0,0,0,0.1)} .cat-card:hover{border-color:rgba(255,255,255,0.18)} .cat-icon{font-size:1.8rem;display:block;margin-bottom:.3rem} .cat-icon svg{width:26px;height:26px;color:var(--sand);filter:drop-shadow(0 2px 6px rgba(255,209,102,0.35));transition:all .3s} .cat-card:active .cat-icon svg{transform:scale(1.15);filter:drop-shadow(0 3px 10px rgba(255,209,102,0.5))} .cat-name{font-size:.7rem;font-weight:700;color:var(--text);line-height:1.15;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} /* Home hero cards — "Start here" group */ .cat-hero-wrap{display:flex;flex-direction:column;gap:.55rem;width:100%;margin-bottom:.9rem} .cat-hero{ display:flex;align-items:center;gap:.85rem; background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--grp) 22%, transparent) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 100%); background-color:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.12); border-left:3px solid var(--grp); border-radius:18px; padding:.8rem .95rem; position:relative;overflow:hidden;cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; -webkit-tap-highlight-color:transparent; box-shadow:0 3px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.07); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); } .cat-hero:active{transform:scale(0.985);box-shadow:0 1px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05)} .cat-hero .ch-icon{ flex-shrink:0;width:46px;height:46px; display:flex;align-items:center;justify-content:center; background:color-mix(in srgb, var(--grp) 18%, rgba(255,255,255,0.04)); border:1px solid color-mix(in srgb, var(--grp) 34%, rgba(255,255,255,0.08)); border-radius:13px; } .cat-hero .ch-icon svg{width:26px;height:26px;color:var(--grp);filter:drop-shadow(0 2px 6px color-mix(in srgb, var(--grp) 45%, transparent))} .cat-hero .ch-text{flex:1;min-width:0} .cat-hero .ch-title{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:800;letter-spacing:-.01em;color:var(--text);line-height:1.2} .cat-hero .ch-sub{font-size:.72rem;color:var(--text2);opacity:.78;margin-top:.18rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cat-hero .ch-arrow{flex-shrink:0;font-size:1.3rem;color:var(--text2);opacity:.45;transition:transform .2s, opacity .2s;line-height:1} .cat-hero:active .ch-arrow{transform:translateX(3px);opacity:.8} /* Compact category rows — non-start groups (menu-style list) */ .cat-row-wrap{display:flex;flex-direction:column;gap:.42rem;width:100%;margin-bottom:.9rem} .cat-row{ display:flex;align-items:center;gap:.75rem; background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.025) 100%); background-color:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.09); border-left:2px solid var(--grp); border-radius:14px; padding:.55rem .8rem; position:relative;cursor:pointer; transition:transform .18s ease, border-color .2s ease; -webkit-tap-highlight-color:transparent; box-shadow:0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); } .cat-row:active{transform:scale(0.99)} .cat-row .cr-icon{ flex-shrink:0;width:36px;height:36px; display:flex;align-items:center;justify-content:center; background:color-mix(in srgb, var(--grp) 16%, rgba(255,255,255,0.03)); border:1px solid color-mix(in srgb, var(--grp) 28%, rgba(255,255,255,0.06)); border-radius:10px; } .cat-row .cr-icon svg{width:20px;height:20px;color:var(--grp);filter:drop-shadow(0 1px 3px color-mix(in srgb, var(--grp) 40%, transparent))} .cat-row .cr-name{flex:1;min-width:0;font-family:'Space Grotesk',sans-serif;font-size:.9rem;font-weight:700;letter-spacing:-.01em;color:var(--text);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cat-row .cr-arrow{flex-shrink:0;font-size:1.15rem;color:var(--text2);opacity:.4;transition:transform .18s, opacity .18s;line-height:1} .cat-row:active .cr-arrow{transform:translateX(2px);opacity:.75} /* Quick tips marquee ticker */ .tips-scroll{ overflow-x:auto;overflow-y:hidden;padding-bottom:.7rem;margin-bottom:1rem; width:100%;position:relative;-webkit-overflow-scrolling:touch;direction:ltr; } .tips-scroll::-webkit-scrollbar{display:none} .tips-track{ display:inline-flex;gap:.7rem;white-space:nowrap;will-change:transform; } .tip-bubble{ flex-shrink:0;width:260px;white-space:normal; background:var(--wet); backdrop-filter:var(--wet-blur); box-shadow:var(--wet-shine), 0 4px 16px rgba(0,0,0,0.08); border:1px solid var(--wet-border);border-radius:var(--r); padding:1rem 1.1rem;font-size:.8rem;color:var(--text2);line-height:1.6; position:relative;transition:transform .25s,box-shadow .25s; } .tip-bubble:active{transform:scale(0.97);box-shadow:0 4px 20px rgba(255,255,255,0.05)} .tip-bubble strong{color:var(--sand)} .tip-bubble::before{ content:'💡';position:absolute;top:.5rem;right:.6rem;font-size:1.2rem;opacity:.2; } .tip-bubble::after{ content:'';position:absolute;top:0;left:0;right:0;height:45%; background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03) 50%,transparent); pointer-events:none;border-radius:var(--r) var(--r) 0 0; } .channel-banner{margin:.8rem 1rem;padding:.75rem 1rem;background:linear-gradient(135deg,rgba(54,215,183,0.15),rgba(69,174,245,0.10));border:1px solid rgba(54,215,183,0.25);border-radius:16px;display:flex;align-items:center;gap:.7rem;cursor:pointer;transition:all .2s;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:relative;overflow:hidden} .channel-banner::before{ content:'';position:absolute;top:0;left:0;right:0;height:50%; background:linear-gradient(180deg,rgba(255,255,255,0.1),transparent); pointer-events:none;border-radius:16px 16px 0 0; } .channel-banner:active{transform:scale(.97)} .channel-banner .cb-icon{font-size:1.4rem;flex-shrink:0} .channel-banner .cb-text{flex:1;font-size:.78rem;line-height:1.4;color:var(--text2)} .channel-banner .cb-text strong{color:var(--sea);display:block;font-size:.82rem;margin-bottom:.1rem} .channel-banner .cb-join{padding:.4rem .9rem;border-radius:20px;background:var(--sea);color:#fff;font-size:.72rem;font-weight:700;border:none;cursor:pointer;white-space:nowrap;font-family:inherit} .channel-banner .cb-close{background:none;border:none;color:var(--text3);font-size:1rem;cursor:pointer;padding:4px;line-height:1} /* ============ EXPLORE SCREEN ============ */ /* Explore header */ .explore-header{ display:flex;align-items:center;gap:.5rem; position:sticky;top:-1px;z-index:20; padding:.5rem .25rem;margin:0 -.25rem .35rem; background:transparent; pointer-events:none; } .explore-header>*{pointer-events:auto} body.light-theme .explore-header{background:transparent} .explore-cat-title{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.92rem; color:var(--text);flex:1;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .explore-cat-count{ font-size:.65rem;font-weight:600;color:var(--text3);flex-shrink:0; padding:.13rem .46rem;border-radius:7px;background:rgba(255,255,255,0.05); } .explore-back-btn{ width:2rem;height:2rem;flex-shrink:0; display:inline-flex;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,0.14); border-radius:999px; background:linear-gradient(145deg,rgba(255,255,255,0.10),rgba(255,255,255,0.04)); color:var(--text);cursor:pointer; padding:0;font:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 2px 8px rgba(0,0,0,0.25); backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4); transition:transform .15s ease,background .2s,border-color .2s; -webkit-tap-highlight-color:transparent; } .explore-back-btn:active{transform:scale(0.92);background:rgba(255,255,255,0.16)} .explore-back-btn svg{width:1rem;height:1rem;display:block} body.light-theme .explore-back-btn{ background:linear-gradient(145deg,rgba(255,255,255,0.95),rgba(245,247,250,0.85)); border-color:rgba(0,0,0,0.08);color:#15212e; box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 2px 8px rgba(0,0,0,0.06); } /* Category dropdown trigger — capsule with group color */ .cat-dd-btn{ --btn-clr:#36D7B7; display:inline-flex;align-items:center;gap:.44rem; padding:.44rem .72rem .44rem .58rem; background:linear-gradient(135deg, color-mix(in srgb, var(--btn-clr) 22%, transparent) 0%, color-mix(in srgb, var(--btn-clr) 6%, transparent) 60%, rgba(255,255,255,0.04) 100%); border:1px solid color-mix(in srgb, var(--btn-clr) 45%, transparent); border-top:1px solid color-mix(in srgb, var(--btn-clr) 60%, transparent); border-radius:999px; color:var(--text);cursor:pointer;text-align:left; max-width:100%;min-width:0;flex:0 1 auto; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 2px 12px color-mix(in srgb, var(--btn-clr) 24%, transparent), 0 1px 3px rgba(0,0,0,0.2); backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4); transition:transform .15s ease,border-color .2s,box-shadow .25s,background .2s; -webkit-tap-highlight-color:transparent; } .cat-dd-btn[data-grp="start"]{--btn-clr:#36D7B7} .cat-dd-btn[data-grp="see"]{--btn-clr:#45AEF5} .cat-dd-btn[data-grp="food"]{--btn-clr:#FF6B8A} .cat-dd-btn[data-grp="fun"]{--btn-clr:#F5A623} .cat-dd-btn[data-grp="shop"]{--btn-clr:#C88BFF} .cat-dd-btn:active{transform:scale(0.97)} .cat-dd-btn.is-open{ border-color:color-mix(in srgb, var(--btn-clr) 75%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 18px color-mix(in srgb, var(--btn-clr) 40%, transparent), 0 2px 6px rgba(0,0,0,0.25); } .cat-dd-btn .cat-dd-trig-ico{ width:1.25rem;height:1.25rem;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center; color:var(--btn-clr); filter:drop-shadow(0 1px 4px color-mix(in srgb, var(--btn-clr) 50%, transparent)); } .cat-dd-btn .cat-dd-trig-ico svg{width:1.08rem;height:1.08rem} .cat-dd-btn .explore-cat-title{ font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:.9rem;line-height:1.1;flex:0 1 auto;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .cat-dd-menu{ display:inline-flex;flex-direction:column;justify-content:center;gap:2px; width:14px;height:12px;margin-left:.08rem;flex-shrink:0; transition:transform .25s cubic-bezier(.4,0,.2,1); } .cat-dd-menu>span{ display:block;height:2px;border-radius:2px; background:var(--btn-clr);opacity:.85; box-shadow:0 0 4px color-mix(in srgb,var(--btn-clr) 40%,transparent); transition:width .2s; } .cat-dd-menu>span:nth-child(1){width:100%} .cat-dd-menu>span:nth-child(2){width:75%} .cat-dd-menu>span:nth-child(3){width:55%} .cat-dd-btn.is-open .cat-dd-menu>span{opacity:1} .cat-dd-btn.is-open .cat-dd-menu>span:nth-child(2){width:100%} .cat-dd-btn.is-open .cat-dd-menu>span:nth-child(3){width:100%} body.light-theme .cat-dd-btn{ background:linear-gradient(135deg, color-mix(in srgb, var(--btn-clr) 28%, white) 0%, color-mix(in srgb, var(--btn-clr) 10%, white) 70%, rgba(255,255,255,0.85) 100%); border:1px solid color-mix(in srgb, var(--btn-clr) 40%, transparent); border-top:1px solid rgba(255,255,255,0.9); box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 2px 10px color-mix(in srgb, var(--btn-clr) 22%, transparent); color:#1a1a1a; } body.light-theme .cat-dd-btn.is-open{ border-color:color-mix(in srgb, var(--btn-clr) 70%, transparent); } /* Overlay + glass panel */ .cat-dd-overlay{ position:fixed;inset:0;z-index:9000; background:rgba(14,14,14,0.78); backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2); display:flex;align-items:stretch;justify-content:stretch; opacity:0;transition:opacity .28s ease; --dd-ox:50%;--dd-oy:42px; clip-path:circle(0% at var(--dd-ox) var(--dd-oy)); -webkit-clip-path:circle(0% at var(--dd-ox) var(--dd-oy)); transition:clip-path .55s cubic-bezier(.5,0,.15,1),-webkit-clip-path .55s cubic-bezier(.5,0,.15,1),opacity .28s ease,background .35s ease; } .cat-dd-overlay.is-open{opacity:1;clip-path:circle(160% at var(--dd-ox) var(--dd-oy));-webkit-clip-path:circle(160% at var(--dd-ox) var(--dd-oy))} .cat-dd-panel{ width:100%;height:100%;box-sizing:border-box; display:flex;flex-direction:column;align-items:center; overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; background:transparent; padding:0 .9rem calc(env(safe-area-inset-bottom,0px) + 1rem); } .cat-dd-body{ width:100%;max-width:380px; display:flex;flex-direction:column;align-items:center;gap:1.1rem; margin:auto 0;padding:.8rem 0 1rem; } .cat-dd-card{ width:100%; background:linear-gradient(180deg,color-mix(in srgb,var(--bg3) 92%,transparent),color-mix(in srgb,var(--bg) 94%,transparent)); border:1px solid var(--border,rgba(255,255,255,0.08)); border-radius:18px;overflow:hidden; backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35); box-shadow:0 14px 34px rgba(0,0,0,0.45),inset 0 1px 0 color-mix(in srgb,var(--text) 10%,transparent); } body.light-theme .cat-dd-card{ background:linear-gradient(180deg,color-mix(in srgb,var(--bg3) 94%,rgba(255,255,255,0.6)),color-mix(in srgb,var(--bg) 90%,rgba(255,255,255,0.5))); box-shadow:0 14px 34px rgba(18,24,36,0.12),inset 0 1px 0 rgba(255,255,255,0.8); } @keyframes ddHeadSlide{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:none}} @keyframes ddGroupIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}} @keyframes ddItemPop{ 0%{opacity:0;transform:translateY(14px) scale(.82)} 60%{opacity:1;transform:translateY(-2px) scale(1.04)} 100%{opacity:1;transform:none} } @keyframes ddIcoSpin{0%{transform:rotate(-25deg) scale(.7);opacity:.4}100%{transform:none;opacity:1}} @keyframes ddDotPulse{0%,100%{box-shadow:0 0 8px var(--grp-clr)}50%{box-shadow:0 0 14px var(--grp-clr),0 0 22px color-mix(in srgb,var(--grp-clr) 60%,transparent)}} .cat-dd-overlay.is-open .cat-dd-head{animation:ddHeadSlide .42s cubic-bezier(.4,0,.2,1) both .18s} .cat-dd-overlay.is-open .cat-dd-group{animation:ddGroupIn .5s cubic-bezier(.34,1.1,.5,1) both;animation-delay:calc(var(--gi,0) * 70ms + 220ms)} .cat-dd-overlay.is-open .cat-dd-item{animation:ddItemPop .5s cubic-bezier(.34,1.4,.5,1) both;animation-delay:calc(var(--i,0) * 22ms + 260ms)} .cat-dd-overlay.is-open .cat-dd-gdot{animation:ddDotPulse 1.8s ease-in-out 1s infinite} .cat-dd-panel::-webkit-scrollbar{display:none} .cat-dd-head{ position:sticky;top:0;z-index:2;margin:0 -.9rem;width:calc(100% + 1.8rem); padding:calc(env(safe-area-inset-top,0px) + .3rem) 1rem .7rem; display:flex;flex-direction:column;align-items:stretch;gap:0; background:transparent; } .cat-dd-title{ font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:1.05rem; letter-spacing:.02em;color:var(--text);opacity:.95; } .cat-dd-search-wrap{ width:100%;max-width:380px;margin:.6rem auto 0;position:relative; } .cat-dd-search{ width:100%;box-sizing:border-box; height:40px;padding:0 2.2rem 0 2.4rem; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:12px;color:var(--text);font-size:.9rem; font-family:'Inter',sans-serif;outline:none; transition:background .2s,border-color .2s,box-shadow .2s; } .cat-dd-search::placeholder{color:var(--text3);opacity:.7} .cat-dd-search:focus{ background:rgba(255,255,255,0.09); border-color:color-mix(in srgb,var(--sea) 45%,rgba(255,255,255,0.1)); box-shadow:0 0 0 3px color-mix(in srgb,var(--sea) 15%,transparent); } .cat-dd-search-ico{ position:absolute;left:.85rem;top:50%;transform:translateY(-50%); color:var(--text3);opacity:.75;pointer-events:none;display:flex; } .cat-dd-search-clear{ position:absolute;right:.5rem;top:50%;transform:translateY(-50%); width:22px;height:22px;border:none;border-radius:50%; background:rgba(255,255,255,0.1);color:var(--text);cursor:pointer; display:none;align-items:center;justify-content:center;font-size:.85rem; -webkit-tap-highlight-color:transparent; } .cat-dd-search-clear.is-visible{display:inline-flex} body.light-theme .cat-dd-search{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:#111} body.light-theme .cat-dd-search:focus{background:rgba(0,0,0,0.06);border-color:color-mix(in srgb,var(--sea) 50%,rgba(0,0,0,0.1))} body.light-theme .cat-dd-search-clear{background:rgba(0,0,0,0.1);color:#222} .cat-dd-empty{ display:none;width:100%;max-width:380px;margin:1.2rem auto 0; padding:1.4rem 1rem;text-align:center;border-radius:16px; background:rgba(255,255,255,0.04);border:1px dashed rgba(255,255,255,0.1); color:var(--text3);font-size:.88rem; } .cat-dd-empty.is-shown{display:block} body.light-theme .cat-dd-empty{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.12);color:#666} .cat-dd-grip{ width:40px;height:4px;border-radius:999px;background:rgba(255,255,255,0.18); margin:8px auto 0;flex-shrink:0; } body.light-theme .cat-dd-grip{background:rgba(0,0,0,0.15)} .cat-dd-close{ width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.06);color:var(--text); display:inline-flex;align-items:center;justify-content:center; font-size:1.3rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent; transition:background .2s,transform .15s,border-color .2s; } .cat-dd-close:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.22)} .cat-dd-close:active{transform:scale(.9)} .cat-dd-group{margin:0;width:100%} .cat-dd-group[data-grp="start"]{--grp-clr:#36D7B7} .cat-dd-group[data-grp="see"]{--grp-clr:#45AEF5} .cat-dd-group[data-grp="food"]{--grp-clr:#FF6B8A} .cat-dd-group[data-grp="fun"]{--grp-clr:#F5A623} .cat-dd-group[data-grp="shop"]{--grp-clr:#C88BFF} .cat-dd-ghead{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; margin:0 auto .5rem;padding:0 .3rem; font-family:'Inter',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.2em; text-transform:uppercase;color:var(--grp-clr); text-align:center;width:fit-content;align-self:center; } .cat-dd-group{display:flex;flex-direction:column;align-items:stretch;width:100%} .cat-dd-gdot{width:6px;height:6px;border-radius:50%;background:var(--grp-clr);box-shadow:0 0 10px var(--grp-clr);flex-shrink:0} .cat-dd-gline{display:none} .cat-dd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px;width:100%;box-sizing:border-box} .cat-dd-item{ display:flex;align-items:center;justify-content:space-between;gap:.4rem; width:100%;min-height:48px; padding:.58rem .7rem;border-radius:12px;border:1px solid rgba(255,255,255,0.05); background:rgba(255,255,255,0.03); color:var(--text);font-size:.88rem;font-weight:500;line-height:1.2; cursor:pointer;text-align:left;position:relative;overflow:hidden; -webkit-tap-highlight-color:transparent; transition:background .15s,color .2s,border-color .2s; } body.light-theme .cat-dd-item{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.06)} .cat-dd-item::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--grp-clr,var(--sea));opacity:0; transition:opacity .2s; } .cat-dd-item::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),color-mix(in srgb,var(--grp-clr,var(--sea)) 45%,transparent) 0%,transparent 40%); opacity:0;transition:opacity .5s ease; } .cat-dd-item:hover{background:rgba(255,255,255,0.04)} .cat-dd-item:hover::before{opacity:.5} .cat-dd-item:active::after{opacity:1;transition:opacity .05s} .cat-dd-item:active{background:rgba(255,255,255,0.08)} .cat-dd-item.is-active{ background:color-mix(in srgb,var(--grp-clr) 14%,transparent); color:var(--grp-clr); } .cat-dd-item.is-active::before{opacity:1} body.light-theme .cat-dd-item:hover{background:rgba(0,0,0,0.04)} body.light-theme .cat-dd-item:active{background:rgba(0,0,0,0.06)} .cat-dd-ico{display:none} .cat-dd-name{ flex:1; overflow:hidden; text-align:left; white-space:normal; word-break:normal; overflow-wrap:normal; hyphens:none; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .cat-dd-item::after.cat-dd-chev,.cat-dd-chev{ color:var(--text3);font-size:1.05rem;opacity:.4;margin-left:.1rem;line-height:1;flex-shrink:0; } .cat-dd-item.is-active .cat-dd-chev{color:var(--grp-clr);opacity:.7} .cat-dd-cnt{ display:inline-block;flex-shrink:0; font-size:.78rem;font-weight:500;color:var(--text3); padding:0;background:transparent;opacity:.6; line-height:1.2;text-align:right;min-width:auto; } .cat-dd-item.is-active .cat-dd-cnt{color:var(--grp-clr);opacity:.85} body.light-theme .cat-dd-overlay{background:rgba(245,245,245,0.82);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2)} body.light-theme .cat-dd-panel{ background:transparent; } body.light-theme .cat-dd-head{background:transparent} body.light-theme .cat-dd-close{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:#222} body.light-theme .cat-dd-close:hover{background:rgba(0,0,0,0.08)} body.light-theme .cat-dd-item{ background:linear-gradient(160deg,rgba(0,0,0,0.035),rgba(0,0,0,0.015)); border:1px solid rgba(0,0,0,0.08);color:#1a1a1a; } body.light-theme .cat-dd-item:hover{background:linear-gradient(160deg,rgba(0,0,0,0.06),rgba(0,0,0,0.025))} body.light-theme .cat-dd-cnt{background:rgba(0,0,0,0.06);color:#555} body.light-theme .cat-dd-arrow{background:rgba(0,0,0,0.06);color:#444} /* Category pills */ .cat-pills{ display:flex;gap:.4rem;padding:.5rem 0 .7rem; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none; overscroll-behavior-x:contain;touch-action:pan-x; position:sticky;top:-1px;z-index:10; background:linear-gradient(180deg,rgba(14,14,14,0.72) 0%,rgba(14,14,14,0.5) 70%,rgba(14,14,14,0) 100%); backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%); margin:0 -1rem;padding-left:1rem;padding-right:1rem; max-width:none;flex-wrap:nowrap; } #scrExplore{overflow-x:hidden!important;will-change:scroll-position} #geoStickyBar{position:fixed;bottom:calc(var(--bottom-h) + var(--safe-b) + 12px);left:50%;transform:translateX(-50%);z-index:90;padding:0;pointer-events:none;display:none} #geoStickyBar>*{pointer-events:auto} #geoStickyBar:empty{display:none} #geoStickyBar.visible{display:block} #exploreContent{max-width:100%;overflow-x:hidden;margin-left:auto;margin-right:auto;background:transparent;border-radius:var(--r) var(--r) 0 0;padding:.6rem;margin-top:.3rem} #scrExplore.has-geo #exploreContent{padding-bottom:70px} .cat-pills::-webkit-scrollbar{display:none} .pill{ flex-shrink:0;display:flex;align-items:center;gap:.3rem; padding:.45rem .85rem;border-radius:50px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.06); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); color:var(--text2);font-size:.75rem;font-weight:600; cursor:pointer;transition:all .25s;white-space:nowrap; -webkit-tap-highlight-color:transparent;font-family:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.18); scroll-snap-align:center; } .pill .pi{font-size:1rem} .pill.active{ background:rgba(48,213,200,0.28); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%); color:#fff;border-color:rgba(48,213,200,0.55); box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 14px rgba(48,213,200,0.25); } .pill:active:not(.active){transform:scale(0.95)} /* Place list */ .place-list{display:flex;flex-direction:column;gap:.7rem;max-width:100%;overflow-x:hidden} .place-card{ background:var(--card-grad); /* Soft glass border (2026-05-22). Was var(--card-bdr) 0.18 + --card-bdr-top 0.3 — too bright/white on sections without a category-tinted override (Hotels, Nearby, Restaurants…). Category overrides below use border-color and still win, so tinted sections are unchanged; light theme sets its own border-color via body.light-theme .place-card. */ border:1px solid rgba(255,255,255,0.08); border-top:1px solid rgba(255,255,255,0.10); border-bottom:1px solid var(--card-bdr-soft); border-radius:var(--r);padding:1rem 1.1rem; transition:border-color .2s,box-shadow .2s,transform .15s; position:relative;overflow:hidden; box-shadow: inset 0 1px 2px rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.12); } /* 2026-05-13: removed `animation:cardIn .4s` + 6 staggered nth-child delays. Every renderCatContent re-fired this fade-in/translate animation on every card → users perceived it as "cards re-loading / flickering" on filter, sort, geo, stars updates and navigation. Cards now paint instantly. */ .place-card::after{ content:'';position:absolute;top:0;left:0;right:0;height:45%; background:linear-gradient(180deg,rgba(255,255,255,0.08),transparent 50%,transparent); pointer-events:none;border-radius:var(--r) var(--r) 0 0; } .place-card::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--sea),var(--sky)); border-radius:3px;transform:scaleY(0);transition:transform .3s;transform-origin:top; } .place-card:hover::before,.place-card:active::before{transform:scaleY(1)} .pc-name{font-weight:700;font-size:1rem;margin-bottom:.3rem;color:var(--text);padding-right:4.5rem;line-height:1.3} /* Optional cover photo (2026-05-31): compact thumbnail banner at the top of a card. Only rendered when the place/ad/event actually has a photo (see cardCoverHTML) — cards without a photo are byte-for-byte unchanged. The fixed aspect-ratio reserves space so the layout never jumps; on webviews without aspect-ratio support the box collapses and the card simply shows no cover (graceful, never broken). The hides itself on error. */ .pc-cover{position:relative;margin:0 0 .65rem;border-radius:13px;overflow:hidden;aspect-ratio:5/2;background:rgba(255,255,255,0.05);cursor:pointer;-webkit-tap-highlight-color:transparent} .pc-cover img{width:100%;height:100%;object-fit:cover;display:block} /* Card description (2026-05-21): clamp to 3 lines so a long text never stretches the card. Tapping the text toggles .pc-desc-open to reveal it in full inline (place cards have no separate detail screen). Visual-only — the real desc in DATA is untouched, AI/search still use the full text. */ .pc-desc{font-size:.78rem;color:var(--text-on-card);line-height:1.6;margin-bottom:.5rem;font-weight:400;-webkit-font-smoothing:antialiased;letter-spacing:.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;cursor:pointer} .pc-desc.pc-desc-open{display:block;-webkit-line-clamp:unset;overflow:visible} /* "Подробнее / Свернуть" hint — injected only under descriptions that actually overflow. Small accent-coloured link, not a heavy button. */ .pc-more{display:inline-block;font-size:.72rem;font-weight:700;color:var(--sea);margin:-.15rem 0 .55rem;cursor:pointer;letter-spacing:.01em;-webkit-tap-highlight-color:transparent} .pc-more:active{opacity:.55} /* ─── Guide Batumi admin trust badge ─────────────────────────────────────── Admin-only chip rendered by renderGuideBadge() on its own row right under the card title. Premium glass pill, theme-aware. Variants: recommended / verified / choice. Wrapper .gb-row gives it a separate line without touching .pc-name layout (heart, hours badge, padding-right). */ .gb-row{ display:flex;flex-wrap:wrap;align-items:center; margin:.1rem 0 .35rem; padding-right:3rem; /* clear absolute heart button */ } .guide-badge{ display:inline-flex;align-items:center;gap:6px; width:auto;max-width:max-content;min-height:24px; padding:4px 11px; border-radius:999px; font-size:.74rem;font-weight:800;line-height:1.1; letter-spacing:.01em; white-space:nowrap;overflow:visible; color:#ffe8a3; background:rgba(255,190,80,.12); border:1px solid rgba(255,190,80,.45); box-shadow:0 4px 14px rgba(0,0,0,.18); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); user-select:none; } .guide-badge .gb-txt{display:inline-block;line-height:1.1} .guide-badge.gb-recommended{ color:#a7f0e0; background:linear-gradient(135deg,rgba(54,215,183,.20),rgba(54,215,183,.08)); border-color:rgba(54,215,183,.55); box-shadow:0 4px 14px rgba(54,215,183,.18); } .guide-badge.gb-verified{ color:#bbe0ff; background:linear-gradient(135deg,rgba(69,174,245,.20),rgba(69,174,245,.08)); border-color:rgba(69,174,245,.55); box-shadow:0 4px 14px rgba(69,174,245,.18); } .guide-badge.gb-choice{ color:#ffd99a; background:linear-gradient(135deg,rgba(245,166,35,.28),rgba(245,166,35,.10)); border-color:rgba(245,166,35,.65); box-shadow:0 4px 16px rgba(245,166,35,.22); } body.light-theme .guide-badge{color:#5a3a00;border-color:rgba(140,90,0,.30);background:rgba(245,166,35,.16)} body.light-theme .guide-badge.gb-recommended{color:#066456;background:rgba(54,215,183,.18);border-color:rgba(54,215,183,.55)} body.light-theme .guide-badge.gb-verified{color:#0a4d80;background:rgba(69,174,245,.18);border-color:rgba(69,174,245,.55)} body.light-theme .guide-badge.gb-choice{color:#6e3b00;background:rgba(245,166,35,.24);border-color:rgba(245,166,35,.60)} /* iPhone-narrow safety — never overflow the card */ @media (max-width:380px){ .guide-badge{font-size:.7rem;padding:4px 9px} } /* Detail screen — full label on its own line + optional admin note. */ .gb-detail{ display:flex;flex-direction:column;gap:6px; margin:.65rem 0 .65rem; padding:.65rem .8rem; border-radius:12px; background:rgba(245,166,35,.07); border:1px solid rgba(245,166,35,.30); } .gb-detail .gb-row{margin:0;padding:0} .gb-detail .guide-badge{align-self:flex-start;font-size:.78rem;padding:5px 12px;min-height:26px} .gb-detail .gb-note{font-size:.78rem;color:var(--text-on-card);line-height:1.45;opacity:.95} body.light-theme .gb-detail{background:rgba(245,166,35,.10);border-color:rgba(245,166,35,.40)} body.light-theme .gb-detail .gb-note{color:#333} .pc-meta{ display:flex;justify-content:space-between;align-items:center;gap:.5rem; flex-wrap:wrap; margin-top:.6rem;padding-top:.55rem; border-top:1px solid rgba(255,255,255,.05); } .pc-meta-l,.pc-meta-r{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;min-width:0} .pc-meta-r{justify-content:flex-end;margin-left:auto} .pc-meta-l:empty,.pc-meta-r:empty{display:none} /* Unified action pill base */ .pc-stars,.pc-photos,.pc-reviews,.pc-map,.pc-price,.pc-dist{ display:inline-flex;align-items:center;gap:.25rem; height:28px;padding:0 .55rem; border-radius:999px; font-size:.7rem;font-weight:600; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.6); transition:transform .15s ease,background .2s,border-color .2s,box-shadow .2s; -webkit-tap-highlight-color:transparent; white-space:nowrap;line-height:1; } /* Icon-only pills (no text) — square aspect */ .pc-photos:not(.pc-suggest-photo), .pc-reviews:not(.has-rev){padding:0 .5rem} .pc-stars,.pc-photos,.pc-reviews,.pc-map{cursor:pointer;user-select:none} .pc-stars:active,.pc-photos:active,.pc-reviews:active,.pc-map:active{transform:scale(.94)} /* Price (right group) */ .pc-price{color:var(--sand);background:rgba(255,209,102,.1);border-color:rgba(255,209,102,.2)} /* Distance (right group) — green when geo-derived (user enabled location) */ .pc-dist{color:#4ade80;background:rgba(74,222,128,0.08);border-color:rgba(74,222,128,0.20);font-size:.68rem;padding:0 .55rem;font-weight:700} /* Stars — warm amber when active */ .pc-stars .star-icon{font-size:.88rem;opacity:.45;filter:grayscale(.8);transition:all .2s} .pc-stars.has-stars{color:rgba(245,166,35,.85);background:rgba(245,166,35,.07);border-color:rgba(245,166,35,.18)} .pc-stars.has-stars .star-icon{opacity:.95;filter:none} .pc-stars.starred{ color:#F5A623; background:linear-gradient(135deg,rgba(245,166,35,.2),rgba(245,166,35,.08)); border-color:rgba(245,166,35,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 14px rgba(245,166,35,.2); } .pc-stars.starred .star-icon{opacity:1;filter:drop-shadow(0 0 4px rgba(245,166,35,.55))} .pc-stars .star-count{font-variant-numeric:tabular-nums;font-size:.72rem} /* Photos count — bright sky (has photos) */ .pc-photos{color:var(--sky);background:rgba(69,174,245,.08);border-color:rgba(69,174,245,.22)} .pc-photos:active{background:rgba(69,174,245,.18)} /* +Photo (suggest) — muted grey CTA */ .pc-suggest-photo{color:rgba(255,255,255,.55)!important;background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.07)!important} .pc-suggest-photo:active{background:rgba(255,255,255,.08)!important} /* Reviews — neutral by default, sand when has reviews */ .pc-reviews b{font-weight:800} /* Map pin icon — monochrome via currentColor, bigger than label text */ .pc-map-ico{ width:1.15rem;height:1.15rem;flex-shrink:0; stroke:currentColor;display:inline-block;vertical-align:middle; } .pc-map{gap:.32rem} /* Map — neutral pill; bg + icon + text all follow user-selected theme */ .pc-map{ color:var(--text);text-decoration:none;font-weight:700; background:linear-gradient(135deg, color-mix(in srgb, var(--bg3,#232328) 88%, transparent), color-mix(in srgb, var(--bg2,#1c1c20) 82%, transparent)); border-color:var(--wet-border,rgba(255,255,255,.14)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.18); } .pc-map:active{ background:linear-gradient(135deg, color-mix(in srgb, var(--bg3,#232328) 96%, transparent), color-mix(in srgb, var(--bg2,#1c1c20) 92%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 10px rgba(0,0,0,.24); } .pc-ig{color:rgba(255,255,255,.92)!important}.pc-ig .pc-map-ico{stroke-width:2!important} .pc-phone{color:#4ade80!important;border-color:rgba(74,222,128,.35)!important;background:rgba(74,222,128,.08)!important} .suggest-toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(20,20,20,.95);color:#fff;padding:.6rem 1.2rem;border-radius:12px;font-size:.8rem;font-weight:600;z-index:10000;opacity:0;transition:all .3s ease;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--sea);pointer-events:none} .suggest-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .suggest-toast.error{border-color:var(--coral);color:var(--coral)} .photo-lb{position:fixed;inset:0;z-index:10000;background:radial-gradient(ellipse at 50% 40%,rgba(22,22,28,.72) 0%,rgba(0,0,0,.82) 80%);backdrop-filter:blur(28px) saturate(1.3);-webkit-backdrop-filter:blur(28px) saturate(1.3);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent;padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)} .photo-lb.show{opacity:1;pointer-events:auto} .photo-lb.show .photo-lb-img{animation:pzFadeIn .35s cubic-bezier(.2,.8,.2,1)} .photo-lb.show .photo-lb-counter,.photo-lb.show .photo-lb-strip,.photo-lb.show .photo-lb-back{animation:pzRiseIn .4s cubic-bezier(.2,.8,.2,1) both} .photo-lb.show .photo-lb-strip{animation-delay:.05s} .photo-lb.show .photo-lb-back{animation-delay:.1s} @keyframes pzFadeIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}} @keyframes pzRiseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .photo-lb-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:all .2s;box-shadow:0 4px 16px rgba(0,0,0,.3)} .photo-lb-close:active{transform:scale(.88);background:rgba(255,255,255,.22)} .photo-lb-img{max-width:94vw;max-height:66vh;border-radius:18px;object-fit:contain;user-select:none;-webkit-user-drag:none;transition:opacity .2s;touch-action:none;transform-origin:center center;will-change:transform;box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06)} .photo-lb-counter{color:rgba(255,255,255,.92);font-size:.72rem;margin-top:1.05rem;font-weight:700;padding:.38rem .9rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:100px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);letter-spacing:.08em;font-variant-numeric:tabular-nums} .photo-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:.75;box-shadow:0 4px 18px rgba(0,0,0,.35)} .photo-lb-nav:hover{opacity:1} .photo-lb-nav:active{transform:translateY(-50%) scale(.86);background:rgba(255,255,255,.2);opacity:1} .photo-lb-prev{left:10px} .photo-lb-next{right:10px} .photo-lb-strip{display:flex;gap:8px;margin-top:1rem;overflow-x:auto;max-width:94vw;padding:6px 10px;scrollbar-width:none;scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)} .photo-lb-strip::-webkit-scrollbar{display:none} .photo-lb-thumb{width:56px;height:56px;border-radius:12px;object-fit:cover;cursor:pointer;opacity:.35;border:2px solid transparent;transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;scroll-snap-align:center} .photo-lb-thumb:active{transform:scale(.92)} .photo-lb-thumb.active{opacity:1;border-color:var(--sea);box-shadow:0 0 0 3px rgba(48,213,200,.22),0 8px 20px rgba(48,213,200,.32);transform:scale(1.1)} .photo-lb-back{margin-top:1rem;padding:.7rem 2.2rem;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:rgba(255,255,255,.88);font-size:.82rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;-webkit-tap-highlight-color:transparent;letter-spacing:.03em} .photo-lb-back:active{background:rgba(255,255,255,.2);transform:scale(.96)} .photo-lb-hint{position:absolute;top:calc(env(safe-area-inset-top,0px) + 22px);left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:.7rem;font-weight:600;padding:.38rem .85rem;border-radius:100px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;gap:6px;pointer-events:none;letter-spacing:.02em;white-space:nowrap;opacity:0} .photo-lb-hint.show{animation:pzHint 2.8s ease forwards} @keyframes pzHint{0%{opacity:0;transform:translateX(-50%) translateY(-6px)}15%{opacity:1;transform:translateX(-50%) translateY(0)}75%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-4px)}} /* 2026-05-14: website / "official site" link — plain text, no coloured plate. The 🌐 globe already lives inside the T.officialSite translation strings, so NO ::before icon here — adding one would show two globes. */ .pc-link{ display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem; padding:.2rem 0;font-size:.8rem;font-weight:700; color:var(--sea);text-decoration:none; background:none;border:none;box-shadow:none;transition:opacity .2s,transform .15s; } .pc-link:active{transform:scale(0.96);opacity:.6;box-shadow:none} /* === TRANSPORT === */ .t-hero{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:var(--r2);padding:1.4rem 1rem 1rem;margin-bottom:.8rem;text-align:center; box-shadow:0 2px 16px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.12); position:relative;overflow:hidden; } .t-hero::before{ content:'';position:absolute;top:0;left:5%;right:5%;height:40%; background:linear-gradient(180deg,rgba(255,255,255,0.08),transparent); border-radius:var(--r2) var(--r2) 50% 50%;pointer-events:none; } .t-hero-icon{font-size:2.4rem;margin-bottom:.3rem} .t-hero-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.25rem;color:var(--sea)} .t-hero-sub{font-size:.78rem;color:var(--text3);margin-top:.25rem;margin-bottom:1rem} #transportMap{width:100%;aspect-ratio:1/1;height:auto;min-height:320px;max-height:min(58vh,540px);border-radius:18px;z-index:1;touch-action:none;margin-bottom:.6rem;overflow:hidden;border:1px solid var(--border);box-shadow:0 10px 28px rgba(0,0,0,.2)} @media(max-width:380px){#transportMap{min-height:300px}} @media(min-width:760px){#transportMap{aspect-ratio:4/3;max-height:560px}} .bus-live-marker{ width:38px;height:38px;display:flex;align-items:center;justify-content:center; background:transparent;border:0;box-shadow:none;position:relative;transform:translateZ(0); } .bus-live-marker img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(0,0,0,.34));transform:rotate(var(--dolphin-rot,0deg));transform-origin:50% 54%;transition:transform .7s ease} .bus-live-marker:after{content:'';position:absolute;left:50%;bottom:0;width:16px;height:5px;border-radius:50%;background:rgba(31,143,255,.22);transform:translateX(-50%);filter:blur(1px)} .bus-live-marker.offline{opacity:.58;filter:grayscale(.9)} @keyframes busLivePulse{0%{transform:scale(.72);opacity:.9}100%{transform:scale(1.45);opacity:0}} .t-live-hint{margin:0 0 10px;padding:10px 12px;border-radius:14px;background:linear-gradient(135deg,rgba(54,215,183,.12),rgba(31,143,255,.06));border:1px solid rgba(54,215,183,.18);display:flex;align-items:center;gap:10px;color:var(--text2)} .t-live-hint-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(54,215,183,.12);flex-shrink:0} .t-live-hint-icon svg{width:20px;height:20px} .t-live-hint-title{font-size:.76rem;font-weight:800;color:var(--sea)} .t-live-hint-sub{font-size:.64rem;color:var(--text3);line-height:1.25;margin-top:2px} .t-live-panel{margin:8px 0 10px;padding:10px 11px;border-radius:14px;background:rgba(54,215,183,.08);border:1px solid rgba(54,215,183,.2);display:flex;align-items:center;justify-content:space-between;gap:10px} .t-live-panel-main{min-width:0} .t-live-panel-title{font-size:.74rem;font-weight:800;color:var(--sea);display:flex;align-items:center;gap:6px} .t-live-panel-title svg{width:17px;height:17px;flex-shrink:0} .t-live-panel-sub{font-size:.62rem;color:var(--text3);margin-top:2px} .t-live-panel-actions{display:flex;align-items:center;gap:6px;flex-shrink:0} .t-live-panel-btn{width:34px;height:34px;flex-shrink:0;border:1px solid rgba(54,215,183,.24);background:rgba(54,215,183,.1);color:var(--sea);border-radius:10px;padding:0;font-size:.82rem;font-weight:800;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center} .t-live-panel-btn.primary{background:linear-gradient(135deg,rgba(54,215,183,.2),rgba(31,143,255,.12));border-color:rgba(54,215,183,.36)} .t-live-panel-btn:active{transform:scale(.96)} .t-route-map-head{margin:0 0 8px;padding:9px 10px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px} .t-route-map-back{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:var(--text);font-size:1.15rem;font-family:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0} .t-route-map-add{width:34px;height:34px;border-radius:10px;border:1px solid rgba(54,215,183,.36);background:rgba(54,215,183,.12);color:var(--sea);font-size:1.05rem;font-weight:900;font-family:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0} .t-route-map-add:active,.t-route-map-back:active{transform:scale(.96)} .t-route-map-title{min-width:0;flex:1} .t-route-map-name{font-size:.8rem;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .t-route-map-meta{font-size:.62rem;color:var(--text3);margin-top:1px} .t-route-map-shell{position:relative;margin-bottom:.6rem} .t-route-map-locate{ position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:3; width:42px;height:42px;border-radius:14px; border:1px solid rgba(255,76,76,.45); background:transparent; color:#ff4c4c;font-family:inherit;font-size:0; display:flex;align-items:center;justify-content:center; cursor:pointer;flex-shrink:0; box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none; } .t-route-map-locate svg{width:19px;height:19px;display:block} .t-route-map-locate:active{transform:translateY(-50%) scale(.96)} .t-route-map-locate.is-hidden{display:none} @media(max-width:420px){ .t-route-map-locate{right:10px} } .t-route-grid-wrap{margin:0 0 12px} .t-route-grid-title{font-size:.74rem;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin:3px 2px 8px} .t-route-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} .t-route-grid .t-num-badge{width:100%;height:54px;min-width:0;background:rgba(255,255,255,.03)!important;color:var(--route-color,#36D7B7)!important;border:2px solid var(--route-color,#36D7B7);box-shadow:0 4px 12px rgba(0,0,0,.12);font-size:1rem;border-radius:999px} .t-route-grid .t-num-badge.is-active{background:var(--route-color,#36D7B7)!important;color:#fff!important;box-shadow:0 8px 22px rgba(54,215,183,.24)} @media(max-width:380px){.t-route-grid{gap:8px}.t-route-grid .t-num-badge{height:50px;border-radius:999px;font-size:.92rem}} .t-route-picker{position:fixed;inset:0;z-index:12000;background:rgba(0,0,0,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:none;align-items:flex-end;justify-content:center;padding:12px} .t-route-picker.show{display:flex} .t-route-picker-sheet{width:100%;max-width:540px;max-height:72vh;overflow:auto;border-radius:18px;background:linear-gradient(160deg,var(--bg2),var(--bg3));border:1px solid rgba(255,255,255,.1);box-shadow:0 -18px 50px rgba(0,0,0,.34);padding:14px} .t-route-picker-head{display:flex;align-items:center;gap:10px;margin-bottom:12px} .t-route-picker-title{flex:1;min-width:0;font-size:.9rem;font-weight:900;color:var(--text)} .t-route-picker-sub{font-size:.68rem;color:var(--text3);margin-top:2px} .t-route-picker-close{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:var(--text);font-size:1rem;font-family:inherit;cursor:pointer} .t-route-picker-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} .t-route-picker-grid .t-num-badge{width:100%;height:54px;min-width:0;background:rgba(255,255,255,.04)!important;color:var(--route-color,#36D7B7)!important;border:2px solid var(--route-color,#36D7B7);font-size:1rem;border-radius:999px} .t-route-picker-grid .t-num-badge.is-active{background:var(--route-color,#36D7B7)!important;color:#fff!important;box-shadow:0 8px 22px rgba(54,215,183,.24)} /* ============ IN-APP MAP OVERLAY ============ */ .map-overlay{ position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000; background:var(--bg,#000);display:flex;flex-direction:column; /* Smooth open/close: fade the whole sheet instead of an instant display flip. Kept laid-out (display:flex) but visually hidden + non-interactive so the Leaflet container already has real dimensions the moment it opens (cleaner invalidateSize, no first-frame jump). */ opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s; } .map-overlay.show{opacity:1;visibility:visible;pointer-events:auto} /* Push Leaflet's top-right zoom control below the floating header + notch so it is never hidden behind it. */ #placeMapWrapper .leaflet-top.leaflet-right{margin-top:calc(58px + max(env(safe-area-inset-top,0px),var(--tg-safe-top,0px),var(--viewport-safe-top,0px)))} .map-overlay-header{ display:flex;align-items:center;gap:.5rem; padding:calc(10px + max(env(safe-area-inset-top,0px),var(--tg-safe-top,0px),var(--viewport-safe-top,0px))) 14px 10px; background:linear-gradient(180deg, color-mix(in srgb,var(--bg,#0e0e0e) 96%,transparent), color-mix(in srgb,var(--bg,#0e0e0e) 88%,transparent)); backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-bottom:1px solid var(--border,rgba(255,255,255,0.08)); flex-shrink:0;z-index:1100;position:absolute;top:0;left:0;right:0; box-shadow:0 4px 20px rgba(0,0,0,0.5); } .map-overlay-close{ width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);font-size:1rem;font-weight:600; display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s; } .map-overlay-close:active{background:rgba(255,255,255,0.15);transform:scale(0.9)} .map-overlay-title{ flex:1;font-weight:700;font-size:.85rem;color:var(--text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; padding:0 2px;letter-spacing:0.01em; } .map-overlay-orig{font-size:.7rem;color:var(--text3,#8b9098);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 2px 0;font-weight:500;letter-spacing:.01em} .map-overlay-nav{ padding:7px 12px;border-radius:10px;border:1.5px solid rgba(245,166,35,0.3); background:rgba(245,166,35,0.1);color:var(--sand); font-size:.72rem;font-weight:700;cursor:pointer;flex-shrink:0;font-family:inherit; display:flex;align-items:center;gap:4px;transition:all .2s; } .map-overlay-nav:active{transform:scale(.95);background:rgba(245,166,35,0.18)} #placeMapWrapper{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden} #placeMapContainer{position:absolute;inset:-50%;width:200%;height:200%;transform-origin:center center;will-change:transform} #placeMapContainer.night-map .leaflet-tile-pane{filter:brightness(0.82) contrast(1.05) saturate(0.85)} .map-overlay-info{ position:absolute;bottom:0;left:0;right:0;z-index:1000; padding:14px 14px calc(14px + max(env(safe-area-inset-bottom,0px),var(--tg-safe-bottom,0px))); pointer-events:none; } /* Bottom-sheet entrance plays ONCE per open. Bound to the persistent .map-overlay-info wrapper (not the inner .map-overlay-card, which gets its innerHTML rebuilt on every live-nav tick) so it never re-flickers while the route/distance updates. */ @keyframes mapInfoRise{from{transform:translateY(26px);opacity:0}to{transform:translateY(0);opacity:1}} .map-overlay.show .map-overlay-info{animation:mapInfoRise .42s cubic-bezier(.2,.8,.2,1) both} .map-overlay-card{ position:relative; background:linear-gradient(160deg, color-mix(in srgb,var(--bg3,#232328) 97%,transparent), color-mix(in srgb,var(--bg2,#1c1c20) 97%,transparent), color-mix(in srgb,var(--bg,#161619) 96%,transparent)); backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px);border:1px solid var(--card-bdr,rgba(255,255,255,0.1)); border-radius:24px;padding:26px 20px 18px;pointer-events:auto; max-height:78vh;overflow-y:auto;-webkit-overflow-scrolling:touch; box-shadow:0 -8px 48px rgba(0,0,0,0.6),0 -2px 14px rgba(0,0,0,0.28),inset 0 1px 0 rgba(255,255,255,0.1); } /* Bottom-sheet grabber handle — signals the card is a draggable-feeling sheet. */ .map-overlay-card::before{ content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%); width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,0.2);pointer-events:none; } .map-overlay-card-name{font-weight:700;font-size:1.05rem;color:var(--text);margin-bottom:8px;letter-spacing:0.01em} .map-overlay-card-dist{font-size:.78rem;color:var(--sea);font-weight:600} .map-overlay-card-hint{font-size:.72rem;color:var(--text3);margin-top:6px;line-height:1.4} .map-overlay-walk{ display:flex;align-items:center;gap:6px;margin-top:8px; padding:8px 12px;border-radius:12px; background:rgba(54,215,183,0.1);border:1px solid rgba(54,215,183,0.15); } .map-overlay-walk-icon{font-size:1.1rem} .map-overlay-walk-text{font-size:.78rem;color:var(--sea);font-weight:600} .route-mode-btn{ flex:1;display:flex;align-items:center;gap:6px; padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05);color:var(--text2); font-size:.8rem;font-weight:600;font-family:inherit;cursor:pointer; transition:all .2s ease; } .route-mode-btn.active{ background:rgba(54,215,183,0.15);border-color:var(--sea);color:var(--sea); } .route-mode-btn[data-mode="car"].active{ background:rgba(69,174,245,0.15);border-color:var(--sky);color:var(--sky); } .route-mode-btn:active{transform:scale(.95)} .route-mode-time{margin-left:auto;font-size:.72rem;opacity:.8} .map-pulse-marker{ width:14px;height:14px;background:var(--sea);border:3px solid #fff; border-radius:50%;box-shadow:0 0 12px rgba(54,215,183,0.5),0 2px 6px rgba(0,0,0,0.3); } .map-dest-marker{ position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.55)) drop-shadow(0 0 2px rgba(0,0,0,0.4)); } .map-dest-marker::before{ content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-30%); width:46px;height:46px;border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle,rgba(255,59,92,0.55) 0%,rgba(255,59,92,0.15) 45%,rgba(255,59,92,0) 70%); animation:destPulse 1.8s ease-out infinite; } .map-dest-marker .addr-pin{ width:40px;height:40px;position:relative;z-index:2;overflow:visible; margin:0;vertical-align:baseline; } .map-dest-marker .addr-pin path{fill:#FF3B5C;stroke:#fff;stroke-width:2.2;stroke-linejoin:round;paint-order:stroke fill} .map-dest-marker .addr-pin circle{fill:#fff;stroke:none} @keyframes destPulse{0%{transform:translate(-50%,-30%) scale(0.55);opacity:.9}70%{opacity:.15}100%{transform:translate(-50%,-30%) scale(1.7);opacity:0}} .map-user-pulse{ width:18px;height:18px;background:rgba(69,174,245,0.3);border:3px solid var(--sky); border-radius:50%;box-shadow:0 0 16px rgba(69,174,245,0.4); animation:userPulse 2s ease-in-out infinite; } @keyframes userPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}} .map-go-btn{ width:100%;padding:14px;border:none;border-radius:14px; background:linear-gradient(135deg,#F5A623 0%,#D99520 50%,#C08518 100%);color:#111; font-size:.85rem;font-weight:700;font-family:inherit;cursor:pointer; display:flex;align-items:center;justify-content:center;gap:6px; box-shadow:0 4px 24px rgba(245,166,35,0.25),inset 0 1px 0 rgba(255,255,255,0.3); transition:all .2s;letter-spacing:0.02em; } .map-go-btn:active{transform:scale(.97);box-shadow:0 2px 10px rgba(245,166,35,0.2)} .map-go-btn.active{background:linear-gradient(135deg,#FF6B8A,#E05575);box-shadow:0 4px 16px rgba(255,107,138,0.3)} /* Route chips row */ /* Search section */ .t-search-section{margin-bottom:.6rem} .t-search-row{display:flex;gap:8px;margin-bottom:6px;position:relative} .t-search-input{ flex:1;padding:10px 14px;border-radius:14px; border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06); color:var(--text);font-size:.85rem;font-family:inherit;outline:none;transition:border .2s; } .t-search-input::placeholder{color:var(--text3)} .t-search-input:focus{border-color:var(--sea)} .t-search-clear{ position:absolute;right:56px;top:50%;transform:translateY(-50%); width:28px;height:28px;border-radius:50%;border:none; background:rgba(255,255,255,0.12);color:var(--text2);font-size:.8rem; display:none;align-items:center;justify-content:center;cursor:pointer; font-family:inherit;line-height:1; } .t-search-clear.show{display:flex} .t-geo-btn{ width:42px;height:42px;border-radius:14px;flex-shrink:0; border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06); color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s; } .t-geo-btn.active{background:var(--sea);color:#fff;border-color:var(--sea)} /* Quick buttons */ .t-quick-scroll{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .t-quick-scroll::-webkit-scrollbar{display:none} .t-quick-btn{ padding:5px 12px;border-radius:20px;font-size:.72rem;font-weight:600; white-space:nowrap;border:1px solid rgba(0,229,184,0.18); background:rgba(0,229,184,0.06);color:var(--sea);cursor:pointer; transition:all .2s;flex-shrink:0;font-family:inherit; } .t-quick-btn:active{background:var(--sea);color:#fff;transform:scale(.95)} /* Results */ .t-result{ padding:1rem 1.1rem;border-radius:var(--r); background:var(--wet); border:1px solid var(--wet-border);border-top:1px solid rgba(255,255,255,0.08); margin-bottom:.7rem;cursor:pointer;transition:all .2s; box-shadow:0 6px 24px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.06); position:relative;overflow:hidden; } .t-result::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--sea),var(--coral)); border-radius:3px;transform:scaleY(0);transition:transform .3s;transform-origin:top; } .t-result:active::before{transform:scaleY(1)} .t-result:active{border-color:rgba(0,229,184,0.15)} .t-result-name{font-weight:700;font-size:.88rem} .t-result-sub{font-size:.73rem;color:var(--text3);margin-top:3px} /* Route cards */ .t-route-card{ padding:1rem 1.1rem;border-radius:var(--r); background:var(--wet); border:1px solid var(--wet-border);border-top:1px solid rgba(255,255,255,0.08); box-shadow:0 6px 24px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.06); position:relative;overflow:hidden; } .t-route-card::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--sea),var(--coral)); border-radius:3px;transform:scaleY(1);transform-origin:top; } .t-route-card::after{ content:'';position:absolute;top:0;left:0;right:0;height:45%; background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03) 50%,transparent); pointer-events:none;border-radius:var(--r) var(--r) 0 0; } .t-route-card.t-success{border-color:rgba(0,229,184,0.15);background:rgba(0,229,184,0.06)} .t-route-card.t-success::before{background:var(--sea)} .t-step{font-weight:600;font-size:.84rem;margin:3px 0} .t-step-detail{font-size:.78rem;color:var(--text2);margin:2px 0} .t-step-arrow{text-align:center;color:var(--text3);font-size:.7rem;margin:1px 0;opacity:.5} .t-bus-chip{ display:inline-flex;align-items:center;justify-content:center; padding:2px 8px;border-radius:7px;color:#111;font-size:.75rem; font-weight:700;background:#d4a017;min-width:32px;text-align:center; } .t-bus-chips{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0} .t-bus-eta{display:inline-flex;align-items:center;gap:3px;margin-left:4px;padding:2px 7px;border-radius:6px;font-size:.68rem;font-weight:700;background:rgba(251,191,36,0.12);color:#FBBF24;vertical-align:middle;white-space:nowrap} .t-bus-eta.night{background:rgba(100,210,255,0.12);color:#64d2ff} .t-no-route{color:#e74c3c;font-weight:600;margin-bottom:6px;font-size:.84rem} .t-geo-tip{font-size:.73rem;color:var(--sea);margin-top:6px;font-style:italic} /* From indicator */ .t-from{ font-size:.78rem;color:var(--sea);margin-bottom:8px;padding:7px 10px; background:rgba(0,229,184,0.06);border-radius:10px;border:1px solid rgba(0,229,184,0.12); cursor:pointer;transition:all .2s ease; } .t-from:active{transform:scale(.97);background:rgba(0,229,184,0.12)} .t-from-label{font-weight:600} .t-dist{color:var(--text3);font-size:.72rem} /* Arrival Board (schedule-honest) */ .arrival-board{ margin:8px 0 12px;border-radius:14px;overflow:hidden; background:linear-gradient(135deg,#151515 0%,#1a1a1a 50%,#151515 100%); border:1px solid rgba(251,191,36,0.12); box-shadow:0 4px 24px rgba(0,0,0,0.3),inset 0 1px 0 rgba(251,191,36,0.06); } .arrival-board-header{ display:flex;align-items:center;justify-content:space-between; padding:10px 14px 6px;border-bottom:1px solid rgba(251,191,36,0.1); } .arrival-board-title{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.82rem; color:#FBBF24;letter-spacing:.02em;display:flex;align-items:center;gap:6px; } .arrival-board-scheduled-pill{ display:inline-flex;align-items:center;gap:4px;font-size:.62rem; color:#FBBF24;font-weight:700;letter-spacing:.02em;text-transform:lowercase; padding:3px 8px;border-radius:999px;background:rgba(251,191,36,0.1); border:1px solid rgba(251,191,36,0.22); } .arrival-board-body{padding:4px 0} .arrival-row{ display:flex;align-items:center;padding:8px 14px;gap:10px; transition:background .15s;position:relative; } .arrival-row:not(:last-child)::after{ content:'';position:absolute;bottom:0;left:14px;right:14px; height:1px;background:rgba(255,255,255,0.04); } .arrival-row:active{background:rgba(255,255,255,0.02)} .arrival-route-num{ min-width:38px;height:28px;border-radius:7px; display:flex;align-items:center;justify-content:center; font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.78rem; color:rgba(255,255,255,0.85);flex-shrink:0;letter-spacing:-.01em; background:rgba(255,255,255,0.08); } .arrival-dest{ flex:1;font-size:.75rem;color:rgba(255,255,255,0.85); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; line-height:1.3; } .arrival-dest-sub{font-size:.62rem;color:rgba(255,255,255,0.62);margin-top:1px} .arrival-time{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.9rem; color:#4ade80;flex-shrink:0;min-width:42px;text-align:right; } .arrival-time.scheduled{color:#FBBF24} .arrival-time .arrival-unit{font-size:.58rem;font-weight:500;color:rgba(255,255,255,0.62);margin-left:2px} .arrival-board-footer{ padding:6px 14px 8px;border-top:1px solid rgba(255,255,255,0.04); display:flex;align-items:center;justify-content:space-between; } .arrival-refresh-btn{ font-size:.6rem;color:rgba(255,255,255,0.55);background:none;border:none; cursor:pointer;padding:2px 6px;border-radius:4px;transition:all .2s;margin-left:auto; } .arrival-refresh-btn:active{color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.05)} .arrival-board-loading{ padding:20px;text-align:center;color:rgba(255,255,255,0.3);font-size:.72rem; } .arrival-board-loading .spinner{ display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,0.1); border-top-color:rgba(255,255,255,0.4);border-radius:50%;animation:spin .8s linear infinite; margin-bottom:6px; } @keyframes spin{to{transform:rotate(360deg)}} .arrival-board-error{ padding:14px;text-align:center;color:rgba(255,255,255,0.35);font-size:.7rem; } .arrival-board-empty{ padding:20px;text-align:center;color:rgba(255,255,255,0.3);font-size:.72rem; } .arrival-static-badge{ display:inline-flex;align-items:center;gap:3px;font-size:.56rem; color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.04); padding:2px 6px;border-radius:4px;margin-top:4px; } .arrival-row-pick{position:relative;background:rgba(74,222,128,0.08)!important;border:1px solid rgba(74,222,128,0.45)!important;box-shadow:0 0 0 0 rgba(74,222,128,0.5);animation:pickedRow 1.4s ease-in-out infinite} .arrival-row-pick .arrival-route-num{animation:pickedNum 1s ease-in-out infinite;box-shadow:0 0 0 0 rgba(74,222,128,0.7)} @keyframes pickedRow{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,0.5)}50%{box-shadow:0 0 0 6px rgba(74,222,128,0)}} @keyframes pickedNum{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(74,222,128,0.7)}50%{transform:scale(1.08);box-shadow:0 0 0 6px rgba(74,222,128,0)}} /* Stop Picker */ .stop-picker{margin:10px 0 6px} .stop-picker-title{font-size:.72rem;color:var(--text3);font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:5px} .stop-picker-list{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow-y:auto;-webkit-overflow-scrolling:touch} .stop-picker-list::-webkit-scrollbar{width:3px} .stop-picker-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px} .stop-picker-item{ display:flex;align-items:center;gap:10px;padding:10px 12px; background:rgba(255,255,255,0.03);border-radius:10px; border:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:all .15s; } .stop-picker-item:active{transform:scale(.98);background:rgba(74,222,128,0.06);border-color:rgba(74,222,128,0.15)} .stop-picker-item.active{background:rgba(74,222,128,0.08);border-color:rgba(74,222,128,0.2)} .stop-picker-name{flex:1;font-size:.76rem;color:var(--text);line-height:1.3} .stop-picker-meta{font-size:.62rem;color:var(--text3);margin-top:1px} .stop-picker-dist{font-size:.65rem;color:var(--text3);flex-shrink:0;text-align:right} .stop-picker-routes{font-size:.58rem;color:rgba(74,222,128,0.6);margin-top:2px} .stop-picker-icon{ width:32px;height:32px;border-radius:8px; display:flex;align-items:center;justify-content:center; background:rgba(74,222,128,0.08);flex-shrink:0;font-size:.9rem; } .stop-picker-search{ width:100%;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.04);color:var(--text);font-size:.76rem; outline:none;margin-bottom:6px; } .stop-picker-search:focus{border-color:rgba(74,222,128,0.2);background:rgba(74,222,128,0.04)} .stop-picker-search::placeholder{color:var(--text3)} /* Route lightbox (full readable route description) */ .route-lb{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,0.78);backdrop-filter:blur(8px) saturate(150%);-webkit-backdrop-filter:blur(8px) saturate(150%);animation:rlbFade .2s ease both} @keyframes rlbFade{from{opacity:0}to{opacity:1}} .route-lb-card{position:relative;background:linear-gradient(180deg,rgba(28,28,28,0.96),rgba(20,20,20,0.96));border-radius:22px;max-width:560px;width:100%;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:50px 22px 24px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 24px 70px rgba(0,0,0,0.65);animation:rlbRise .25s cubic-bezier(.2,.8,.3,1) both} @keyframes rlbRise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} .route-lb-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,0.1);color:var(--text);font-size:1.05rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;font-weight:700} .route-lb-close:active{background:rgba(255,255,255,0.2);transform:scale(.92)} .route-lb-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(74,222,128,0.35);background:linear-gradient(135deg,rgba(74,222,128,0.22),rgba(54,215,183,0.18));color:#fff;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,background .2s,border-color .2s} .route-lb-cta:active{transform:scale(.98);background:linear-gradient(135deg,rgba(74,222,128,0.34),rgba(54,215,183,0.28));border-color:rgba(74,222,128,0.55)} .reopen-route-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0 0 8px;padding:10px 14px;border-radius:12px;border:1px solid rgba(54,215,183,0.32);background:rgba(54,215,183,0.08);color:var(--sea);font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,background .2s} .reopen-route-btn:active{transform:scale(.98);background:rgba(54,215,183,0.16)} body.lightbox-open{overflow:hidden} /* Geo confirm */ .t-geo-overlay{ position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999; display:flex;align-items:center;justify-content:center; padding:16px; background:rgba(0,0,0,0.7); animation:geoFadeIn .25s ease both; } @keyframes geoFadeIn{from{opacity:0}to{opacity:1}} @keyframes geoSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} .t-geo-confirm{ background:rgba(18,18,18,0.97); border:1px solid rgba(255,255,255,0.15);border-top:1px solid rgba(255,255,255,0.18); border-radius:20px;padding:1.1rem 1rem; box-shadow:0 12px 40px rgba(0,0,0,0.6),inset 0 1px 1px rgba(255,255,255,0.08); backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px); animation:geoSlideUp .35s cubic-bezier(.4,0,.2,1) both; width:100%;max-width:400px;max-height:85vh;overflow-y:auto; } .t-geo-map{width:100%;height:30vh;border-radius:14px;margin-bottom:10px;touch-action:none} .t-geo-question{font-size:1.05rem;font-weight:800;text-align:center;margin-bottom:12px;color:var(--text)} .t-geo-hint{font-size:.75rem;color:var(--text3);text-align:center;margin-top:6px;margin-bottom:4px;line-height:1.4} .t-geo-btns{display:flex;gap:8px;margin-top:6px} .t-geo-btns button{flex:1;padding:10px 12px;border-radius:12px;font-size:.8rem;font-weight:800;border:none;cursor:pointer;transition:all .15s;font-family:inherit} .t-geo-btns button:active{transform:scale(.94)} .t-geo-yes{background:linear-gradient(135deg,#36D7B7,#28B5A0);color:#fff;box-shadow:0 4px 16px rgba(54,215,183,.3);font-size:.85rem;animation:geoPulse 2s ease-in-out infinite} @keyframes geoPulse{0%,100%{box-shadow:0 4px 16px rgba(54,215,183,.3)}50%{box-shadow:0 4px 22px rgba(54,215,183,.5)}} .t-geo-no{background:var(--card2);color:var(--text3);border:1px solid var(--border)!important;font-size:.78rem} .t-geo-stops{margin:8px 0;max-height:240px;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:8px} .t-geo-stop{ padding:12px 14px;border-radius:14px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);border-top:1px solid rgba(255,255,255,0.15); box-shadow:0 4px 16px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); display:flex;flex-direction:column;gap:8px; transition:border-color .2s; } .t-geo-stop:active{border-color:var(--sea)} .t-geo-stop-name{font-size:.88rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:6px} .t-geo-stop-name .t-dist{ margin-left:auto;font-size:.72rem;font-weight:600;color:var(--sea); background:rgba(54,215,183,0.12);padding:2px 8px;border-radius:8px; white-space:nowrap; } .t-geo-stop-buses{display:flex;flex-wrap:wrap;gap:5px} .t-geo-stop-buses .t-bus-chip{ font-size:.72rem;padding:3px 9px;border-radius:8px; background:linear-gradient(135deg,#d4a017,#e8b820); color:#111;font-weight:800;min-width:36px;text-align:center; box-shadow:0 2px 6px rgba(212,160,23,0.3); } .t-geo-none{font-size:.85rem;color:var(--text3);text-align:center;padding:12px} .t-geo-map-hint{font-size:.75rem;font-weight:700;color:var(--sea);text-align:center;padding:6px 0;animation:hintPulse 2s ease-in-out infinite} @keyframes hintPulse{0%,100%{opacity:.7}50%{opacity:1}} /* Pulse marker */ @keyframes pulse-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.5);opacity:0}} /* Soft one-shot highlight for "navigated to this card" feedback. Uses outline (not border-color — avoids competing with cat-specific border rules) and outer box-shadow halo. Starts at full strength, fades smoothly to nothing over 1.5s. Single iteration, no pulse. */ .fav-hl{ animation:favGlow 1.5s cubic-bezier(.22,.61,.36,1) 1 forwards!important; position:relative; will-change:outline,box-shadow; } @keyframes favGlow{ 0%{ outline:2.5px solid rgba(54,215,183,0.9)!important; outline-offset:2px!important; box-shadow:0 0 0 6px rgba(54,215,183,0.18),0 0 36px 6px rgba(54,215,183,0.55),inset 0 0 22px rgba(54,215,183,0.30)!important; } 60%{ outline:2px solid rgba(54,215,183,0.45)!important; outline-offset:4px!important; box-shadow:0 0 0 3px rgba(54,215,183,0.08),0 0 20px 2px rgba(54,215,183,0.28),inset 0 0 12px rgba(54,215,183,0.15)!important; } 100%{ outline:2px solid rgba(54,215,183,0)!important; outline-offset:6px!important; box-shadow:0 0 0 0 rgba(54,215,183,0),0 0 0 0 rgba(54,215,183,0),inset 0 0 0 0 rgba(54,215,183,0)!important; } } @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} /* Single slow "navigated-here" highlight (~3s). Driven inline by applyFavGlow so it wins over category border rules. One smooth pulse: fades the teal glow in, holds it, then fades fully out — no rapid blinking. animation-fill-mode forwards keeps the final transparent state so the opaque inline outline never flashes back before cleanup. */ @keyframes navGlowOnce{ 0%{ outline-color:rgba(54,215,183,0); box-shadow:0 0 0 0 rgba(54,215,183,0),0 0 0 0 rgba(54,215,183,0),inset 0 0 0 0 rgba(54,215,183,0); } 22%,55%{ outline-color:rgba(54,215,183,0.95); box-shadow:0 0 30px 6px rgba(54,215,183,0.6),0 0 0 4px rgba(54,215,183,0.22),inset 0 0 18px rgba(54,215,183,0.30); } 100%{ outline-color:rgba(54,215,183,0); box-shadow:0 0 0 0 rgba(54,215,183,0),0 0 0 0 rgba(54,215,183,0),inset 0 0 0 0 rgba(54,215,183,0); } } .pulse-marker{ width:14px;height:14px;background:var(--sea);border:2px solid #fff; border-radius:50%;box-shadow:0 2px 6px rgba(0,229,184,0.5);position:relative; } .pulse-marker::before{ content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px; border-radius:50%;border:2px solid var(--sea); animation:pulse-ring 1.5s ease-out infinite; } .from-stop-marker{ width:18px;height:18px;background:#4ade80;border:3px solid #fff; border-radius:50%;box-shadow:0 0 0 3px rgba(74,222,128,0.35),0 2px 8px rgba(0,0,0,0.4);position:relative; } .from-stop-marker::after{ content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-55%); color:#fff;font-size:10px;font-weight:900;line-height:1; } .dest-stop-marker{ width:20px;height:20px;background:#ff6b6b;border:3px solid #fff; border-radius:50%;box-shadow:0 0 0 3px rgba(255,107,107,0.35),0 2px 10px rgba(0,0,0,0.45);position:relative; } .dest-stop-marker::before{ content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px; border-radius:50%;border:2px solid rgba(255,107,107,0.5); animation:pulse-ring 1.4s ease-out infinite; } .user-pulse-marker{ width:16px;height:16px;background:#4488FF;border:3px solid #fff; border-radius:50%;box-shadow:0 0 10px rgba(0,102,255,0.6);position:relative; } .user-pulse-marker::before{ content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px; border-radius:50%;background:rgba(68,136,255,0.25); animation:user-pulse-ring 2s ease-out infinite; } .user-pulse-marker::after{ content:'';position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px; border-radius:50%;border:2px solid rgba(68,136,255,0.3); animation:user-pulse-ring 2s ease-out infinite .5s; } @keyframes user-pulse-ring{0%{transform:scale(.8);opacity:1}100%{transform:scale(2.2);opacity:0}} /* Stop tooltips on selected route polyline */ .route-stop-tip{background:rgba(20,20,20,0.92);color:#fff;border:1px solid rgba(255,255,255,0.12);border-radius:8px;font-size:.7rem;font-weight:600;padding:3px 8px;box-shadow:0 2px 8px rgba(0,0,0,0.4)} .route-stop-tip::before{display:none} .transport-map-live .leaflet-marker-pane .route-stop-dim{opacity:.22} .transport-map-live .leaflet-marker-pane .route-stop-dim div{background:rgba(190,205,215,.55)!important;border-color:rgba(255,255,255,.55)!important;box-shadow:none!important} .transport-map-live .leaflet-tooltip.route-stop-tip{display:none} .t-bus-service-notice{ position:absolute; z-index:650; left:50%; top:50%; display:none; width:min(84%,310px); padding:13px 15px; border:1px solid color-mix(in srgb,var(--theme-accent) 18%,rgba(255,255,255,.12)); border-radius:16px; background:color-mix(in srgb,var(--bg2) 92%,rgba(8,18,24,.9)); box-shadow:0 12px 30px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08); color:var(--text); text-align:center; transform:translate(-50%,-50%); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); pointer-events:none } .t-bus-service-notice.is-visible{display:block} .t-bus-service-notice-icon{ display:grid; place-items:center; width:32px; height:32px; margin:0 auto 7px; border-radius:11px; background:color-mix(in srgb,var(--theme-accent) 12%,transparent); color:var(--theme-accent) } .t-bus-service-notice-icon svg{width:18px;height:18px} .t-bus-service-notice-title{font-size:.78rem;font-weight:750;line-height:1.3} .t-bus-service-notice-sub{margin-top:4px;color:var(--text2);font-size:.65rem;font-weight:500;line-height:1.4} /* Transport tabs */ /* All bus numbers dropdown (routes tab) */ .t-num-dropdown{margin:0 0 10px;border-radius:12px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.035);overflow:hidden;transition:border-color .2s} .t-num-dd-trigger{width:100%;display:flex;align-items:center;gap:8px;padding:10px 14px;background:none;border:none;color:var(--text);font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:left} .t-num-dd-trigger:active{background:rgba(255,255,255,0.03)} .t-num-dd-label{flex:1} .t-num-dd-count{font-size:.68rem;font-weight:700;color:var(--sea);background:rgba(54,215,183,0.15);padding:2px 8px;border-radius:10px;flex-shrink:0} .t-num-dd-arrow{width:18px;height:18px;color:var(--text3);transition:transform .25s;flex-shrink:0} .t-num-dropdown.is-open{border-color:rgba(54,215,183,0.28)} .t-num-dropdown.is-open .t-num-dd-arrow{transform:rotate(180deg)} .t-num-dd-panel{max-height:0;overflow:hidden;transition:max-height .28s ease} .t-num-dropdown.is-open .t-num-dd-panel{max-height:460px} .t-num-grid{display:flex;flex-wrap:wrap;gap:6px;padding:4px 12px 12px} .t-num-badge{flex-shrink:0;min-width:44px;height:40px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:#fff;font-family:inherit;font-size:.82rem;font-weight:800;border:none;cursor:pointer;font-variant-numeric:tabular-nums;box-shadow:0 1px 4px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.22);transition:transform .12s;-webkit-tap-highlight-color:transparent;letter-spacing:.3px} .t-num-badge:active{transform:scale(.92)} .t-num-badge.is-active{outline:2px solid var(--sea);outline-offset:2px} .t-tabs-bar{display:inline-flex;gap:5px;margin:0 0 10px;padding:3px;background:rgba(255,255,255,0.04);border-radius:14px;border:1px solid rgba(255,255,255,0.06);max-width:100%} .t-tab-btn{flex:0 0 auto;min-width:92px;padding:8px 12px;border:none;border-radius:11px;font-family:inherit;font-size:.76rem;font-weight:700;color:var(--text3);background:transparent;cursor:pointer;transition:all .2s;text-align:center;white-space:nowrap;-webkit-tap-highlight-color:transparent;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:6px} .t-tab-btn svg{width:16px;height:16px;flex-shrink:0} .t-tab-btn .t-tab-sub{font-size:.55rem;font-weight:400;opacity:.6;line-height:1.1} .t-tab-btn.active{background:rgba(54,215,183,0.15);color:var(--sea);box-shadow:0 2px 8px rgba(0,0,0,0.2)} .t-tab-btn.active .t-tab-sub{opacity:.8} .t-tab-btn:active{transform:scale(.95)} .t-how-steps{display:flex;gap:6px;margin-bottom:12px} .t-how-step{flex:1;padding:10px 8px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);text-align:center} .t-how-step-num{width:20px;height:20px;border-radius:50%;background:rgba(54,215,183,0.15);color:var(--sea);font-size:.6rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-bottom:4px} .t-how-step-text{font-size:.62rem;color:var(--text2);line-height:1.3} .t-active-hint{padding:9px 12px;border-radius:11px;background:linear-gradient(135deg,rgba(74,222,128,0.10),rgba(54,215,183,0.06));border:1px solid rgba(74,222,128,0.18);color:var(--text);font-size:.72rem;line-height:1.35;font-weight:500} .t-other-transport>summary::-webkit-details-marker{display:none} .t-other-transport>summary::marker{content:''} .t-other-transport[open]>summary .t-other-arrow{transform:rotate(180deg)} .t-other-transport>summary:active{background:rgba(255,255,255,0.04)} .t-nm-search-input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);color:var(--text);font-size:.82rem;outline:none;font-family:inherit;margin-bottom:10px} .t-nm-search-input:focus{border-color:rgba(54,215,183,0.35);background:rgba(54,215,183,0.04)} .t-popular-stop{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;margin-bottom:6px} .t-popular-stop:active{transform:scale(.985);background:rgba(54,215,183,0.06);border-color:rgba(54,215,183,0.2)} .t-popular-stop-name{flex:1;min-width:0;font-size:.78rem;color:var(--text);font-weight:600;line-height:1.3} .t-popular-stop-routes{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px} /* Route list */ .t-route-list{display:flex;flex-direction:column;gap:6px;margin-top:10px} #tsRouteList.open .t-subsection-body{max-height:none} .t-route-list{display:flex;flex-direction:column;gap:4px} .t-route-list-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.05);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;min-height:44px} .t-route-list-item:active{transform:scale(.985)} .t-route-list-item.active{border-color:rgba(54,215,183,0.25);background:rgba(54,215,183,0.06)} .t-route-list-item.nearby{border-color:rgba(74,222,128,0.18);background:rgba(74,222,128,0.04)} .t-route-num-badge{min-width:36px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.78rem;color:#fff;flex-shrink:0;letter-spacing:.2px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.18)} .t-route-list-info{flex:1;min-width:0;display:flex;align-items:center;gap:6px} .t-route-list-name{flex:1;min-width:0;font-size:.74rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25} .t-route-list-meta{font-size:.58rem;color:var(--text3);white-space:nowrap;flex-shrink:0;opacity:.7} .t-route-list-arrow{color:var(--text3);font-size:.95rem;opacity:.5;flex-shrink:0} .t-route-list-arrow{color:var(--text3);font-size:.7rem;flex-shrink:0} /* Route stops expand */ .t-route-stops{padding:8px 14px 12px;background:rgba(255,255,255,0.02);border-top:1px solid rgba(255,255,255,0.04);margin:-1px 0 6px;border-radius:0 0 12px 12px;max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch} .t-route-stops::-webkit-scrollbar{width:3px} .t-route-stops::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px} .t-route-stop-item{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.72rem;color:var(--text2);border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer} .t-route-stop-item:last-child{border-bottom:none} .t-route-stop-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;border:2px solid} .t-route-stop-num{min-width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:.6rem;font-weight:800;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.25)} .t-route-stop-name{flex:1;line-height:1.25} /* Near me section */ .t-nearme-stop-list{display:flex;flex-direction:column;gap:4px;margin-top:8px} .t-nearme-stop{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,0.03);border-radius:10px;border:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent} .t-nearme-stop:active{transform:scale(.98);background:rgba(74,222,128,0.06);border-color:rgba(74,222,128,0.15)} .t-nearme-stop.active{background:rgba(74,222,128,0.08);border-color:rgba(74,222,128,0.2)} /* Planner inputs */ .t-planner-field{display:flex;align-items:center;gap:8px;margin-bottom:8px} .t-planner-label{font-size:.7rem;font-weight:700;color:var(--text3);min-width:38px;text-align:right} .t-planner-input{flex:1;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);color:var(--text);font-size:.85rem;font-family:inherit;outline:none;transition:border .2s} .t-planner-input:focus{border-color:var(--sea)} .t-planner-input::placeholder{color:var(--text3)} .t-planner-swap{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.8rem;transition:all .2s;flex-shrink:0;-webkit-tap-highlight-color:transparent} .t-planner-swap:active{transform:scale(.9);background:rgba(54,215,183,0.15);color:var(--sea)} /* Transport info cards */ .t-info-cards{display:flex;gap:.7rem;overflow-x:auto;padding:2px 0 .8rem;-webkit-overflow-scrolling:touch;scrollbar-width:none} .t-info-cards::-webkit-scrollbar{display:none} .t-info-card{ flex-shrink:0;width:130px;padding:.8rem .9rem;border-radius:var(--r); background:var(--wet); border:1px solid var(--wet-border);border-top:1px solid rgba(255,255,255,0.08); box-shadow:0 6px 24px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.06); position:relative;overflow:hidden; } .t-info-card::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--sand),var(--coral)); border-radius:3px;transform:scaleY(0);transition:transform .3s;transform-origin:top; } .t-info-card:active::before{transform:scaleY(1)} .t-info-card:active{border-color:rgba(0,229,184,0.15)} .t-info-card-icon{font-size:1.4rem;margin-bottom:4px} .t-info-card-title{font-size:.78rem;font-weight:700;color:var(--text);line-height:1.2} .t-info-card-sub{font-size:.65rem;color:var(--text2);margin-top:2px;line-height:1.3} /* Intercity (trains + buses out of Batumi) — accordion */ .ic-accordion.t-subsection{margin-top:12px} .ic-accordion .t-subsection-title{color:var(--sea)} .ic-accordion.t-subsection.open .t-subsection-body{max-height:6000px} .ic-count-chip{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 8px;border-radius:11px;background:rgba(54,215,183,0.16);color:var(--sea);font-size:.68rem;font-weight:800;margin-left:4px} .ic-body-inner{padding:0 14px 14px} .ic-upd-foot{font-size:.58rem;color:var(--text3);text-align:right;margin-top:8px;opacity:.7} .ic-disclaimer{font-size:.62rem;color:var(--text3);background:rgba(255,214,10,0.06);border:1px solid rgba(255,214,10,0.18);border-radius:10px;padding:6px 10px;margin:4px 0 10px;line-height:1.35} .ic-filter-pills{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .ic-filter-pills::-webkit-scrollbar{display:none} .ic-pill{flex-shrink:0;padding:6px 12px;border-radius:18px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:var(--text2);font-size:.72rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;-webkit-tap-highlight-color:transparent;white-space:nowrap} .ic-pill:active{transform:scale(.96)} .ic-pill.active{background:rgba(54,215,183,0.16);color:var(--sea);border-color:rgba(54,215,183,0.32)} .ic-pill .ic-pill-cnt{font-size:.6rem;opacity:.7;margin-left:4px;background:rgba(255,255,255,0.08);border-radius:8px;padding:1px 5px} .ic-pill.active .ic-pill-cnt{background:rgba(54,215,183,0.22)} .ic-list{display:flex;flex-direction:column;gap:6px;margin-top:4px} .ic-row{position:relative;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);overflow:hidden;transition:background .15s,border-color .15s} .ic-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ic-clr,linear-gradient(180deg,var(--sea),var(--sky)));border-radius:3px 0 0 3px} .ic-row:active{background:rgba(255,255,255,0.05)} .ic-row.is-open{background:rgba(255,255,255,0.05);border-color:rgba(54,215,183,0.22)} .ic-row-main{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:start;padding:9px 12px 9px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:48px} .ic-row-icon{font-size:1.15rem;line-height:1.2;text-align:center;padding-top:2px} .ic-row-body{min-width:0;align-self:center} .ic-row-title{font-size:.82rem;font-weight:700;color:var(--text);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;overflow-wrap:anywhere;hyphens:auto} .ic-row-title .ic-row-star{color:var(--sand);margin-left:4px;font-size:.72rem} .ic-row-sub{font-size:.66rem;color:var(--text3);line-height:1.3;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;overflow-wrap:anywhere} .ic-row-time{text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;align-self:center;max-width:88px} .ic-row-time-val{font-size:.88rem;font-weight:800;color:var(--sea);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88px} .ic-row-time-val.is-muted{color:var(--text3);font-weight:600;font-size:.66rem;line-height:1.15;white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;overflow-wrap:anywhere;max-width:100px} .ic-row-time-delta{font-size:.58rem;color:var(--text3);margin-top:2px;line-height:1} .ic-row-detail{max-height:0;overflow:hidden;transition:max-height .3s ease} .ic-row.is-open .ic-row-detail{max-height:1200px} .ic-row-detail-inner{padding:0 14px 12px;border-top:1px dashed rgba(255,255,255,0.06);margin:0 12px} .ic-detail-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:.7rem;margin:10px 0;color:var(--text2)} .ic-detail-grid dt{color:var(--text3);font-weight:600} .ic-detail-grid dd{margin:0;color:var(--text);font-weight:600} .ic-sched-mini{margin:4px 0 8px;font-size:.68rem;color:var(--text2);font-variant-numeric:tabular-nums} .ic-sched-mini-head{font-size:.58rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);font-weight:700;margin-bottom:3px} .ic-sched-mini-row{display:flex;gap:8px;padding:2px 0} .ic-sched-mini-row .ic-sd-dep{color:var(--text);font-weight:700;min-width:50px} .ic-sched-mini-row .ic-sd-arr{color:var(--text3)} .ic-sched-mini-row .ic-sd-days{margin-left:auto;color:var(--text3);font-size:.6rem;opacity:.8} .ic-notes{font-size:.68rem;color:var(--text2);line-height:1.4;margin:4px 0 8px} .ic-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px} .ic-btn{flex:1;min-width:0;padding:7px 8px;border-radius:9px;border:1px solid rgba(54,215,183,0.22);background:rgba(54,215,183,0.08);color:var(--sea);font-size:.68rem;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:4px;-webkit-tap-highlight-color:transparent;transition:all .15s;white-space:nowrap;appearance:none;-webkit-appearance:none} .ic-btn:active{transform:scale(.97);background:rgba(54,215,183,0.14)} .ic-btn.ic-btn-alt{border-color:rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:var(--text)} .ic-btn-ico{flex:0 0 auto;min-width:36px;padding:7px 10px} /* Transport subsections: Transfer & Car Rental — accordion */ .t-subsection{margin:1rem 0;padding:0;border-radius:var(--r);overflow:hidden;background:var(--wet);border:1px solid var(--wet-border);border-top:1px solid rgba(255,255,255,0.08);box-shadow:0 4px 16px rgba(0,0,0,0.2)} .t-subsection-header{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:.85rem 1rem;cursor:pointer;-webkit-tap-highlight-color:transparent; transition:background .2s;user-select:none; } .t-subsection-header:active{background:rgba(255,255,255,0.04)} .t-subsection-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;color:var(--sand);display:flex;align-items:center;gap:8px;margin:0} .t-subsection-title svg{width:22px;height:22px} .t-subsection-arrow{ width:20px;height:20px;color:var(--text3);transition:transform .3s ease;flex-shrink:0; } .t-subsection.open .t-subsection-arrow{transform:rotate(180deg)} .t-subsection-body{ max-height:0;overflow:hidden;transition:max-height .35s ease; } .t-subsection.open .t-subsection-body{max-height:2000px} .t-sub-cards{display:flex;flex-direction:column;gap:8px;padding:0 .8rem .8rem} .t-sub-card{ background:var(--card-soft);border:1px solid var(--card-bdr-soft); border-radius:var(--r);padding:.8rem 1rem;position:relative;overflow:hidden; transition:all .2s; } .t-sub-card::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--sea),var(--sky));border-radius:3px; } .t-sub-card:active{transform:scale(.98);border-color:rgba(54,215,183,0.2)} .t-sub-card-name{font-size:.85rem;font-weight:700;color:var(--sea);margin-bottom:3px} .t-sub-card-desc{font-size:.75rem;color:var(--text-on-card);line-height:1.4;margin-bottom:5px} .t-sub-card-price{display:inline-block;font-size:.7rem;font-weight:700;color:var(--sand);background:rgba(245,166,35,0.1);padding:2px 8px;border-radius:6px;margin-right:6px} .t-sub-card-phone{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:600;color:var(--sky);text-decoration:none} .t-sub-card-phone:active{opacity:.7} .t-sub-card-bottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px} .t-sub-card-link{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:600;color:var(--sea);text-decoration:none;padding:3px 8px;border:1px solid rgba(54,215,183,0.2);border-radius:8px;transition:.2s} .t-sub-card-link:active{background:rgba(54,215,183,0.1)} /* .pc-dist styled in unified pill block above */ /* Home action buttons row */ .home-actions{ display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem; flex-wrap:wrap; } .home-search-bar{ flex:1;min-width:0; } .home-search-bar.always-open{ max-height:none;opacity:1; } .home-search-input-wrap{ display:flex;align-items:center;gap:.6rem; background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 35%, rgba(0,0,0,0.1) 100%), rgba(22,22,22,0.85); border:1px solid rgba(255,255,255,0.1); border-top:1px solid rgba(255,255,255,0.16); border-bottom:1px solid rgba(0,0,0,0.3); border-radius:50px;padding:.58rem .9rem; backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px); position:relative;overflow:hidden; box-shadow: inset 0 1px 2px rgba(255,255,255,0.08), inset 0 -1px 3px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.15); transition:border-color .25s,box-shadow .25s; } .home-search-input-wrap::before{ content:'';position:absolute;top:0;left:8%;right:8%;height:45%; background:linear-gradient(180deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.02) 40%,transparent 100%); border-radius:50px 50px 50% 50%;pointer-events:none; } .home-search-input-wrap:focus-within{ border-color:rgba(255,255,255,0.18); box-shadow: inset 0 1px 2px rgba(255,255,255,0.1), inset 0 -1px 3px rgba(0,0,0,0.25), 0 4px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04); } .home-search-input-wrap svg{flex-shrink:0;color:rgba(255,255,255,0.25);transition:color .25s;position:relative;z-index:1} .home-search-input-wrap:focus-within svg{color:rgba(255,255,255,0.5)} .home-search-bar input{ flex:1;background:none;border:none; color:var(--text);font-size:.8rem;font-family:'Inter',sans-serif;font-weight:400; outline:none;position:relative;z-index:1; letter-spacing:.2px;min-width:0; } .home-search-bar input::placeholder{color:rgba(255,255,255,0.22);font-weight:400} .home-search-bar .search-results{ position:absolute;left:0;right:0;top:100%;z-index:60; margin-top:.4rem; background:rgba(18,18,18,0.97); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:.4rem; backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px); box-shadow:0 8px 32px rgba(0,0,0,0.6); } .home-search-bar .search-results:empty{ display:none; } .home-actions{position:relative} /* Geo button on home */ .geo-btn{ display:flex;align-items:center;gap:.5rem; background:linear-gradient(135deg, color-mix(in srgb,var(--bg3,#232328) 88%,transparent), color-mix(in srgb,var(--bg2,#1c1c20) 82%,transparent)); border:1px solid var(--wet-border,rgba(255,255,255,0.14)); border-radius:50px;padding:.65rem 1.1rem;cursor:pointer; color:var(--text);font-size:.8rem;font-weight:700; font-family:inherit;transition:all .2s; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); box-shadow:0 4px 14px rgba(0,0,0,0.18),0 1px 0 rgba(255,255,255,0.06) inset; } .geo-btn .geo-pin-icon{flex-shrink:0} .donate-home-btn{ border-color:rgba(255,209,102,0.45);background:rgba(255,209,102,0.15); color:var(--sand); } .donate-home-btn:active{background:rgba(255,209,102,0.3)!important;color:#fff!important;border-color:var(--sand)!important;} .geo-btn:active{background:linear-gradient(135deg,color-mix(in srgb,var(--bg3,#232328) 96%,transparent),color-mix(in srgb,var(--bg2,#1c1c20) 92%,transparent));color:var(--text)} .geo-btn.on{border-color:var(--text2,rgba(255,255,255,.45));color:var(--text)} .geo-btn .geo-icon{font-size:1rem;display:none} .section-geo-toggle{ --geo-accent:color-mix(in srgb,var(--bg3,#232328),white 38%); display:flex;align-items:center;gap:.5rem;padding:.7rem 1.2rem;border-radius:50px; cursor:pointer;font-size:.82rem;font-weight:700;font-family:inherit;transition:all .2s; background:linear-gradient(135deg, color-mix(in srgb,var(--geo-accent),transparent 80%), color-mix(in srgb,var(--geo-accent),transparent 90%)); border:1px solid color-mix(in srgb,var(--geo-accent),transparent 68%); color:var(--geo-accent); box-shadow:0 4px 16px color-mix(in srgb,var(--geo-accent),transparent 86%),0 1px 0 rgba(255,255,255,0.06) inset; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); } /* Opaque base ONLY where backdrop-filter is unsupported (some older Telegram WebViews) — keeps the frosted glass look everywhere it renders, and stops the floating pill showing the card text through it where the blur can't. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .section-geo-toggle{ background:linear-gradient(135deg, color-mix(in srgb,var(--geo-accent),transparent 80%), color-mix(in srgb,var(--geo-accent),transparent 90%)), rgba(22,22,25,0.92); } .section-geo-toggle.on{ background:linear-gradient(135deg, color-mix(in srgb,var(--geo-accent),transparent 62%), color-mix(in srgb,var(--geo-accent),transparent 76%)), rgba(22,22,25,0.90); } body.light-theme .section-geo-toggle{ background:linear-gradient(135deg,rgba(255,255,255,0.95),rgba(255,255,255,0.88)),#ffffff; color:#2c2c30; } body.light-theme .section-geo-toggle.on{ background:linear-gradient(135deg, color-mix(in srgb,var(--sea,#36d7b7),transparent 14%), color-mix(in srgb,var(--sea,#36d7b7),transparent 28%)),var(--sea,#36d7b7); color:#06241f; } } .section-geo-toggle:active{transform:scale(.95);box-shadow:0 2px 10px rgba(0,0,0,0.4)} .section-geo-toggle.on{ border-color:color-mix(in srgb,var(--geo-accent),transparent 40%);color:#fff; background:linear-gradient(135deg, color-mix(in srgb,var(--geo-accent),transparent 62%), color-mix(in srgb,var(--geo-accent),transparent 76%)); box-shadow:0 4px 22px color-mix(in srgb,var(--geo-accent),transparent 72%),0 1px 0 rgba(255,255,255,0.10) inset; } .section-geo-toggle .geo-pin-icon{width:18px;height:18px;flex-shrink:0} .section-geo-toggle.loading,.geo-btn.loading{pointer-events:none;opacity:.85} .section-geo-toggle.loading .geo-pin-icon,.geo-btn.loading .geo-pin-icon{ animation:spin 1s linear infinite;border:2px solid rgba(255,255,255,0.18); border-top-color:#fff;border-radius:50%;width:16px;height:16px; } .section-geo-toggle.loading .geo-pin-icon path,.section-geo-toggle.loading .geo-pin-icon circle, .geo-btn.loading .geo-pin-icon path,.geo-btn.loading .geo-pin-icon circle{display:none} #geoToast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px); background:rgba(20,20,20,0.95);color:#fff;padding:.7rem 1.1rem;border-radius:14px; font-size:.78rem;font-weight:500;z-index:99999;opacity:0;transition:opacity .25s,transform .25s; backdrop-filter:blur(20px);box-shadow:0 8px 30px rgba(0,0,0,0.5);max-width:80vw;text-align:center; pointer-events:none;border:1px solid rgba(255,255,255,0.08); } #geoToast.show{opacity:1;transform:translateX(-50%) translateY(0)} .place-tip{ background:rgba(255,255,255,0.04); border-left:3px solid var(--sea);border-radius:var(--r); padding:.8rem 1rem;font-size:.78rem;color:var(--text-on-card); font-style:italic;margin-top:.3rem; } /* Inverted teardrop pin used everywhere a location icon is needed */ .addr-pin{ width:1.05em;height:1.05em; display:inline-block;vertical-align:-0.18em; margin-right:.05em;flex-shrink:0; } /* Shared recommendation banner — pulses on home screen when arrived via deep link */ .shared-rec-banner{ display:flex;align-items:center;gap:.65rem; margin:.5rem 0 .7rem; padding:.75rem .85rem;border-radius:14px;cursor:pointer; background:linear-gradient(135deg, color-mix(in srgb,var(--bg3,#232328),white 28%) 0%, color-mix(in srgb,var(--bg2,#1c1c20),white 14%) 100%); border:1px solid color-mix(in srgb,var(--bg3,#232328),white 35%); color:var(--text);font-size:.82rem;font-weight:600;line-height:1.25; animation:srbBlink 1.6s ease-in-out infinite; -webkit-tap-highlight-color:transparent; transition:transform .15s ease; } .shared-rec-banner:active{transform:scale(.98)} .shared-rec-icon{font-size:1.25rem;flex-shrink:0;line-height:1} .shared-rec-text{flex:1;min-width:0} .shared-rec-text b{display:block;font-size:.72rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px} .shared-rec-name{font-size:.92rem;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block} .shared-rec-close{ width:26px;height:26px;border-radius:50%;flex-shrink:0; background:rgba(255,255,255,.07);border:none;color:var(--text2); font-size:.95rem;cursor:pointer;font-family:inherit;padding:0; display:flex;align-items:center;justify-content:center; -webkit-tap-highlight-color:transparent; } .shared-rec-close:active{background:rgba(255,255,255,.14);color:var(--text)} @keyframes srbBlink{ 0%,100%{box-shadow:0 0 0 rgba(0,0,0,0)} 50%{box-shadow:0 0 18px color-mix(in srgb,var(--bg3,#232328),white 40%)} } /* Category sub-section divider plate (e.g. shopping/grocery → 🏪 Рынки) */ .cat-subsection-header{ display:flex;align-items:center;justify-content:center;gap:.7rem; margin:2rem 0 .9rem; padding:.8rem 1.1rem;border-radius:14px; background:linear-gradient(135deg, color-mix(in srgb,var(--bg3,#232328),white 22%), color-mix(in srgb,var(--bg2,#1c1c20),white 10%)); border:1px solid var(--wet-border,rgba(255,255,255,0.14)); color:var(--text);font-weight:800;font-size:.95rem;letter-spacing:.04em; text-transform:uppercase; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 10px rgba(0,0,0,.18); position:relative; } .cat-subsection-header::before, .cat-subsection-header::after{ content:'';flex:1;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--sand,#ffd60a) 40%,var(--sea,#30d5c8) 60%,transparent); opacity:.7; } /* User location marker on section maps — pulsing dot */ .user-loc-pulse{position:relative;width:28px;height:28px;display:flex;align-items:center;justify-content:center} .user-loc-pulse::before{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(69,174,245,0.5);animation:userLocPulse 1.6s ease-out infinite} .user-loc-dot{position:relative;z-index:1;width:14px;height:14px;border-radius:50%;background:#45AEF5;border:3px solid #fff;box-shadow:0 0 10px rgba(69,174,245,0.55),0 2px 6px rgba(0,0,0,0.3)} @keyframes userLocPulse{0%{transform:scale(.7);opacity:.85}100%{transform:scale(2.6);opacity:0}} /* Floating "enable my location" button on the section map */ .map-enable-loc{ position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%); z-index:1100;padding:.65rem 1.1rem;border-radius:999px;cursor:pointer; background:linear-gradient(135deg, color-mix(in srgb,var(--bg3,#232328),white 28%), color-mix(in srgb,var(--bg2,#1c1c20),white 16%)); border:1px solid color-mix(in srgb,var(--bg3,#232328),white 35%); color:var(--text);font-size:.82rem;font-weight:700;font-family:inherit; display:inline-flex;align-items:center;gap:.45rem; box-shadow:0 4px 18px rgba(0,0,0,0.35); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); -webkit-tap-highlight-color:transparent; } .map-enable-loc:active{transform:translateX(-50%) scale(.96)} /* Donate button — subtle */ .donate-row{ display:flex;justify-content:center;gap:.6rem;margin-top:1.2rem; } .share-btn{ display:inline-flex;align-items:center;gap:.35rem; padding:.4rem 1rem;border:1px solid rgba(255,255,255,0.08); border-radius:20px;background:var(--wet); color:var(--text3);font-size:.7rem;font-weight:500; cursor:pointer;transition:all .25s;font-family:inherit; letter-spacing:.3px; } .share-btn:hover,.share-btn:active{ background:rgba(255,255,255,0.07);color:var(--sky); border-color:rgba(255,255,255,0.12); } .share-btn svg{opacity:.6} .donate-btn{ display:inline-flex;align-items:center;gap:.35rem; padding:.4rem 1rem;border:1px solid rgba(255,209,102,0.2); border-radius:20px;background:rgba(255,209,102,0.06); color:var(--text3);font-size:.7rem;font-weight:500; cursor:pointer;transition:all .25s;font-family:inherit; letter-spacing:.3px; } .donate-btn:hover,.donate-btn:active{ background:rgba(255,209,102,0.14);color:var(--sand); border-color:rgba(255,209,102,0.35); } .donate-btn .donate-star{font-size:.85rem;line-height:1} /* Donate lightbox */ .donate-overlay{ position:fixed;inset:0;z-index:300; display:flex;align-items:center;justify-content:center; background:radial-gradient(ellipse at center,rgba(255,209,102,0.04),rgba(0,0,0,0.7)); opacity:0;pointer-events:none;transition:opacity .35s ease; } .donate-overlay.show{opacity:1;pointer-events:auto} .donate-modal{ position:relative; background:linear-gradient(160deg,rgba(22,22,30,0.95),rgba(12,12,18,0.97)); backdrop-filter:blur(50px) saturate(1.8);-webkit-backdrop-filter:blur(50px) saturate(1.8); border-radius:22px;padding:2rem 1.6rem 1.6rem; max-width:320px;width:88%;text-align:center; border:1px solid rgba(255,255,255,0.08); box-shadow:0 24px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(255,209,102,0.06),inset 0 1px 0 rgba(255,255,255,0.07); transform:scale(.88);opacity:0; transition:transform .4s cubic-bezier(.175,.885,.32,1.275),opacity .35s ease; overflow:hidden; } .donate-modal::before{ content:'';position:absolute;top:-60%;left:-30%;width:160%;height:160%; background:radial-gradient(circle at 30% 20%,rgba(255,209,102,0.07),transparent 50%), radial-gradient(circle at 70% 80%,rgba(54,215,183,0.05),transparent 50%); pointer-events:none; } .donate-overlay.show .donate-modal{transform:scale(1);opacity:1} .donate-modal h3{ position:relative; font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:800; background:linear-gradient(135deg,var(--sand) 0%,#ffcc33 50%,var(--sea) 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text;margin-bottom:.35rem; } .donate-modal p{position:relative;color:var(--text2);font-size:.78rem;margin-bottom:1.2rem;line-height:1.4} .donate-grid{position:relative;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:1.2rem} .donate-amount{ padding:.55rem 1.2rem; border:1px solid rgba(255,209,102,0.12); border-radius:14px; background:rgba(255,209,102,0.04); color:var(--text);font-size:.88rem;font-weight:600;cursor:pointer; transition:all .25s cubic-bezier(.4,0,.2,1);font-family:inherit; position:relative; } .donate-amount:hover,.donate-amount:active{ background:linear-gradient(135deg,var(--sand),#ffb700);color:#000;border-color:var(--sand); transform:scale(1.08);box-shadow:0 4px 24px rgba(255,209,102,0.3); } .donate-custom{ position:relative; display:flex;align-items:center;gap:8px;margin-top:.3rem; justify-content:center; } .donate-custom-input{ width:80px;padding:.5rem .7rem;border:1px solid rgba(255,209,102,0.12); border-radius:12px;background:rgba(255,255,255,0.04);color:var(--text); font-size:.88rem;font-weight:600;font-family:inherit; text-align:center;outline:none;transition:border-color .2s,box-shadow .2s; -moz-appearance:textfield; } .donate-custom-input::-webkit-inner-spin-button, .donate-custom-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .donate-custom-input:focus{border-color:var(--sand);box-shadow:0 0 14px rgba(255,209,102,0.12)} .donate-custom-send{ padding:.5rem 1rem;border:none;border-radius:12px; background:linear-gradient(135deg,var(--sand),#ffb700);color:#000; font-size:.85rem;font-weight:700; cursor:pointer;font-family:inherit;transition:all .2s; box-shadow:0 2px 14px rgba(255,209,102,0.2); } .donate-custom-send:active{transform:scale(.95)} .donate-or{position:relative;color:var(--text3);font-size:.7rem;margin:.7rem 0 .5rem;text-transform:uppercase;letter-spacing:.6px} .donate-close{ position:absolute;top:.7rem;right:.7rem; width:28px;height:28px;display:flex;align-items:center;justify-content:center; border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08); color:var(--text3);font-size:.85rem;font-weight:400;line-height:1; cursor:pointer;font-family:inherit;transition:all .2s;padding:0; } .donate-close:active{background:rgba(255,255,255,0.12);transform:scale(.9)} /* Home heart — inline with geo */ .home-heart{ display:flex;align-items:center;justify-content:center;gap:.4rem; padding:.45rem .8rem;cursor:pointer; border-radius:14px; background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1); transition:all .2s;white-space:nowrap; backdrop-filter:var(--wet-blur); box-shadow:var(--wet-shine), 0 2px 10px rgba(0,0,0,0.08); width:100%; } .home-heart:active{background:rgba(255,255,255,0.1);transform:scale(.96)} .home-heart-icon{font-size:.85rem} #homeHeartText{font-size:.72rem;color:var(--text2);font-weight:600} .legal-footer{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; margin:.65rem 0 72px;padding:.65rem .85rem;text-align:center; color:var(--text3);font-size:.68rem;line-height:1.35; } .legal-footer-links{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap} .legal-footer a{color:var(--text2);text-decoration:none} .legal-footer a:active{color:var(--sea)} .legal-dot{opacity:.55} /* Category donate footer */ .cat-donate-footer{ display:flex;align-items:center;justify-content:center;gap:8px; padding:.7rem 1rem;margin-top:.8rem;margin-bottom:60px;cursor:pointer; border-radius:12px;background:rgba(255,209,102,0.04); border:1px solid rgba(255,209,102,0.08); opacity:0;transition:all .4s ease; animation:fadeInSoft 1s ease 1.5s forwards; } @keyframes fadeInSoft{to{opacity:.55}} .cat-donate-footer:active{opacity:.8;background:rgba(255,209,102,0.1);transform:scale(.98)} .cat-donate-footer span{font-size:.72rem;color:var(--text2)} .cat-donate-footer .cdf-star{font-size:.85rem;color:var(--sand)} /* Contextual thank-you after route */ .route-thanks{ display:flex;align-items:center;justify-content:center;gap:8px; margin-top:.8rem;padding:.65rem 1rem;border-radius:12px; background:rgba(255,209,102,0.05);border:1px solid rgba(255,209,102,0.12); cursor:pointer;transition:all .3s;opacity:.55; } .route-thanks:active{background:rgba(255,209,102,0.12);opacity:.85;transform:scale(.98)} .route-thanks span{font-size:.74rem;color:var(--text2)} .route-thanks .rt-star{color:var(--sand);font-size:.9rem} /* Premium, non-blocking channel prompt shown in high-intent sections. */ .channel-subscribe-cta{ position:relative;isolation:isolate;overflow:hidden; display:flex;align-items:center;gap:11px;margin-top:.55rem;padding:.78rem .82rem; border-radius:16px; background:linear-gradient(135deg,rgba(34,139,230,.2),rgba(69,174,245,.1) 58%,rgba(48,213,200,.08)); border:1px solid rgba(89,185,250,.3);box-shadow:0 8px 24px rgba(3,18,31,.16),inset 0 1px 0 rgba(255,255,255,.08); color:var(--text);text-decoration:none;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease; } .channel-subscribe-cta::before{content:'';position:absolute;z-index:-1;inset:-60% auto auto -10%;width:150px;height:120px;border-radius:50%;background:rgba(69,174,245,.16);filter:blur(22px);pointer-events:none} .channel-subscribe-cta:active{background:linear-gradient(135deg,rgba(34,139,230,.28),rgba(69,174,245,.15),rgba(48,213,200,.12));border-color:rgba(89,185,250,.46);box-shadow:0 4px 14px rgba(3,18,31,.16);transform:scale(.985)} .channel-subscribe-cta .csc-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:#2aabee;color:#fff;box-shadow:0 5px 14px rgba(42,171,238,.28)} .channel-subscribe-cta .csc-icon svg{width:20px;height:20px;display:block} .channel-subscribe-cta .csc-copy{min-width:0;flex:1;color:var(--text2);font-size:.73rem;line-height:1.35} .channel-subscribe-cta .csc-copy strong{display:block;margin-bottom:2px;color:var(--text);font-size:.86rem;line-height:1.22;font-weight:760;letter-spacing:-.01em} .channel-subscribe-cta .csc-action{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:.42rem .68rem;border-radius:999px;background:#2aabee;color:#fff;box-shadow:0 5px 14px rgba(42,171,238,.22);font-size:.7rem;font-weight:780;line-height:1;white-space:nowrap} .channel-subscribe-cta.is-membership-pending{display:none} .transport-channel-cta,.concerts-channel-cta,.nearby-channel-cta{margin:.55rem 0 .8rem} /* Section footer nudge */ .section-nudge{ display:flex;align-items:center;justify-content:center;gap:8px; padding:.7rem 1rem;margin-top:.8rem;cursor:pointer; border-radius:12px;background:rgba(255,209,102,0.04); border:1px solid rgba(255,209,102,0.08); opacity:.5;transition:all .3s; } .section-nudge:active{opacity:.8;background:rgba(255,209,102,0.1);transform:scale(.98)} .section-nudge span{font-size:.72rem;color:var(--text2)} .crypto-section{margin-top:.8rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,0.08)} .crypto-title{font-size:.72rem;color:var(--text3);margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.5px} .crypto-list{display:flex;flex-direction:column;gap:8px} .crypto-item{ display:flex;align-items:center;gap:10px; padding:.55rem .7rem;border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); cursor:pointer;transition:all .25s ease; position:relative;overflow:hidden; } .crypto-item:active{transform:scale(.97);background:rgba(255,255,255,0.08)} .crypto-item::after{ content:'';position:absolute;inset:0;border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,0.06) 0%,transparent 60%); pointer-events:none; } .crypto-coin{ width:32px;height:32px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:.85rem;font-weight:800;flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,0.3); } .crypto-coin.btc{background:linear-gradient(135deg,#f7931a,#e8850f);color:#fff} .crypto-coin.eth{background:linear-gradient(135deg,#627eea,#4a67d6);color:#fff} .crypto-coin.usdt{background:linear-gradient(135deg,#26a17b,#1e8f6e);color:#fff} .crypto-info{flex:1;min-width:0;text-align:left} .crypto-name{font-size:.75rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:4px} .crypto-net{font-size:.55rem;color:var(--text3);font-weight:400;opacity:.7} .crypto-addr{font-size:.58rem;color:var(--text2);font-family:'Inter',monospace; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .crypto-copy{ flex-shrink:0;font-size:.6rem;color:var(--sea);font-weight:600; padding:.25rem .5rem;border-radius:8px; background:rgba(54,215,183,0.1); border:1px solid rgba(54,215,183,0.15); transition:all .2s; } .crypto-copy.copied{background:rgba(54,215,183,0.25);color:#fff} /* Share icon on cards */ .share-fab{ position:absolute;top:.55rem;right:.55rem;z-index:5; width:30px;height:30px;border-radius:50%;border:1px solid rgba(69,174,245,0.3); background:rgba(69,174,245,0.15); color:var(--sky);font-size:.7rem; display:flex;align-items:center;justify-content:center; cursor:pointer;opacity:0;transition:opacity .25s,transform .25s,background .25s; transform:scale(.85); box-shadow:0 2px 8px rgba(69,174,245,0.2); } .place-card:hover .share-fab, .exc-card:hover .share-fab, .phrase-card:hover .share-fab, .t-info-card:hover .share-fab, .share-fab.visible{opacity:1;transform:scale(1)} .share-fab:active{transform:scale(.88)} .share-fab:hover{background:rgba(69,174,245,0.25);color:#fff} .share-fab svg{width:15px;height:15px;pointer-events:none;filter:drop-shadow(0 0 2px rgba(69,174,245,0.4))} .share-fab::after{ content:'';position:absolute;inset:-3px;border-radius:50%; border:1.5px solid var(--sky);opacity:0; transform:scale(1.3);transition:all .35s ease; } .share-fab.shared::after{opacity:1;transform:scale(1);animation:shareRipple .6s ease-out} .share-fab.shared{color:var(--sky);background:rgba(69,174,245,0.12)} @keyframes shareRipple{ 0%{transform:scale(.8);opacity:1} 100%{transform:scale(1.6);opacity:0} } /* Section-level share button — one per section header (replaces per-card share) */ .section-share-btn{ width:2rem;height:2rem;flex-shrink:0;margin-left:auto; display:inline-flex;align-items:center;justify-content:center; border:1px solid rgba(69,174,245,0.32); border-radius:999px; background:linear-gradient(145deg,rgba(69,174,245,0.16),rgba(69,174,245,0.05)); color:var(--sky);cursor:pointer;padding:0;font:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 2px 10px rgba(69,174,245,0.18); backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4); transition:transform .15s ease,background .2s,border-color .2s; -webkit-tap-highlight-color:transparent; } .section-share-btn svg{width:1rem;height:1rem;display:block} .section-share-btn:active{transform:scale(0.92);background:rgba(69,174,245,0.26)} .section-share-btn.shared,.section-share-btn.copied{ border-color:var(--sky);background:rgba(69,174,245,0.3);color:#fff; } /* Absolute variant — for screens whose header is not a flex row (e.g. Info) */ .section-share-abs{position:absolute;top:.85rem;right:1rem;z-index:6;margin-left:0} body.light-theme .section-share-btn{ background:linear-gradient(145deg,rgba(69,174,245,0.14),rgba(69,174,245,0.05)); border-color:rgba(69,174,245,0.3); } /* Excursion cards */ .exc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.7rem} .exc-card{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:var(--r);padding:1rem 1.1rem; box-shadow:0 2px 16px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.1); position:relative;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .15s; } .exc-card::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--sea),var(--coral)); border-radius:3px;transform:scaleY(0);transition:transform .3s;transform-origin:top; } .exc-card:active::before{transform:scaleY(1)} .exc-card::after{ content:'';position:absolute;top:0;left:0;right:0;height:45%; background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03) 50%,transparent); pointer-events:none;border-radius:var(--r) var(--r) 0 0; } .exc-title{font-weight:700;font-size:.9rem;margin-bottom:.3rem} .exc-desc{font-size:.78rem;color:var(--text2);line-height:1.5} .exc-price{ display:inline-block;margin-top:.5rem;font-size:.72rem;font-weight:700; color:var(--sand);background:rgba(255,209,102,0.12); padding:.2rem .5rem;border-radius:6px; } /* Phrase grid */ .phrase-grid{display:flex;flex-direction:column;gap:.7rem;max-width:100%;overflow-x:hidden} .phrase-card{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:var(--r);padding:.9rem 1.1rem; box-shadow:0 2px 16px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.1); transition:border-color .2s,box-shadow .2s,transform .15s;overflow:hidden;word-break:break-word;max-width:100%; position:relative; } .phrase-card::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--sea),var(--sky)); border-radius:3px;transform:scaleY(0);transition:transform .3s;transform-origin:top; } .phrase-card:active::before{transform:scaleY(1)} .phrase-card::after{ content:'';position:absolute;top:0;left:0;right:0;height:45%; background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03) 50%,transparent); pointer-events:none;border-radius:var(--r) var(--r) 0 0; } .phrase-card:active{border-color:rgba(255,255,255,0.07);box-shadow:0 4px 18px rgba(255,255,255,0.06)} .ph-top{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-bottom:.3rem} .ph-btns{display:flex;align-items:center;gap:.45rem} .ph-slow{ width:32px;height:32px;border-radius:50%;border:1px solid rgba(54,215,183,0.15);cursor:pointer; background:rgba(54,215,183,0.06);color:rgba(54,215,183,0.4); display:flex;align-items:center;justify-content:center;font-size:.8rem; transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent; position:relative;filter:grayscale(1) opacity(.55); } .ph-slow.playing{filter:grayscale(0) opacity(1)} .ph-slow::after{ content:'';position:absolute;inset:-4px;border-radius:50%; background:radial-gradient(circle,rgba(54,215,183,0.15),transparent 70%); opacity:0;transition:opacity .3s;pointer-events:none; } .ph-slow:active{transform:scale(.85);background:rgba(54,215,183,0.18);border-color:rgba(54,215,183,0.4);filter:grayscale(0) opacity(1)} .ph-ka{font-weight:700;font-size:1rem;color:var(--sea);text-align:center;overflow-wrap:break-word;word-break:break-word;width:100%} .ph-speak{ width:38px;height:38px;border-radius:50%;border:1px solid rgba(54,215,183,0.15);cursor:pointer; background:rgba(54,215,183,0.06);color:rgba(54,215,183,0.5); display:flex;align-items:center;justify-content:center; transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent; position:relative; } .ph-speak::after{ content:'';position:absolute;inset:-4px;border-radius:50%; background:radial-gradient(circle,rgba(54,215,183,0.15),transparent 70%); opacity:0;transition:opacity .3s;pointer-events:none; } .ph-speak svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s} .ph-speak:active{transform:scale(.85);background:rgba(54,215,183,0.18);color:var(--sea);border-color:rgba(54,215,183,0.4)} .ph-speak:active::after{opacity:1} .ph-speak:active svg{transform:scale(1.15)} .ph-speak.playing{background:rgba(54,215,183,0.12);color:var(--sea);border-color:rgba(54,215,183,0.3);animation:speakPulse 1.2s ease-in-out infinite} .ph-speak.playing::after{opacity:.6;animation:speakRing 1.2s ease-out infinite} @keyframes speakPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(54,215,183,0.2)}50%{transform:scale(1.08);box-shadow:0 0 16px 4px rgba(54,215,183,0.15)}} @keyframes speakRing{0%{transform:scale(1);opacity:.4}100%{transform:scale(1.8);opacity:0}} .ph-pron{font-size:.72rem;color:var(--text3);font-style:italic;text-align:center} .ph-tr{font-size:.8rem;color:var(--text2);text-align:center} /* ============ TRANSLATOR ============ */ .translator-wrap{padding:0 .5rem} .translator-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:14px 14px 10px;margin-bottom:1rem;box-shadow:0 2px 16px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.08);transition:border-color .2s} .translator-card:focus-within{border-color:rgba(54,215,183,0.3)} .translator-card-label{font-size:.68rem;font-weight:600;color:var(--text3);margin-bottom:8px;display:flex;align-items:center;gap:6px} .translator-card-label svg{opacity:.5} .translator-input-wrap{position:relative} .translator-input{width:100%;min-height:80px;max-height:180px;padding:.7rem .9rem;padding-right:3rem;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;color:var(--text1);font-size:1rem;font-family:Inter,sans-serif;outline:none;transition:border-color .2s;resize:none;line-height:1.45;overflow-y:auto} .translator-input:focus{border-color:rgba(54,215,183,0.25);background:rgba(255,255,255,0.06)} .translator-input::placeholder{color:var(--text3);font-size:.88rem} .translator-clear{position:absolute;right:8px;top:8px;background:rgba(255,255,255,0.1);border:none;color:var(--text3);width:26px;height:26px;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:1rem} .translator-clear.vis{display:flex} .translator-go{position:absolute;right:8px;bottom:8px;background:var(--sea);border:none;color:#000;width:32px;height:32px;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;box-shadow:0 2px 8px rgba(54,215,183,0.3)} .translator-result{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r);padding:1rem 1.1rem;box-shadow:0 2px 16px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.1);position:relative} .tr-actions-row{position:absolute;top:.55rem;right:.6rem;display:flex;gap:.3rem;align-items:center} .tts-btn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(54,215,183,.12);border:1px solid rgba(54,215,183,.25);color:var(--sea);cursor:pointer;padding:0;font-size:.9rem;transition:all .15s} .tts-btn:active{transform:scale(.9)} .tts-btn.playing{background:var(--sea);color:#0e0e0e;animation:ttsPulse .9s ease-in-out infinite} .tts-btn.tts-slow{background:rgba(255,214,10,.12);border-color:rgba(255,214,10,.25);color:var(--sand);font-size:.9rem} .tts-btn.tts-slow.playing{background:var(--sand);color:#0e0e0e} @keyframes ttsPulse{0%,100%{box-shadow:0 0 0 0 rgba(54,215,183,.5)}50%{box-shadow:0 0 0 8px rgba(54,215,183,0)}} .translator-result:not(:last-child){margin-bottom:.7rem} .tr-latin{font-size:.72rem;color:var(--text3);font-style:italic;text-align:center;margin-bottom:.25rem} .tr-georgian{font-weight:700;font-size:1.15rem;color:var(--sea);text-align:center;margin-bottom:.35rem;background:linear-gradient(135deg,#6EEBCF,#fff,#5EEAD4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .tr-translation{font-size:.9rem;color:var(--text1);text-align:center} .tr-lang-label{font-size:.65rem;color:var(--text3);text-align:center;margin-top:.15rem} .tr-direction{position:absolute;top:8px;left:10px;font-size:.58rem;font-weight:700;letter-spacing:.5px;color:var(--text3);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:2px 7px;opacity:.7;text-transform:uppercase} .translator-hint{font-size:.72rem;color:var(--text3);text-align:center;margin-top:1rem;line-height:1.5} .translator-hint b{color:var(--sea);font-weight:600} .translator-history{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem} .translator-loading{text-align:center;color:var(--text3);font-size:.8rem;padding:.5rem 0} .translator-examples{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.2rem} .translator-examples button{flex-shrink:0;background:rgba(48,213,200,0.1);border:1px solid rgba(48,213,200,0.2);border-radius:20px;color:var(--sea);padding:.35rem .75rem;font-size:.72rem;cursor:pointer;transition:all .2s} .translator-examples button:active{transform:scale(.95);background:rgba(48,213,200,0.2)} .tr-ocr-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px 20px;border-radius:14px;border:1.5px dashed rgba(255,255,255,0.18);background:rgba(255,255,255,0.025);color:var(--text2);font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;margin-bottom:12px;-webkit-tap-highlight-color:transparent;letter-spacing:.2px} .tr-ocr-btn:active{transform:scale(.98);border-color:rgba(54,215,183,0.4);background:rgba(54,215,183,0.06);color:var(--sea)} .tr-ocr-btn:hover{border-color:rgba(255,255,255,0.3);color:var(--text1)} .tr-ocr-btn svg{width:36px;height:36px;stroke:currentColor;stroke-width:1.6;fill:none;flex-shrink:0;opacity:.9} .tr-ocr-btn .tr-ocr-label{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2} .tr-ocr-btn .tr-ocr-label b{font-size:.88rem;font-weight:700;color:inherit} .tr-ocr-btn .tr-ocr-label span{font-size:.66rem;font-weight:500;opacity:.65;margin-top:2px} .tr-ocr-status{text-align:center;padding:12px;font-size:.78rem;color:var(--text2);animation:pulse 1.5s ease-in-out infinite} .menu-result-wrap{margin-top:12px} .menu-result{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:14px 14px 10px;animation:menuIn .3s ease} @keyframes menuIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .menu-result-head{display:flex;align-items:center;gap:8px;font-size:1.02rem;font-weight:800;color:var(--text1,#fff);margin-bottom:8px} .menu-result-head svg{width:20px;height:20px;fill:none;stroke:#36D7B7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .menu-sec-name{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#36D7B7;margin:12px 0 4px} .menu-sec{display:flex;flex-direction:column} .menu-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.05)} .menu-item:last-child{border-bottom:none} .menu-item-main{min-width:0;flex:1 1 auto} .menu-tr{font-size:.92rem;font-weight:600;color:var(--text1,#fff);line-height:1.32} .menu-src{font-size:.72rem;color:var(--text3,#8b9098);margin-top:2px;line-height:1.3} .menu-desc{font-size:.72rem;color:var(--text3,#8b9098);font-style:italic;margin-top:2px;line-height:1.32} .menu-price{flex:0 0 auto;font-size:.9rem;font-weight:800;color:#7ee0c8;white-space:nowrap;padding-top:1px} .menu-note{font-size:.78rem;color:var(--text2,#b9bdc6);background:rgba(54,215,183,0.07);border-radius:10px;padding:8px 10px;margin-top:10px;line-height:1.35} .menu-foot{font-size:.64rem;color:var(--text3,#8b9098);text-align:center;margin-top:10px;opacity:.85} .menu-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:22px 12px;color:var(--text2,#b9bdc6);font-size:.88rem} .menu-spin{width:18px;height:18px;border:2px solid rgba(255,255,255,0.18);border-top-color:#36D7B7;border-radius:50%;animation:menuSpin .8s linear infinite;flex-shrink:0} @keyframes menuSpin{to{transform:rotate(360deg)}} .menu-error{padding:16px;text-align:center;font-size:.85rem;color:#f0a8a8;background:rgba(244,113,113,0.08);border-radius:12px} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} /* ============ WEATHER SCREEN ============ */ .weather-full{ text-align:center; background:linear-gradient(180deg,#1a1a1a,#161616 60%,#121212); border:1px solid rgba(255,255,255,0.06); border-radius:var(--r2);padding:2rem 1.5rem; position:relative;overflow:hidden; } .weather-full::before{ content:'';position:absolute;top:-50px;right:-50px;width:200px;height:200px; background:radial-gradient(circle,rgba(255,255,255,0.05),transparent 70%);border-radius:50%; } .weather-full::after{ content:'';position:absolute;bottom:-40px;left:-40px;width:180px;height:180px; background:radial-gradient(circle,rgba(255,255,255,0.04),transparent 70%);border-radius:50%; } .wf-icon{font-size:3.5rem;margin-bottom:.5rem;position:relative} .wf-temp{ font-family:'Space Grotesk',sans-serif;font-size:4.5rem;font-weight:900; background:linear-gradient(135deg,var(--sky),var(--sea)); -webkit-background-clip:text;-webkit-text-fill-color:transparent; position:relative;line-height:1; } .wf-desc{color:var(--text2);margin:.5rem 0 1.5rem;font-size:.95rem;position:relative} .wf-grid{display:flex;justify-content:center;gap:2.5rem;position:relative} .wf-item{text-align:center} .wf-val{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.3rem;color:var(--text)} .wf-label{font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.5px} /* ============ WEATHER FORECAST MODAL ============ */ .weather-modal-overlay{ position:fixed;inset:0; z-index:9998;display:flex;align-items:flex-end;justify-content:center; opacity:0;pointer-events:none;transition:opacity .25s ease; } .weather-modal-overlay.open{opacity:1;pointer-events:auto} .weather-modal{ width:100%;max-width:380px;overflow-y:auto;scrollbar-width:none; background: radial-gradient(ellipse at 80% 0%,color-mix(in srgb,var(--theme-accent2,var(--sky)) 18%,transparent) 0%,transparent 44%), radial-gradient(ellipse at 14% 100%,color-mix(in srgb,var(--theme-accent,var(--sea)) 14%,transparent) 0%,transparent 48%), linear-gradient(180deg,color-mix(in srgb,var(--bg3) 92%,white 8%),color-mix(in srgb,var(--bg) 94%,black 6%)); border:1px solid color-mix(in srgb,var(--theme-accent2,var(--sky)) 22%,transparent); border-radius:20px 20px 0 0;padding:0 0 1.2rem; transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,.32,1); box-shadow:0 -6px 30px rgba(0,0,0,.4); } .weather-modal::-webkit-scrollbar{display:none} .weather-modal-overlay.open .weather-modal{transform:translateY(0)} .wm-handle{width:32px;height:4px;background:rgba(255,255,255,.15);border-radius:2px;margin:8px auto 0} .wm-hero{position:relative;padding:.8rem 1rem .7rem;overflow:hidden} .wm-hero::before{content:'';position:absolute;top:-30px;right:-20px;width:100px;height:100px;background:radial-gradient(circle,color-mix(in srgb,var(--theme-accent2,var(--sky)) 12%,transparent),transparent 70%);border-radius:50%} .wm-hero-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1} .wm-hero-left{display:flex;align-items:center;gap:.4rem} .wm-hero-icon{font-size:2rem} .wm-hero-temp{font-family:'Space Grotesk',sans-serif;font-size:2.2rem;font-weight:800;line-height:1;color:var(--sky)} .wm-close{background:none;border:none;border-radius:50%;color:var(--text2);font-size:.85rem;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1} .wm-close:active{transform:scale(.9)} .wm-hero-meta{position:relative;z-index:1;margin-top:.3rem} .wm-hero-city{font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:700;color:var(--text)} .wm-hero-desc{font-size:.72rem;color:var(--text2)} .wm-hero-details{display:flex;gap:.8rem;margin-top:.3rem} .wm-hero-det{font-size:.65rem;color:var(--text3)} .wm-body{padding:0 1rem} .wm-sea{display:flex;align-items:center;gap:.6rem;background:rgba(54,215,183,.06);border:1px solid rgba(54,215,183,.08);border-radius:10px;padding:.5rem .8rem;margin:.7rem 0} .wm-sea-icon{font-size:1.2rem} .wm-sea-info{flex:1;display:flex;align-items:baseline;gap:.4rem} .wm-sea-temp{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:700;color:var(--sea)} .wm-sea-label{font-size:.68rem;color:var(--text2)} .wm-sun-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:.7rem 0} .wm-sun-time{display:flex;align-items:center;gap:.62rem;min-width:0;padding:.66rem .72rem;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.035)} .wm-sun-time--rise{background:linear-gradient(145deg,rgba(255,196,107,.11),rgba(255,255,255,.025));border-color:rgba(255,196,107,.14)} .wm-sun-time--set{background:linear-gradient(145deg,rgba(255,126,103,.11),rgba(255,255,255,.025));border-color:rgba(255,126,103,.14)} .wm-sun-icon{display:block;width:32px;height:32px;flex:0 0 32px;object-fit:contain;filter:drop-shadow(0 3px 7px rgba(0,0,0,.24))} .wm-sun-copy{display:flex;min-width:0;flex-direction:column;gap:.08rem} .wm-sun-label{color:var(--text3);font-size:.62rem;font-weight:650;line-height:1.15} .wm-sun-value{color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums} .wm-section-title{font-size:.68rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin:.6rem 0 .4rem} .wm-forecast{display:flex;flex-direction:column;gap:4px} .wm-day{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.02);border-radius:8px;padding:.45rem .6rem} .wm-day-name{font-family:'Space Grotesk',sans-serif;font-size:.7rem;font-weight:600;color:var(--text);width:28px} .wm-day-icon{font-size:.95rem;width:24px;text-align:center} .wm-day-bar{flex:1;height:4px;background:rgba(255,255,255,.05);border-radius:2px;position:relative;overflow:hidden} .wm-day-fill{position:absolute;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--theme-accent2,var(--sky)),var(--theme-accent,var(--sea)))} .wm-day-temps{display:flex;gap:.3rem;font-size:.7rem;width:55px;justify-content:flex-end} .wm-day-lo{color:var(--text3);font-family:'Space Grotesk',sans-serif} .wm-day-hi{color:var(--text);font-weight:600;font-family:'Space Grotesk',sans-serif} .wm-hourly{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .wm-hourly::-webkit-scrollbar{display:none} .wm-hour{flex:0 0 56px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:.45rem .25rem;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);scroll-snap-align:start;position:relative} .wm-hour.is-now{background:linear-gradient(180deg,color-mix(in srgb,var(--theme-accent2,var(--sky)) 20%,transparent),color-mix(in srgb,var(--theme-accent,var(--sea)) 10%,transparent));border-color:color-mix(in srgb,var(--theme-accent2,var(--sky)) 42%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--theme-accent2,var(--sky)) 18%,transparent)} .wm-hour-time{font-size:.6rem;font-weight:700;color:var(--text3);font-family:'Space Grotesk',sans-serif;letter-spacing:.3px} .wm-hour.is-now .wm-hour-time{color:var(--theme-accent2,var(--sky))} .wm-hour-icon{font-size:1.05rem;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))} .wm-hour-temp{font-size:.78rem;font-weight:700;color:var(--text);font-family:'Space Grotesk',sans-serif} .wm-hour-rain{font-size:.55rem;color:var(--theme-accent2,var(--sky));font-weight:600;display:flex;align-items:center;gap:1px;min-height:.7rem} .wm-hour-rain.zero{visibility:hidden} /* ========== WEATHER MODAL EFFECTS 500% ========== */ /* Modal overlay — deep ocean gradient */ .weather-modal-overlay{ background: radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--theme-accent,var(--sea)) 18%,transparent) 0%,transparent 52%), linear-gradient(180deg,rgba(0,0,0,.82) 0%,color-mix(in srgb,var(--bg) 88%,rgba(0,0,0,.86)) 52%,color-mix(in srgb,var(--bg2) 82%,rgba(0,0,0,.78)) 100%); } /* Modal entrance — slide up with scale bounce */ .weather-modal{ animation:wmEnter .5s cubic-bezier(.34,1.4,.64,1) both; } @keyframes wmEnter{from{transform:translateY(100%) scale(.92);opacity:0}to{transform:translateY(0) scale(1);opacity:1}} /* Hero — dynamic sky background */ .wm-hero{ background: radial-gradient(ellipse at 70% 20%,color-mix(in srgb,var(--theme-accent2,var(--sky)) 18%,transparent) 0%,transparent 50%), radial-gradient(ellipse at 20% 80%,color-mix(in srgb,var(--theme-accent3,var(--sand)) 12%,transparent) 0%,transparent 40%), linear-gradient(180deg,color-mix(in srgb,var(--theme-accent,var(--sea)) 8%,transparent),transparent); position:relative;overflow:hidden; } /* Hero — moving clouds */ .wm-hero::after{ content:'';position:absolute;top:0;left:-100%;width:300%;height:100%; background: radial-gradient(ellipse at 20% 40%,rgba(255,255,255,0.04) 0%,transparent 30%), radial-gradient(ellipse at 60% 60%,rgba(255,255,255,0.03) 0%,transparent 25%), radial-gradient(ellipse at 85% 30%,rgba(255,255,255,0.035) 0%,transparent 28%); animation:wmClouds 25s linear infinite;pointer-events:none; } @keyframes wmClouds{to{transform:translateX(33.33%)}} /* Hero icon — float + glow pulse */ .wm-hero-icon{ animation:wmIconFloat 3s ease-in-out infinite; filter:drop-shadow(0 0 10px rgba(69,174,245,0.3)); } @keyframes wmIconFloat{0%,100%{transform:translateY(0) scale(1) rotate(0deg)}25%{transform:translateY(-4px) scale(1.05) rotate(2deg)}75%{transform:translateY(2px) scale(.98) rotate(-1deg)}} /* Hero temp — breathing glow + gradient text */ .wm-hero-temp{ color:#fff; -webkit-text-fill-color:#fff; animation:wmTempIn .6s cubic-bezier(.4,0,.2,1) both; filter:drop-shadow(0 0 14px rgba(255,255,255,0.22)); } @keyframes wmTempShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} @keyframes wmTempIn{from{opacity:0;transform:scale(.6) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}} /* Hero details — cascade entrance */ .wm-hero-det{ animation:wmDetIn .4s cubic-bezier(.4,0,.2,1) both; } .wm-hero-det:nth-child(1){animation-delay:.2s} .wm-hero-det:nth-child(2){animation-delay:.3s} .wm-hero-det:nth-child(3){animation-delay:.4s} @keyframes wmDetIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}} /* Sea temp card — wave shimmer + glow */ .wm-sea{ position:relative;overflow:hidden; animation:wmSeaIn .5s cubic-bezier(.4,0,.2,1) both .3s; border:1px solid rgba(54,215,183,0.15); } @keyframes wmSeaIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .wm-sea::before{ content:'';position:absolute;bottom:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent,rgba(54,215,183,0.3),rgba(69,174,245,0.2),transparent); animation:wmSeaShimmer 3s ease-in-out infinite; } @keyframes wmSeaShimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}} .wm-sea-icon{ animation:wmSeaWave 2.5s ease-in-out infinite; } @keyframes wmSeaWave{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-3px) rotate(5deg)}75%{transform:translateY(2px) rotate(-3deg)}} .wm-sea-temp{ text-shadow:0 0 12px rgba(54,215,183,0.4); animation:wmSeaTempPulse 3s ease-in-out infinite; } @keyframes wmSeaTempPulse{0%,100%{text-shadow:0 0 8px rgba(54,215,183,0.2)}50%{text-shadow:0 0 18px rgba(54,215,183,0.5)}} /* Section title — underline draw */ .wm-section-title{ position:relative;padding-bottom:4px; animation:wmSecIn .4s ease both .4s; } @keyframes wmSecIn{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:translateX(0)}} .wm-section-title::after{ content:'';position:absolute;bottom:0;left:0;height:1px; background:linear-gradient(90deg,var(--sky),var(--sea),transparent); animation:wmUnderline .8s ease both .6s;width:0; } @keyframes wmUnderline{to{width:100%}} /* Forecast days — staggered cascade + hover effects */ .wm-day{ animation:wmDayIn .4s cubic-bezier(.4,0,.2,1) both; transition:all .25s ease;position:relative;overflow:hidden; border:1px solid transparent; } .wm-day:nth-child(1){animation-delay:.45s} .wm-day:nth-child(2){animation-delay:.55s} .wm-day:nth-child(3){animation-delay:.65s} .wm-day:nth-child(4){animation-delay:.75s} .wm-day:nth-child(5){animation-delay:.85s} @keyframes wmDayIn{from{opacity:0;transform:translateX(20px) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}} /* Day hover — lift + glow + expand bar */ .wm-day:active{ background:rgba(69,174,245,0.06); border-color:rgba(69,174,245,0.12); transform:scale(1.02); } /* Day icon — subtle bounce on appear */ .wm-day-icon{ animation:wmDayIconBounce .5s cubic-bezier(.34,1.56,.64,1) both; } .wm-day:nth-child(1) .wm-day-icon{animation-delay:.5s} .wm-day:nth-child(2) .wm-day-icon{animation-delay:.6s} .wm-day:nth-child(3) .wm-day-icon{animation-delay:.7s} .wm-day:nth-child(4) .wm-day-icon{animation-delay:.8s} .wm-day:nth-child(5) .wm-day-icon{animation-delay:.9s} @keyframes wmDayIconBounce{from{opacity:0;transform:scale(0) rotate(-15deg)}to{opacity:1;transform:scale(1) rotate(0deg)}} /* Temperature bar — animated gradient fill */ .wm-day-fill{ background:linear-gradient(90deg,#45AEF5,#36D7B7,#F5A623,#FF6B8A);background-size:300% 100%; animation:wmBarShift 6s ease-in-out infinite; box-shadow:0 0 8px rgba(54,215,183,0.3); } @keyframes wmBarShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} /* Temperature bar — grow from zero */ .wm-day-bar{overflow:hidden} .wm-day:nth-child(1) .wm-day-fill{animation:wmBarGrow .6s ease both .55s,wmBarShift 6s ease-in-out infinite .55s} .wm-day:nth-child(2) .wm-day-fill{animation:wmBarGrow .6s ease both .65s,wmBarShift 6s ease-in-out infinite .65s} .wm-day:nth-child(3) .wm-day-fill{animation:wmBarGrow .6s ease both .75s,wmBarShift 6s ease-in-out infinite .75s} .wm-day:nth-child(4) .wm-day-fill{animation:wmBarGrow .6s ease both .85s,wmBarShift 6s ease-in-out infinite .85s} .wm-day:nth-child(5) .wm-day-fill{animation:wmBarGrow .6s ease both .95s,wmBarShift 6s ease-in-out infinite .95s} @keyframes wmBarGrow{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}} /* Hi temp — warm glow */ .wm-day-hi{ text-shadow:0 0 6px rgba(245,166,35,0.25); } /* Lo temp — cool tint */ .wm-day-lo{ text-shadow:0 0 6px rgba(69,174,245,0.2); } /* Handle bar — breathing glow */ .wm-handle{ animation:wmHandlePulse 2s ease-in-out infinite; } @keyframes wmHandlePulse{0%,100%{background:rgba(255,255,255,.12);box-shadow:none}50%{background:rgba(255,255,255,.25);box-shadow:0 0 10px rgba(255,255,255,.1)}} /* Close button — spin on hover */ .wm-close{ transition:all .3s; } .wm-close:active{ transform:scale(.85) rotate(90deg); background:rgba(255,100,100,.15);border-color:rgba(255,100,100,.2); } /* ============ EXCHANGE SCREEN ============ */ .exchange-full{ background:var(--wet); border:1px solid var(--wet-border); border-radius:var(--r2);padding:1.5rem;margin-bottom:0; backdrop-filter:var(--wet-blur); box-shadow:var(--wet-shine), 0 4px 24px rgba(0,0,0,0.12); } .ef-title{ text-align:center;font-family:'Space Grotesk',sans-serif; font-size:1.1rem;font-weight:700;margin-bottom:.2rem; } .ef-sub{text-align:center;font-size:.78rem;color:var(--text3);margin-bottom:1.2rem} .rate-item{ display:flex;justify-content:space-between;align-items:center; padding:.85rem .6rem;border-bottom:1px solid rgba(255,255,255,0.04); transition:background .2s;border-radius:8px; } .rate-item:last-child{border-bottom:none} .rate-item:active{background:rgba(255,209,102,0.06)} .ri-left{display:flex;align-items:center;gap:.6rem} .ri-flag{font-size:1.3rem} .ri-code{font-weight:700;font-size:.9rem} .ri-val{ font-family:'Space Grotesk',sans-serif;font-weight:800; font-size:1.1rem;color:var(--sand); } /* Converter */ .converter-box{ background:var(--wet);border:1px solid var(--wet-border); border-radius:var(--r2);padding:1.2rem;margin-bottom:1rem; backdrop-filter:var(--wet-blur); box-shadow:var(--wet-shine), 0 4px 20px rgba(0,0,0,0.12); } .conv-title{ font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:1rem;margin-bottom:1rem;text-align:center; } .conv-row{display:flex;gap:.6rem;align-items:center;margin-bottom:.8rem} .conv-input{ flex:1;background:var(--bg2);border:1px solid var(--border); border-radius:12px;padding:.7rem 1rem;color:var(--text); font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:700; outline:none;-webkit-appearance:none; } .conv-input:focus{border-color:var(--sea);box-shadow:0 0 0 3px rgba(255,255,255,0.07)} .conv-select{ width:90px;background:var(--bg2);border:1px solid var(--border); border-radius:12px;padding:.7rem .5rem;color:var(--sand); font-family:'Space Grotesk',sans-serif;font-size:.9rem;font-weight:700; outline:none;cursor:pointer;-webkit-appearance:none; text-align:center; } .conv-select:focus{border-color:var(--sand)} .conv-swap{ display:flex;justify-content:center;margin-bottom:.8rem; } .conv-swap-btn{ background:var(--bg2);border:1px solid var(--border); border-radius:50%;width:40px;height:40px; display:flex;align-items:center;justify-content:center; cursor:pointer;font-size:1.2rem;transition:all .2s;color:var(--sea); } .conv-swap-btn:active{transform:rotate(180deg);background:var(--sea);color:#fff} .conv-result{ text-align:center;font-family:'Space Grotesk',sans-serif; font-size:1.8rem;font-weight:800;color:var(--sand); padding:.5rem;min-height:2.5rem; } /* ============ VISA & INFO SCREEN ============ */ .news-list{display:flex;flex-direction:column;gap:.75rem} .info-card{ background:linear-gradient(145deg,rgba(255,255,255,0.14) 0%,rgba(255,255,255,0.08) 100%); border:1px solid rgba(255,255,255,0.16); border-radius:var(--r);overflow:hidden;transition:border-color .25s,box-shadow .25s,max-height .35s cubic-bezier(.4,0,.2,1); backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px); box-shadow:0 2px 4px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(255,255,255,0.03); position:relative; } .info-card::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--sea),var(--sand)); border-radius:3px;opacity:.4;transition:opacity .35s; } .info-card.open::before{opacity:1} .info-card::after{ content:'';position:absolute;top:0;left:0;right:0;height:50%; background:linear-gradient(180deg,rgba(255,255,255,0.06) 0%,transparent 100%); pointer-events:none;border-radius:var(--r) var(--r) 0 0; } .info-card.open{ border-color:rgba(0,229,184,0.3); box-shadow:0 4px 8px rgba(0,0,0,0.25), 0 12px 36px rgba(0,229,184,0.15), 0 0 0 1px rgba(0,229,184,0.08), inset 0 1px 0 rgba(255,255,255,0.08); transform:scale(1.01); } .info-header{ display:flex;align-items:center;gap:.8rem;padding:1.15rem 1.1rem 1.15rem 1.2rem;cursor:pointer; -webkit-tap-highlight-color:transparent;user-select:none; position:relative;z-index:1; } .info-header:active{background:rgba(255,255,255,0.04)} .info-icon{ font-size:1.6rem;flex-shrink:0;width:2.8rem;height:2.8rem; display:flex;align-items:center;justify-content:center; background:rgba(0,229,184,0.1);border-radius:14px; transition:all .35s; box-shadow:0 2px 8px rgba(0,229,184,0.08); } .info-card.open .info-icon{ background:rgba(0,229,184,0.18); box-shadow:0 0 16px rgba(0,229,184,0.25); transform:scale(1.12); } .info-title{flex:1;font-weight:600;font-size:.88rem;color:var(--text);line-height:1.4;transition:color .3s} .info-card.open .info-title{color:var(--sea)} .info-arrow{ color:var(--text3);font-size:.65rem;transition:all .4s cubic-bezier(.4,0,.2,1); flex-shrink:0;width:1.6rem;height:1.6rem; display:flex;align-items:center;justify-content:center; border-radius:50%;background:rgba(255,255,255,0.03); } .info-card.open .info-arrow{ transform:rotate(180deg); background:rgba(0,229,184,0.1);color:var(--sea); } .info-body{ max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1); position:relative; } .info-body-inner{ padding:0 1rem 1.2rem 3.5rem;font-size:.82rem;line-height:1.7;color:var(--text2); position:relative;z-index:1; } .info-body-inner a{ color:var(--sea);text-decoration:none; border-bottom:1px dotted rgba(0,229,184,0.3);transition:border-color .2s; } .info-body-inner a:hover, .info-body-inner a:active{border-color:var(--sea);text-decoration:none} .info-body-inner ul{margin:.5rem 0;padding-left:1.1rem} .info-body-inner li{margin-bottom:.4rem} .info-body-inner li::marker{color:var(--sea)} .info-body-inner b{color:var(--text)} .info-body-inner .info-highlight{ display:inline-block; background:linear-gradient(135deg,rgba(0,229,184,0.15),rgba(0,229,184,0.08)); color:var(--sea); padding:.2rem .6rem;border-radius:8px;font-weight:600;font-size:.78rem;margin:.3rem 0; box-shadow:0 0 8px rgba(0,229,184,0.1); border:1px solid rgba(0,229,184,0.12); } .info-card:nth-child(1){animation-delay:.03s} .info-card:nth-child(2){animation-delay:.07s} .info-card:nth-child(3){animation-delay:.11s} .info-card:nth-child(4){animation-delay:.15s} .info-card:nth-child(5){animation-delay:.19s} .info-card:nth-child(6){animation-delay:.23s} .info-card:nth-child(7){animation-delay:.27s} .info-card:nth-child(8){animation-delay:.31s} .info-card:nth-child(9){animation-delay:.35s} .info-card:nth-child(10){animation-delay:.39s} /* ============ SOS SCREEN ============ */ .sos-list{display:flex;flex-direction:column;gap:.6rem} .sos-card{ display:flex;align-items:center;gap:.8rem; background:linear-gradient(145deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.07) 100%); border:1px solid rgba(255,255,255,0.14); backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px); border-radius:var(--r);padding:1rem; transition:border-color .2s,box-shadow .2s,transform .15s; box-shadow:inset 0 1px 0 rgba(255,255,255,0.13), inset 0 -1px 0 rgba(255,255,255,0.03), 0 4px 16px rgba(0,0,0,0.2); position:relative;overflow:hidden; } .sos-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:45%; background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03) 50%,transparent); pointer-events:none;border-radius:var(--r) var(--r) 0 0; } .sos-card:active{background:var(--card2);box-shadow:0 2px 16px rgba(255,80,80,0.1)} .sc-icon{font-size:1.6rem;flex-shrink:0} .sc-info{flex:1;min-width:0} .sc-name{font-weight:700;font-size:.9rem} .sc-desc{font-size:.75rem;color:var(--text2)} .sc-phone{ font-family:'Space Grotesk',sans-serif;font-weight:800; font-size:1.05rem;color:var(--coral);text-decoration:none;flex-shrink:0; } .sc-phone:active{color:#ff4444} /* ============ BACK BUTTON ============ */ .back-row{ display:flex;align-items:center;gap:.5rem;margin-bottom:1rem; cursor:pointer;color:var(--sea);font-weight:600;font-size:.85rem; } .back-row:active{color:var(--coral)} .back-row svg{width:18px;height:18px;fill:currentColor} /* ============ RESPONSIVE ============ */ @media(min-width:500px){ .cat-grid .cat-card{width:calc(25% - .375rem)} .screens{max-width:600px;margin:0 auto} } @media(min-width:700px){ .cat-grid .cat-card{width:calc(20% - .4rem)} } /* ============ EXTRA VISUAL EFFECTS ============ */ /* Shimmer keyframe for reuse */ @keyframes shimmer{ 0%{background-position:-200% 0} 100%{background-position:200% 0} } @keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } @keyframes glowPulse{ 0%,100%{box-shadow:0 0 8px rgba(255,255,255,0.07)} 50%{box-shadow:0 0 20px rgba(255,255,255,0.12)} } @keyframes breathe{ 0%,100%{opacity:.6} 50%{opacity:1} } /* Topbar logo shimmer */ .topbar-logo .t1{ background:linear-gradient(90deg,var(--sea) 0%,var(--sky) 40%,var(--sea) 80%); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 0 4px rgba(54,215,183,0.15)); } .topbar-logo .t2{ background:linear-gradient(90deg,var(--sand) 0%,#ffe4a0 40%,var(--sand) 80%); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 0 4px rgba(245,166,35,0.12)); } /* Weather banner — subtle float + glow */ .weather-banner{ transition:transform .3s,box-shadow .3s; } .weather-banner:active{transform:scale(.98)} .wb-temp{ text-shadow:0 0 20px rgba(255,255,255,0.15); } /* Exchange chips — hover glow */ .exr-chip{ transition:all .3s cubic-bezier(.4,0,.2,1); } .exr-chip:active{ transform:scale(1.05); box-shadow:0 4px 20px rgba(255,209,102,0.2); border-color:rgba(255,209,102,0.35); } .exr-val{ text-shadow:0 0 8px rgba(255,209,102,0.3); } /* Category cards — spin effect removed, gloss via main ::before */ /* Cat icon float on home */ .cat-card .cat-icon{transition:transform .3s} .cat-card:active .cat-icon{animation:floatY .5s ease} /* Tip bubbles — gradient border shimmer */ .tip-bubble{ background:linear-gradient(135deg,var(--card),var(--card2)); position:relative; } .tip-bubble::after{ content:'';position:absolute;inset:0;border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,0.025),rgba(255,209,102,0.05),rgba(255,107,53,0.03)); opacity:0;transition:opacity .4s;pointer-events:none; } .tip-bubble:active::after{opacity:1} /* Section title — subtle line accent */ .sec-title::after{ content:'';flex:1;height:1px; background:linear-gradient(90deg,rgba(255,255,255,0.1),transparent 80%); margin-left:.5rem; } /* Place cards — left accent glow. `transition:all` was here; replaced with explicit properties so that the .fav-hl glow animation isn't suppressed/competed-with by transition. */ .place-card{ transition:border-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),transform .15s ease; } .place-card:active{ box-shadow:inset -4px 0 24px rgba(255,255,255,0.06),0 4px 20px rgba(0,0,0,0.2); } /* Active pill glow pulse */ .pill.active{ } .pill[data-cat].active{color:#fff!important} @keyframes pillGlow{ 0%,100%{box-shadow:0 4px 20px rgba(255,255,255,0.12)} 50%{box-shadow:0 4px 28px rgba(255,255,255,0.2)} } /* Place link button shimmer */ .pc-link{ position:relative;overflow:hidden; } .pc-link::after{display:none} @keyframes btnShine{ 0%,70%,100%{left:-100%} 30%{left:120%} } /* Home action buttons — subtle glow */ .geo-btn{ transition:all .25s cubic-bezier(.4,0,.2,1); } .geo-btn:active{ box-shadow:0 0 16px rgba(255,255,255,0.12); } .donate-home-btn:active{ box-shadow:0 0 16px rgba(255,209,102,0.3)!important; } /* ===== HOME — enhanced visual effects ===== */ /* Exchange chips — stagger entrance */ .exr-chip{animation:chipIn .4s cubic-bezier(.4,0,.2,1) both} .exr-chip:nth-child(1){animation-delay:.05s} .exr-chip:nth-child(2){animation-delay:.1s} .exr-chip:nth-child(3){animation-delay:.15s} .exr-chip:nth-child(4){animation-delay:.2s} .exr-chip:nth-child(5){animation-delay:.25s} @keyframes chipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* Exchange value — subtle golden pulse */ .exr-val{} @keyframes valPulse{ 0%,100%{opacity:1} 50%{opacity:.8;text-shadow:0 0 10px rgba(255,209,102,0.35)} } /* Category cards — gradient hover glow per card */ .cat-card:active{ border-color:rgba(255,255,255,0.15); box-shadow:0 0 18px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.06); } /* Category group title — accent dot color cycle */ .cg-title .dot{} @keyframes dotColor{ 0%,100%{background:var(--sea)} 33%{background:var(--sand)} 66%{background:var(--coral)} } /* Cat icon — subtle float idle */ .cat-icon{} @keyframes iconFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} } /* Geo buttons — glass reflection line */ .geo-btn::before{ content:'';position:absolute;top:0;left:0;right:0;height:50%; background:linear-gradient(180deg,rgba(255,255,255,0.06),transparent); border-radius:14px 14px 0 0;pointer-events:none; } .geo-btn{position:relative;overflow:hidden} /* Donate button — warm idle shimmer */ .donate-home-btn::after{ content:'';position:absolute;top:0;left:-100%;width:50%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,209,102,0.12),transparent); pointer-events:none; } @keyframes donateShine{ 0%,80%,100%{left:-100%} 40%{left:150%} } /* Tip bubbles — soft glow on left border */ .tip-bubble{ border-left:2px solid rgba(0,229,184,0.2); } .tip-bubble:active{ border-left-color:var(--sea); box-shadow:0 0 16px rgba(0,229,184,0.08); } /* Section titles — clean text on home */ #scrHome .sec-title span[data-i18n]{ color:var(--text); font-weight:700; } /* Smooth scroll fade at edges */ .exchange-row,.tips-scroll{position:relative} .exchange-row::before,.exchange-row::after{ content:'';position:absolute;top:0;bottom:0;width:16px;z-index:2;pointer-events:none; } .exchange-row::before{left:0;background:none} .exchange-row::after{right:0;background:none} /* ===== NIGHTCLUBS & CONCERTS — party vibes ===== */ /* Neon glow accent bar — purple/pink for nightclubs */ #exploreContent[data-cat="nightclubs"] .place-card::before{ background:linear-gradient(180deg,#bf5af2,#ff375f); } #exploreContent[data-cat="nightclubs"] .place-card{ border-color:rgba(191,90,242,0.12); } #exploreContent[data-cat="nightclubs"] .place-card:active{ border-color:rgba(191,90,242,0.3); box-shadow:0 0 24px rgba(191,90,242,0.1), 0 0 48px rgba(255,55,95,0.05); } /* Nightclub card name — neon text */ #exploreContent[data-cat="nightclubs"] .pc-name{ background:linear-gradient(135deg,#e0c3fc,#fff,#fbc2eb); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } @keyframes neonText{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} } /* Nightclub price badge — neon style */ #exploreContent[data-cat="nightclubs"] .pc-price{ background:rgba(191,90,242,0.15);color:#d8a8ff; box-shadow:0 0 8px rgba(191,90,242,0.1); } /* Nightclub — ambient glow on the list */ #exploreContent[data-cat="nightclubs"] .place-list{ position:relative; } #exploreContent[data-cat="nightclubs"] .place-list::before{ content:'';position:absolute;top:10%;left:-20%;width:60%;height:40%; background:radial-gradient(ellipse,rgba(191,90,242,0.04),transparent 70%); pointer-events:none;z-index:0; } #exploreContent[data-cat="nightclubs"] .place-list::after{ content:'';position:absolute;bottom:10%;right:-20%;width:60%;height:40%; background:radial-gradient(ellipse,rgba(255,55,95,0.03),transparent 70%); pointer-events:none;z-index:0; } /* Karaoke — cyan/pink neon accent */ #exploreContent[data-cat="karaoke"] .place-card::before{background:linear-gradient(180deg,#36D7B7,#ff6b9d)} #exploreContent[data-cat="karaoke"] .place-card{border-color:rgba(54,215,183,0.12)} #exploreContent[data-cat="karaoke"] .place-card:active{border-color:rgba(54,215,183,0.3);box-shadow:0 0 24px rgba(54,215,183,0.1)} /* Fast Food — soft (no bright white outline) like the rest of the cards there */ #exploreContent[data-cat="fast_food"] .place-card{border-color:var(--card-bdr-soft)} #exploreContent[data-cat="karaoke"] .pc-name{background:linear-gradient(135deg,#A7F3D0,#fff,#FBCFE8);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} #exploreContent[data-cat="karaoke"] .pc-price{background:rgba(54,215,183,0.15);color:#5EEAD4;box-shadow:0 0 8px rgba(54,215,183,0.1)} .pill[data-cat="karaoke"].active{background:rgba(54,215,183,0.28)!important;border-color:rgba(54,215,183,0.45)!important;color:#fff!important;box-shadow:0 0 16px rgba(54,215,183,0.3) backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } /* Concerts — warm amber/orange accent */ #exploreContent[data-cat="concerts"] .place-card::before{ background:linear-gradient(180deg,#ff9f0a,#ff375f); } #exploreContent[data-cat="concerts"] .place-card{ border-color:rgba(255,159,10,0.12); } #exploreContent[data-cat="concerts"] .place-card:active{ border-color:rgba(255,159,10,0.3); box-shadow:0 0 24px rgba(255,159,10,0.1), 0 0 48px rgba(255,55,95,0.05); } /* Concert card name — warm shimmer */ #exploreContent[data-cat="concerts"] .pc-name{ background:linear-gradient(135deg,#ffecd2,#fff,#fcb69f); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } /* Concert price badge — warm */ #exploreContent[data-cat="concerts"] .pc-price{ background:rgba(255,159,10,0.15);color:#ffc470; box-shadow:0 0 8px rgba(255,159,10,0.1); } /* Concert — stage spotlight ambient */ #exploreContent[data-cat="concerts"] .place-list{position:relative} #exploreContent[data-cat="concerts"] .place-list::before{ content:'';position:absolute;top:0;left:50%;width:80%;height:30%; transform:translateX(-50%); background:radial-gradient(ellipse at center top,rgba(255,159,10,0.04),transparent 70%); pointer-events:none;z-index:0; } /* Active pill glow — purple for nightclubs */ .pill[data-cat="nightclubs"].active{ background:rgba(191,90,242,0.28)!important; border-color:rgba(191,90,242,0.45)!important; color:#fff!important; box-shadow:0 0 16px rgba(191,90,242,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } /* Active pill glow — amber for concerts */ .pill[data-cat="concerts"].active{ background:rgba(255,159,10,0.28)!important; border-color:rgba(255,159,10,0.45)!important; color:#fff!important; box-shadow:0 0 16px rgba(255,159,10,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } #exploreContent[data-cat="nightclubs"] .pc-link{ border-color:rgba(191,90,242,0.3);color:#d8a8ff; } #exploreContent[data-cat="nightclubs"] .pc-link::after{ background:linear-gradient(90deg,transparent,rgba(191,90,242,0.12),transparent); } #exploreContent[data-cat="concerts"] .pc-link{ border-color:rgba(255,159,10,0.3);color:#ffc470; } #exploreContent[data-cat="concerts"] .pc-link::after{ background:linear-gradient(90deg,transparent,rgba(255,159,10,0.12),transparent); } /* ===== CASINOS — gold & emerald luxury ===== */ #exploreContent[data-cat="casinos"] .place-card::before{ background:linear-gradient(180deg,#ffd700,#00c853); } #exploreContent[data-cat="casinos"] .place-card{ border-color:rgba(255,215,0,0.12); } #exploreContent[data-cat="casinos"] .place-card:active{ border-color:rgba(255,215,0,0.3); box-shadow:0 0 24px rgba(255,215,0,0.1), 0 0 48px rgba(0,200,83,0.05); } #exploreContent[data-cat="casinos"] .pc-name{ background:linear-gradient(135deg,#fceabb,#fff,#f8b500); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } #exploreContent[data-cat="casinos"] .pc-price{ background:rgba(255,215,0,0.15);color:#ffd700; box-shadow:0 0 8px rgba(255,215,0,0.1); } #exploreContent[data-cat="casinos"] .place-list{position:relative} #exploreContent[data-cat="casinos"] .place-list::before{ content:'';position:absolute;top:5%;left:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(255,215,0,0.04),transparent 70%); pointer-events:none;z-index:0; } #exploreContent[data-cat="casinos"] .place-list::after{ content:'';position:absolute;bottom:10%;right:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(0,200,83,0.03),transparent 70%); pointer-events:none;z-index:0; } .pill[data-cat="casinos"].active{ background:rgba(255,215,0,0.28)!important; border-color:rgba(255,215,0,0.45)!important; color:#fff!important; box-shadow:0 0 16px rgba(255,215,0,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } #exploreContent[data-cat="casinos"] .pc-link{ border-color:rgba(255,215,0,0.3);color:#ffd700; } #exploreContent[data-cat="casinos"] .pc-link::after{ background:linear-gradient(90deg,transparent,rgba(255,215,0,0.12),transparent); } /* ===== SPORTS — electric blue & cyan ===== */ #exploreContent[data-cat="sports"] .place-card::before{ background:linear-gradient(180deg,#00b4d8,#0077b6); } #exploreContent[data-cat="sports"] .place-card{ border-color:rgba(0,180,216,0.12); } #exploreContent[data-cat="sports"] .place-card:active{ border-color:rgba(0,180,216,0.3); box-shadow:0 0 24px rgba(0,180,216,0.1), 0 0 48px rgba(0,119,182,0.05); } #exploreContent[data-cat="sports"] .pc-name{ background:linear-gradient(135deg,#caf0f8,#fff,#90e0ef); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } #exploreContent[data-cat="sports"] .pc-price{ background:rgba(0,180,216,0.15);color:#90e0ef; box-shadow:0 0 8px rgba(0,180,216,0.1); } #exploreContent[data-cat="sports"] .place-list{position:relative} #exploreContent[data-cat="sports"] .place-list::before{ content:'';position:absolute;top:5%;left:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(0,180,216,0.04),transparent 70%); pointer-events:none;z-index:0; } #exploreContent[data-cat="sports"] .place-list::after{ content:'';position:absolute;bottom:10%;right:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(0,119,182,0.03),transparent 70%); pointer-events:none;z-index:0; } .pill[data-cat="sports"].active{ background:rgba(0,180,216,0.28)!important; border-color:rgba(0,180,216,0.45)!important; color:#fff!important; box-shadow:0 0 16px rgba(0,180,216,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } #exploreContent[data-cat="sports"] .pc-link{border-color:rgba(0,180,216,0.3);color:#90e0ef} #exploreContent[data-cat="sports"] .pc-link::after{ background:linear-gradient(90deg,transparent,rgba(0,180,216,0.12),transparent); } /* Sports — compact event cards */ #exploreContent[data-cat="sports"] .sports-head{ display:flex;justify-content:space-between;align-items:baseline; gap:.6rem;margin:-.2rem .2rem .7rem; } #exploreContent[data-cat="sports"] .sports-title{ font-size:.92rem;font-weight:800;letter-spacing:.3px; background:linear-gradient(135deg,#90e0ef,#ffffff,#caf0f8); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } #exploreContent[data-cat="sports"] .sports-upd{ flex-shrink:0;font-size:.58rem;color:var(--text3);opacity:.75; font-variant-numeric:tabular-nums;white-space:nowrap; } #exploreContent[data-cat="sports"] .sports-grp{ display:flex;align-items:center;gap:.45rem; font-size:.66rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase; color:var(--text2);margin:.9rem .2rem .45rem; } #exploreContent[data-cat="sports"] .sports-grp:first-of-type{margin-top:.2rem} #exploreContent[data-cat="sports"] .sports-grp-cnt{ min-width:1.2rem;padding:.05rem .4rem;border-radius:999px; background:rgba(0,180,216,0.16);color:#90e0ef; font-size:.58rem;font-weight:800;text-align:center; } #exploreContent[data-cat="sports"] .sports-grp-line{ flex:1;height:1px;background:linear-gradient(90deg,rgba(0,180,216,0.16),transparent); } #exploreContent[data-cat="sports"] .sport-card{ position:relative;padding:.6rem .7rem .55rem;margin-bottom:.5rem; background:linear-gradient(135deg,rgba(255,255,255,0.035),rgba(255,255,255,0.012)); border:1px solid rgba(255,255,255,0.06); border-left:3px solid var(--sport-clr,#00b4d8); border-radius:12px;display:flex;flex-direction:column;gap:.3rem; transition:transform .2s ease,border-color .2s ease; } #exploreContent[data-cat="sports"] .sport-card.is-live{ background:linear-gradient(135deg,rgba(74,222,128,0.09),rgba(255,255,255,0.012)); box-shadow:inset 0 0 24px rgba(74,222,128,0.05),0 2px 10px rgba(0,0,0,0.12); } #exploreContent[data-cat="sports"] .sport-card.is-batumi:not(.is-live){ background:linear-gradient(135deg,rgba(54,215,183,0.06),rgba(255,255,255,0.012)); } #exploreContent[data-cat="sports"] .sport-card:active{transform:scale(.99)} #exploreContent[data-cat="sports"] .sport-row1{ display:flex;align-items:center;gap:.55rem;padding-right:4.6rem;min-height:1.9rem; } #exploreContent[data-cat="sports"] .sport-icon{ flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:9px; display:flex;align-items:center;justify-content:center;font-size:1.05rem; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25)); } #exploreContent[data-cat="sports"] .sport-title{ flex:1;min-width:0;font-size:.85rem;font-weight:700;line-height:1.25; color:#eaeaea;word-break:break-word;overflow-wrap:anywhere; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } #exploreContent[data-cat="sports"] .sport-home-ico{font-size:.78rem;opacity:.9;margin-left:.15rem} #exploreContent[data-cat="sports"] .sport-badge{ flex:0 0 auto;font-size:.55rem;font-weight:800;letter-spacing:.6px; padding:.2rem .45rem;border-radius:6px;text-transform:uppercase; display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap; } #exploreContent[data-cat="sports"] .sport-badge.bLive{ color:#4ade80;background:rgba(74,222,128,0.18);animation:pulse 1.8s ease-in-out infinite; } #exploreContent[data-cat="sports"] .sport-badge.bLive::before{ content:'';width:6px;height:6px;border-radius:50%;background:#4ade80; box-shadow:0 0 6px #4ade80; } #exploreContent[data-cat="sports"] .sport-badge.bSoon{ color:#ff9b9b;background:rgba(255,107,107,0.22); box-shadow:0 0 10px rgba(255,107,107,0.18); animation:pulse 2.2s ease-in-out infinite; } #exploreContent[data-cat="sports"] .sport-badge.bSoon::before{ content:'';width:6px;height:6px;border-radius:50%;background:#ff6b6b; box-shadow:0 0 6px #ff6b6b; } #exploreContent[data-cat="sports"] .sport-card > .sport-badge{ align-self:flex-start;margin:.05rem 0 .05rem 0; font-size:.54rem;padding:.18rem .42rem;letter-spacing:.55px; } #exploreContent[data-cat="sports"] .sport-row2{ display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .55rem; font-size:.68rem;color:var(--text2);padding-left:2.45rem; } #exploreContent[data-cat="sports"] .sport-date{ font-weight:700;font-variant-numeric:tabular-nums;color:var(--sport-clr,#90e0ef); } #exploreContent[data-cat="sports"] .sport-time{ font-weight:700;font-variant-numeric:tabular-nums;color:var(--sport-clr,#90e0ef);opacity:.9; padding:.06rem .4rem;border-radius:6px;background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); } #exploreContent[data-cat="sports"] .sport-tix{opacity:.82;font-size:.66rem} #exploreContent[data-cat="sports"] .sport-desc-wrap{ padding-left:2.45rem; } #exploreContent[data-cat="sports"] .sport-desc{ font-size:.72rem;line-height:1.42;color:var(--text2);opacity:.86; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } #exploreContent[data-cat="sports"] .sport-desc-wrap.is-expanded .sport-desc{ display:block;-webkit-line-clamp:initial;overflow:visible; white-space:pre-line;opacity:.95; } #exploreContent[data-cat="sports"] .sport-more-btn{ -webkit-appearance:none;appearance:none; background:transparent;border:0;padding:.18rem 0 .02rem;margin-top:.18rem; font-size:.68rem;font-weight:600;letter-spacing:.15px; color:var(--sport-clr,#90e0ef);opacity:.85;cursor:pointer; -webkit-tap-highlight-color:transparent;line-height:1.2; display:inline-block; } #exploreContent[data-cat="sports"] .sport-more-btn:hover{opacity:1;text-decoration:underline} #exploreContent[data-cat="sports"] .sport-more-btn:active{opacity:1} body.light-theme #exploreContent[data-cat="sports"] .sport-more-btn{color:#0e7490} #exploreContent[data-cat="sports"] .sport-venue-row{ padding-left:2.45rem;font-size:.66rem;color:var(--text3);opacity:.75; display:flex;align-items:center;gap:.25rem; } #exploreContent[data-cat="sports"] .sport-foot{ display:flex;align-items:center;gap:.45rem;padding-left:0;margin-top:.1rem;min-height:1.25rem; } #exploreContent[data-cat="sports"] .sport-src{ margin-left:auto;font-size:.58rem;opacity:.6; color:#90e0ef;text-decoration:none;white-space:nowrap; } #exploreContent[data-cat="sports"] .sport-src:active{opacity:.95} /* Sports — city filter chips (mirror concerts chips, cyan palette) */ #exploreContent[data-cat="sports"] .sports-chips{ display:flex;gap:.35rem;flex-wrap:wrap; margin:.15rem .05rem .8rem; } #exploreContent[data-cat="sports"] .sports-chip{ -webkit-appearance:none;appearance:none; padding:.32rem .7rem;border-radius:999px; font-size:.66rem;font-weight:600;letter-spacing:.15px; color:var(--text2); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease; -webkit-tap-highlight-color:transparent; line-height:1;display:inline-flex;align-items:center;gap:.25rem; } #exploreContent[data-cat="sports"] .sports-chip:active{transform:scale(.97)} #exploreContent[data-cat="sports"] .sports-chip.is-active{ color:#0e2730;background:linear-gradient(135deg,#9ee9f6,#38BDF8); border-color:rgba(56,189,248,0.55); box-shadow:0 1px 6px rgba(56,189,248,0.2); } #exploreContent[data-cat="sports"] .sports-chip-cnt{ font-variant-numeric:tabular-nums;opacity:.75;font-size:.6rem; } #exploreContent[data-cat="sports"] .sports-chip.is-active .sports-chip-cnt{opacity:.85;color:rgba(0,0,0,0.6)} body.light-theme #exploreContent[data-cat="sports"] .sports-chip{ color:#0b3a4a;background:rgba(0,180,216,0.06);border-color:rgba(0,180,216,0.18); } body.light-theme #exploreContent[data-cat="sports"] .sports-chip.is-active{ color:#06222d;background:linear-gradient(135deg,#bdeefb,#38BDF8);border-color:rgba(56,189,248,0.65); } /* Concerts — compact event cards (mirrors sports layout, warm amber palette) */ /* ===== CONCERTS — clean premium redesign (2026-05-24) ===== */ /* Compact hero: emoji icon + title (gradient) + 1-line subtitle + tiny "updated". No big region boxes, no 3-4 stacked headings. */ #exploreContent[data-cat="concerts"] .concerts-hero{ display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.55rem;row-gap:.15rem; margin:-.1rem .15rem .55rem; } #exploreContent[data-cat="concerts"] .concerts-hero-ico{ font-size:1.05rem;line-height:1;flex:0 0 auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25)); } #exploreContent[data-cat="concerts"] .concerts-hero-title{ font-family:'Space Grotesk','Inter',sans-serif; font-size:1.02rem;font-weight:800;letter-spacing:.2px;line-height:1.15; background:linear-gradient(135deg,#ffc470,#ffe7c2,#ffecd2); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; flex:0 1 auto; } #exploreContent[data-cat="concerts"] .concerts-hero-upd{ margin-left:auto;flex:0 0 auto;font-size:.56rem;color:var(--text3);opacity:.65; font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.2px; } #exploreContent[data-cat="concerts"] .concerts-hero-sub{ flex-basis:100%;font-size:.72rem;color:var(--text2);opacity:.82; line-height:1.4;margin-top:.1rem; } /* Chips filter row — pill, subtle, non-sticky */ #exploreContent[data-cat="concerts"] .concerts-chips{ display:flex;gap:.35rem;flex-wrap:wrap; margin:.15rem .05rem .8rem; } #exploreContent[data-cat="concerts"] .concerts-chip{ -webkit-appearance:none;appearance:none; padding:.32rem .7rem;border-radius:999px; font-size:.66rem;font-weight:600;letter-spacing:.15px; color:var(--text2); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease; -webkit-tap-highlight-color:transparent; line-height:1;display:inline-flex;align-items:center;gap:.25rem; } #exploreContent[data-cat="concerts"] .concerts-chip:active{transform:scale(.97)} #exploreContent[data-cat="concerts"] .concerts-chip.is-active{ color:#1a1a1a;background:linear-gradient(135deg,#ffd89a,#ffc470); border-color:rgba(255,196,112,0.55); box-shadow:0 1px 6px rgba(255,159,10,0.18); } #exploreContent[data-cat="concerts"] .concerts-chip-cnt{ font-variant-numeric:tabular-nums;opacity:.75;font-size:.6rem; } #exploreContent[data-cat="concerts"] .concerts-chip.is-active .concerts-chip-cnt{opacity:.8;color:rgba(0,0,0,0.65)} /* Section labels — small, calm, no boxes */ #exploreContent[data-cat="concerts"] .concerts-sec-lbl{ display:flex;align-items:center;gap:.5rem; margin:1.1rem .25rem .4rem; font-size:.66rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase; color:var(--text2);opacity:.78; } #exploreContent[data-cat="concerts"] .concerts-sec-lbl:first-child{margin-top:.1rem} #exploreContent[data-cat="concerts"] .concerts-sec-cnt{ font-size:.55rem;font-weight:800;padding:.05rem .42rem;border-radius:999px; background:rgba(255,196,112,0.14);color:#ffc470; } #exploreContent[data-cat="concerts"] .concerts-sec-line{ flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0.12),transparent); } /* Sub-group labels inside a section (Сейчас / На неделе / Позже) */ #exploreContent[data-cat="concerts"] .concerts-grp{ display:flex;align-items:center;gap:.42rem; font-size:.6rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase; color:var(--text3);margin:.7rem .25rem .35rem; } #exploreContent[data-cat="concerts"] .concerts-grp:first-child{margin-top:.1rem} #exploreContent[data-cat="concerts"] .concerts-grp-cnt{ min-width:1.05rem;padding:.02rem .35rem;border-radius:999px; background:rgba(255,255,255,0.06);color:var(--text2); font-size:.55rem;font-weight:800;text-align:center; } #exploreContent[data-cat="concerts"] .concerts-grp-line{ flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0.08),transparent); } /* Legacy region header is no longer rendered — hide if any old cached HTML still has it */ #exploreContent[data-cat="concerts"] .concerts-region-hd{display:none!important} #exploreContent[data-cat="concerts"] .concerts-head{display:none!important} /* Cards — lighter, more breathing room inside, less stripe weight */ #exploreContent[data-cat="concerts"] .concert-card{ position:relative;padding:.65rem .8rem .6rem;margin-bottom:.55rem; background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.008)); border:1px solid rgba(255,255,255,0.06); border-left:2px solid var(--concert-clr,#ff9f0a); border-radius:13px;display:flex;flex-direction:column;gap:.38rem; transition:transform .18s ease,border-color .18s ease,background .18s ease; } #exploreContent[data-cat="concerts"] .concert-card.is-live{ background:linear-gradient(180deg,rgba(255,159,10,0.07),rgba(255,255,255,0.008)); box-shadow:inset 0 0 22px rgba(255,159,10,0.05),0 2px 8px rgba(0,0,0,0.10); } #exploreContent[data-cat="concerts"] .concert-card.is-batumi:not(.is-live){ background:linear-gradient(180deg,rgba(255,159,10,0.035),rgba(255,255,255,0.008)); } #exploreContent[data-cat="concerts"] .concert-card.is-season{ border-left-style:dashed;opacity:.95; } #exploreContent[data-cat="concerts"] .concert-card:active{transform:scale(.992)} #exploreContent[data-cat="concerts"] .concert-row1{ display:flex;align-items:center;gap:.6rem;padding-right:4.4rem;min-height:1.9rem; } #exploreContent[data-cat="concerts"] .concert-icon{ flex:0 0 auto;width:1.85rem;height:1.85rem;border-radius:10px; display:flex;align-items:center;justify-content:center;font-size:1rem; background:rgba(255,255,255,0.04); filter:drop-shadow(0 1px 2px rgba(0,0,0,0.18)); } #exploreContent[data-cat="concerts"] .concert-title{ flex:1;min-width:0;font-size:.88rem;font-weight:700;line-height:1.22; color:var(--text);letter-spacing:.1px;word-break:break-word;overflow-wrap:anywhere; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } #exploreContent[data-cat="concerts"] .concert-home-ico{font-size:.78rem;opacity:.9;margin-left:.15rem} #exploreContent[data-cat="concerts"] .concert-badge{ flex:0 0 auto;font-size:.52rem;font-weight:800;letter-spacing:.6px; padding:.18rem .42rem;border-radius:6px;text-transform:uppercase; display:inline-flex;align-items:center;gap:.22rem;white-space:nowrap; } #exploreContent[data-cat="concerts"] .concert-badge.bLive{ color:#ff6b6b;background:rgba(255,107,107,0.16);animation:pulse 1.8s ease-in-out infinite; } #exploreContent[data-cat="concerts"] .concert-badge.bLive::before{ content:'';width:5px;height:5px;border-radius:50%;background:#ff6b6b; box-shadow:0 0 5px #ff6b6b; } #exploreContent[data-cat="concerts"] .concert-badge.bCancelled{ color:#ff5c5c;background:rgba(255,59,48,.18);border:1px solid rgba(255,92,92,.42); } #exploreContent[data-cat="concerts"] .concert-card.is-cancelled{ --concert-clr:#ff3b30;box-shadow:inset 0 0 0 1px rgba(255,59,48,.24); } #exploreContent[data-cat="concerts"] .concert-badge.bSoon{ color:#ffc470;background:rgba(255,159,10,0.16); animation:pulse 2.2s ease-in-out infinite; } #exploreContent[data-cat="concerts"] .concert-badge.bSoon::before{ content:'';width:5px;height:5px;border-radius:50%;background:#ff9f0a; } #exploreContent[data-cat="concerts"] .concert-badge.bSeason{ color:#9bb4ff;background:rgba(99,131,255,0.14); } #exploreContent[data-cat="concerts"] .concert-badge.bRecurring{ color:#36D7B7;background:rgba(54,215,183,0.14); } #exploreContent[data-cat="concerts"] .concert-card > .concert-badge{ align-self:flex-start;margin:.05rem 0 .05rem 0; font-size:.51rem;padding:.16rem .4rem;letter-spacing:.55px; } /* Meta row — date pill front, then time, venue separately below */ #exploreContent[data-cat="concerts"] .concert-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:.32rem .55rem; padding-left:2.45rem; } #exploreContent[data-cat="concerts"] .concert-date-pill{ display:inline-flex;align-items:center;gap:.3rem; font-size:.66rem;font-weight:700;letter-spacing:.15px;line-height:1; padding:.26rem .55rem;border-radius:8px; color:var(--concert-clr,#ffc470); background:rgba(255,196,112,0.10); border:1px solid rgba(255,196,112,0.18); font-variant-numeric:tabular-nums; } #exploreContent[data-cat="concerts"] .concert-date-pill .concert-time-in{ opacity:.85;font-weight:600;font-size:.62rem; } .event-countdown{display:block;width:max-content;max-width:calc(100% - 2.45rem);margin:.48rem 0 .05rem 2.45rem;color:var(--text3);font-family:'Space Grotesk',sans-serif;font-size:.64rem;font-weight:650;line-height:1.25;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em;white-space:nowrap;transition:color .35s ease,opacity .35s ease} .event-countdown.is-near{color:#c99a5d} .event-countdown.is-urgent{color:#e0a353;font-weight:720} body.light-theme .event-countdown{color:#65717a} body.light-theme .event-countdown.is-near{color:#9a6a2d} body.light-theme .event-countdown.is-urgent{color:#875713} @media(max-width:390px){.event-countdown{font-size:.62rem}} #exploreContent[data-cat="concerts"] .concert-tix{ font-size:.65rem;color:var(--text2);opacity:.82;text-decoration:none; line-height:1; } a.concert-tix{color:var(--text);opacity:.95;text-decoration:none} #exploreContent[data-cat="concerts"] .concert-venue-row{ display:flex;align-items:center;gap:.32rem; padding-left:2.45rem;margin-top:.1rem; font-size:.68rem;color:var(--text2);opacity:.78; max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #exploreContent[data-cat="concerts"] .concert-venue-row .addr-pin{ width:.85rem;height:.85rem;opacity:.7;flex:0 0 auto; } #exploreContent[data-cat="concerts"] .concert-venue-row .concert-venue-txt{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; } /* Description: 3-line clamp + explicit "More / Less" button (per-card state) */ #exploreContent[data-cat="concerts"] .concert-desc-wrap{ padding-left:2.45rem; } #exploreContent[data-cat="concerts"] .concert-desc{ font-size:.72rem;line-height:1.42;color:var(--text2);opacity:.86; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } #exploreContent[data-cat="concerts"] .concert-desc-wrap.is-expanded .concert-desc{ display:block;-webkit-line-clamp:initial;overflow:visible; white-space:pre-line;opacity:.95; } #exploreContent[data-cat="concerts"] .concert-more-btn{ -webkit-appearance:none;appearance:none; background:transparent;border:0;padding:.18rem 0 .02rem;margin-top:.18rem; font-size:.68rem;font-weight:600;letter-spacing:.15px; color:var(--concert-clr,#ffc470);opacity:.85;cursor:pointer; -webkit-tap-highlight-color:transparent;line-height:1.2; display:inline-block; } #exploreContent[data-cat="concerts"] .concert-more-btn:hover{opacity:1;text-decoration:underline} #exploreContent[data-cat="concerts"] .concert-more-btn:active{opacity:1} body.light-theme #exploreContent[data-cat="concerts"] .concert-more-btn{color:#a85f00} /* Footer — source left, map right; star/bookmark already handled by global helpers */ #exploreContent[data-cat="concerts"] .concert-foot{ display:flex;align-items:center;gap:.45rem; padding-left:2.45rem;margin-top:.1rem;min-height:1.2rem; } #exploreContent[data-cat="concerts"] .concert-foot > .pc-meta-l{flex:1;justify-content:flex-start} #exploreContent[data-cat="concerts"] .concert-foot > .pc-meta-r{flex:0 0 auto;justify-content:flex-end;margin-left:auto} #exploreContent[data-cat="concerts"] .concert-src{ font-size:.6rem;opacity:.55; color:var(--text2);text-decoration:none;white-space:nowrap; padding:.05rem 0; } #exploreContent[data-cat="concerts"] .concert-src:active{opacity:.95} /* Empty filter state */ #exploreContent[data-cat="concerts"] .concerts-empty{ padding:1.4rem 1rem;text-align:center; color:var(--text2);font-size:.78rem;opacity:.7; background:rgba(255,255,255,0.02);border:1px dashed rgba(255,255,255,0.08); border-radius:12px;margin:.4rem .15rem; } /* Light-theme tuning */ body.light-theme #exploreContent[data-cat="concerts"] .concerts-chip{ background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:#3a3a3a; } body.light-theme #exploreContent[data-cat="concerts"] .concerts-chip.is-active{ color:#1a1a1a;background:linear-gradient(135deg,#ffd89a,#ffc470);border-color:rgba(217,148,52,0.5); } body.light-theme #exploreContent[data-cat="concerts"] .concert-card{ background:linear-gradient(180deg,rgba(0,0,0,0.025),rgba(0,0,0,0.008)); border-color:rgba(0,0,0,0.08); } body.light-theme #exploreContent[data-cat="concerts"] .concert-icon{ background:rgba(0,0,0,0.04); } body.light-theme #exploreContent[data-cat="concerts"] .concert-date-pill{ color:#a85f00;background:rgba(255,196,112,0.18);border-color:rgba(217,148,52,0.32); } body.light-theme #exploreContent[data-cat="concerts"] .concerts-hero-title{ background:linear-gradient(135deg,#a85f00,#c2761e,#a85f00); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } /* ===== SHOPPING — rose & magenta ===== */ #exploreContent[data-cat="shopping"] .place-card::before{ background:linear-gradient(180deg,#f72585,#b5179e); } #exploreContent[data-cat="shopping"] .place-card{ border-color:rgba(247,37,133,0.12); } #exploreContent[data-cat="shopping"] .place-card:active{ border-color:rgba(247,37,133,0.3); box-shadow:0 0 24px rgba(247,37,133,0.1), 0 0 48px rgba(181,23,158,0.05); } #exploreContent[data-cat="shopping"] .pc-name{ background:linear-gradient(135deg,#ffc8dd,#fff,#ffafcc); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } #exploreContent[data-cat="shopping"] .pc-price{ background:rgba(247,37,133,0.15);color:#ffafcc; box-shadow:0 0 8px rgba(247,37,133,0.1); } #exploreContent[data-cat="shopping"] .place-list{position:relative} #exploreContent[data-cat="shopping"] .place-list::before{ content:'';position:absolute;top:5%;left:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(247,37,133,0.04),transparent 70%); pointer-events:none;z-index:0; } #exploreContent[data-cat="shopping"] .place-list::after{ content:'';position:absolute;bottom:10%;right:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(181,23,158,0.03),transparent 70%); pointer-events:none;z-index:0; } .pill[data-cat="shopping"].active{ background:rgba(247,37,133,0.28)!important; border-color:rgba(247,37,133,0.45)!important; color:#fff!important; box-shadow:0 0 16px rgba(247,37,133,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } #exploreContent[data-cat="shopping"] .pc-link{border-color:rgba(247,37,133,0.3);color:#ffafcc} #exploreContent[data-cat="shopping"] .pc-link::after{ background:linear-gradient(90deg,transparent,rgba(247,37,133,0.12),transparent); } /* ===== BEAUTY / SPA — teal & rose gold ===== */ #exploreContent[data-cat="beauty"] .place-card::before{ background:linear-gradient(180deg,#2dd4bf,#14b8a6); } #exploreContent[data-cat="beauty"] .place-card{border-color:rgba(54,215,183,0.12)} #exploreContent[data-cat="beauty"] .place-card:active{ border-color:rgba(54,215,183,0.3); box-shadow:0 0 24px rgba(54,215,183,0.1), 0 0 48px rgba(40,181,160,0.05); } #exploreContent[data-cat="beauty"] .pc-name{ background:linear-gradient(135deg,#6EEBCF,#fff,#5EEAD4); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } #exploreContent[data-cat="beauty"] .pc-price{background:rgba(54,215,183,0.15);color:#5EEAD4;box-shadow:0 0 8px rgba(54,215,183,0.1)} #exploreContent[data-cat="beauty"] .place-list{position:relative} #exploreContent[data-cat="beauty"] .place-list::before{ content:'';position:absolute;top:5%;left:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(54,215,183,0.04),transparent 70%);pointer-events:none;z-index:0; } #exploreContent[data-cat="beauty"] .place-list::after{ content:'';position:absolute;bottom:10%;right:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(40,181,160,0.03),transparent 70%); pointer-events:none;z-index:0; } .pill[data-cat="beauty"].active{ background:rgba(54,215,183,0.28)!important; border-color:rgba(54,215,183,0.45)!important; color:#fff!important; box-shadow:0 0 16px rgba(54,215,183,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } #exploreContent[data-cat="beauty"] .pc-link{border-color:rgba(54,215,183,0.3);color:#5EEAD4} #exploreContent[data-cat="beauty"] .pc-link::after{ background:linear-gradient(90deg,transparent,rgba(54,215,183,0.12),transparent); } /* ===== CAFES / BARS — warm copper & amber ===== */ #exploreContent[data-cat="cafes"] .place-card::before{ background:linear-gradient(180deg,#e8a87c,#d35400); } #exploreContent[data-cat="cafes"] .place-card{border-color:rgba(232,168,124,0.12)} #exploreContent[data-cat="cafes"] .place-card:active{ border-color:rgba(232,168,124,0.3); box-shadow:0 0 24px rgba(232,168,124,0.1), 0 0 48px rgba(211,84,0,0.05); } #exploreContent[data-cat="cafes"] .pc-name{ background:linear-gradient(135deg,#fde2c8,#fff,#e8a87c); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } #exploreContent[data-cat="cafes"] .pc-price{background:rgba(232,168,124,0.15);color:#e8a87c;box-shadow:0 0 8px rgba(232,168,124,0.1)} #exploreContent[data-cat="cafes"] .place-list{position:relative} #exploreContent[data-cat="cafes"] .place-list::before{ content:'';position:absolute;top:5%;left:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(232,168,124,0.04),transparent 70%);pointer-events:none;z-index:0; } .pill[data-cat="cafes"].active{ background:rgba(232,168,124,0.28)!important;border-color:rgba(232,168,124,0.45)!important; color:#fff!important;box-shadow:0 0 16px rgba(232,168,124,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } #exploreContent[data-cat="cafes"] .pc-link{border-color:rgba(232,168,124,0.3);color:#e8a87c} /* ===== BARS — lavender & violet ===== */ /* 2026-05-19: bars used to share styling with cafes (legacy "Бары и кафе"); after the split, bars cards inherited the bright default white border (rgba(255,255,255,0.18)) which looked too harsh against the dark theme. Mirror the cafes/restaurants theming pattern with the lavender accent that's already used for `.subcat-chip-bar[data-cat="bars"]` and `.hotel-kind-select[data-cat="bars"]`. */ #exploreContent[data-cat="bars"] .place-card::before{ background:linear-gradient(180deg,#b48cff,#7c5cff); } #exploreContent[data-cat="bars"] .place-card{border-color:rgba(180,140,255,0.12)} #exploreContent[data-cat="bars"] .place-card:active{ border-color:rgba(180,140,255,0.32); box-shadow:0 0 24px rgba(180,140,255,0.1), 0 0 48px rgba(124,92,255,0.05); } #exploreContent[data-cat="bars"] .pc-name{ background:linear-gradient(135deg,#e6dbff,#fff,#b48cff); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } #exploreContent[data-cat="bars"] .pc-price{background:rgba(180,140,255,0.15);color:#c0a4ff;box-shadow:0 0 8px rgba(180,140,255,0.1)} #exploreContent[data-cat="bars"] .place-list{position:relative} #exploreContent[data-cat="bars"] .place-list::before{ content:'';position:absolute;top:5%;left:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(180,140,255,0.04),transparent 70%);pointer-events:none;z-index:0; } .pill[data-cat="bars"].active{ background:rgba(180,140,255,0.28)!important;border-color:rgba(180,140,255,0.45)!important; color:#fff!important;box-shadow:0 0 16px rgba(180,140,255,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } #exploreContent[data-cat="bars"] .pc-link{border-color:rgba(180,140,255,0.3);color:#c0a4ff} /* ===== PHOTOS — violet & lavender ===== */ #exploreContent[data-cat="photos"] .place-card::before{ background:linear-gradient(180deg,#a855f7,#6366f1); } #exploreContent[data-cat="photos"] .place-card{border-color:rgba(168,85,247,0.12)} #exploreContent[data-cat="photos"] .place-card:active{ border-color:rgba(168,85,247,0.3); box-shadow:0 0 24px rgba(168,85,247,0.1), 0 0 48px rgba(99,102,241,0.05); } #exploreContent[data-cat="photos"] .pc-name{ background:linear-gradient(135deg,#e0c3fc,#fff,#c4b5fd); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } #exploreContent[data-cat="photos"] .pc-price{background:rgba(168,85,247,0.15);color:#c4b5fd;box-shadow:0 0 8px rgba(168,85,247,0.1)} #exploreContent[data-cat="photos"] .place-list{position:relative} #exploreContent[data-cat="photos"] .place-list::before{ content:'';position:absolute;top:5%;left:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(168,85,247,0.04),transparent 70%);pointer-events:none;z-index:0; } .pill[data-cat="photos"].active{ background:rgba(168,85,247,0.28)!important;border-color:rgba(168,85,247,0.45)!important; color:#fff!important;box-shadow:0 0 16px rgba(168,85,247,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } #exploreContent[data-cat="photos"] .pc-link{border-color:rgba(168,85,247,0.3);color:#c4b5fd} /* ===== RESTAURANTS — deep red & burgundy ===== */ #exploreContent[data-cat="restaurants"] .place-card::before{ background:linear-gradient(180deg,#ef4444,#991b1b); } #exploreContent[data-cat="restaurants"] .place-card{border-color:rgba(239,68,68,0.12)} #exploreContent[data-cat="restaurants"] .place-card:active{ border-color:rgba(239,68,68,0.3); box-shadow:0 0 24px rgba(239,68,68,0.1), 0 0 48px rgba(153,27,27,0.05); } #exploreContent[data-cat="restaurants"] .pc-name{ background:linear-gradient(135deg,#fecaca,#fff,#fca5a5); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } #exploreContent[data-cat="restaurants"] .pc-price{background:rgba(239,68,68,0.15);color:#fca5a5;box-shadow:0 0 8px rgba(239,68,68,0.1)} #exploreContent[data-cat="restaurants"] .place-list{position:relative} #exploreContent[data-cat="restaurants"] .place-list::before{ content:'';position:absolute;top:5%;left:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(239,68,68,0.04),transparent 70%);pointer-events:none;z-index:0; } .pill[data-cat="restaurants"].active{ background:rgba(239,68,68,0.28)!important;border-color:rgba(239,68,68,0.45)!important; color:#fff!important;box-shadow:0 0 16px rgba(239,68,68,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } #exploreContent[data-cat="restaurants"] .pc-link{border-color:rgba(239,68,68,0.3);color:#fca5a5} /* ===== EXCURSIONS — forest green & mint ===== */ #exploreContent[data-cat="excursions"] .place-card::before{ background:linear-gradient(180deg,#34D399,#059669); } #exploreContent[data-cat="excursions"] .place-card{border-color:rgba(52,211,153,0.12)} #exploreContent[data-cat="excursions"] .place-card:active{ border-color:rgba(52,211,153,0.3); box-shadow:0 0 24px rgba(52,211,153,0.1), 0 0 48px rgba(5,150,105,0.05); } #exploreContent[data-cat="excursions"] .pc-name{ background:linear-gradient(135deg,#A7F3D0,#fff,#6ee7b7); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } #exploreContent[data-cat="excursions"] .pc-price{background:rgba(52,211,153,0.15);color:#6ee7b7;box-shadow:0 0 8px rgba(52,211,153,0.1)} #exploreContent[data-cat="excursions"] .place-list{position:relative} #exploreContent[data-cat="excursions"] .place-list::before{ content:'';position:absolute;top:5%;left:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(52,211,153,0.04),transparent 70%);pointer-events:none;z-index:0; } .pill[data-cat="excursions"].active{ background:rgba(52,211,153,0.28)!important;border-color:rgba(52,211,153,0.45)!important; color:#fff!important;box-shadow:0 0 16px rgba(52,211,153,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } #exploreContent[data-cat="excursions"] .pc-link{border-color:rgba(52,211,153,0.3);color:#6ee7b7} /* ===== PRIVATE GUIDES — tabs, badges, premium gold accent ===== */ .exc-tabs{display:flex;gap:.5rem;margin:0 0 .9rem;flex-wrap:wrap} .exc-tab{flex:1;min-width:140px;padding:.6rem .9rem;border-radius:14px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.04);color:#fff;font-weight:700;font-size:.78rem;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:transform .15s,box-shadow .2s,background .2s} .exc-tab:active{transform:scale(.97)} .exc-tab[aria-pressed="true"]{background:linear-gradient(135deg,#34D399,#059669);border-color:transparent;color:#08231a;box-shadow:0 6px 22px rgba(52,211,153,0.22)} .ads-tab-badge{display:inline-block;margin-left:6px;padding:1px 7px;font-size:.62rem;font-weight:800;border-radius:99px;background:rgba(245,166,35,0.18);color:#ffb74d;border:1px solid rgba(245,166,35,0.35);min-width:14px;text-align:center;line-height:1.4} .ads-tab-badge:empty{display:none} .ads-mine-empty{padding:18px 14px} .ads-mine-empty-h{font-size:1.1rem;font-weight:800;margin:0 0 6px;color:var(--text)} .ads-mine-empty-lead{font-size:.86rem;color:var(--text2);line-height:1.5;margin:0 0 10px} .ads-mine-empty-desc{font-size:.78rem;color:var(--text2);line-height:1.55;margin:0 0 12px} .ads-mine-empty-note{font-size:.76rem;color:var(--text3);line-height:1.5;margin:8px 0 12px;padding:9px 11px;background:rgba(255,255,255,0.04);border-left:3px solid var(--sand);border-radius:6px} .ads-future-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0 14px} @media(max-width:380px){.ads-future-stats{grid-template-columns:1fr}} .ads-future-stat{padding:8px 10px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:9px;font-size:.74rem;color:var(--text2)} .ads-future-stat b{color:var(--text);font-weight:800} .ads-mine-cta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .ads-mine-cta-row button{flex:1;min-width:140px;padding:10px 12px;border-radius:12px;border:0;cursor:pointer;font-weight:800;font-size:.82rem;font-family:inherit} .ads-mine-cta-primary{background:linear-gradient(120deg,#34D399,#059669);color:#08231a} .ads-mine-cta-secondary{background:rgba(255,255,255,0.05);color:var(--text);border:1px solid var(--border)!important} /* ═══ Премиум-карточка «Моя реклама» — 2026-05-17 ═══ */ .ads-mine-card{ position:relative; background:linear-gradient(165deg,rgba(255,255,255,0.045) 0%,rgba(255,255,255,0.015) 100%); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:0; margin:0 14px 12px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,0.20),0 1px 0 rgba(255,255,255,0.03) inset; transition:transform .2s ease,box-shadow .25s ease; } .ads-mine-card:active{transform:scale(.99)} .ads-mine-card.is-premium{ border-color:rgba(212,175,55,0.32); box-shadow:0 6px 24px rgba(212,175,55,0.10),0 1px 0 rgba(212,175,55,0.15) inset,0 0 0 1px rgba(212,175,55,0.18); } .ads-mine-card.is-rejected{border-color:rgba(231,76,60,0.30)} .ads-mine-card.is-paused{opacity:.82} .ads-mine-card.is-expired{opacity:.7} body.light-theme .ads-mine-card{ background:linear-gradient(165deg,#ffffff,#fafafa); border-color:rgba(0,0,0,0.06); box-shadow:0 4px 14px rgba(0,0,0,0.06),0 1px 0 rgba(255,255,255,0.5) inset; } body.light-theme .ads-mine-card.is-premium{ border-color:rgba(180,140,30,0.35); box-shadow:0 6px 22px rgba(212,175,55,0.18),0 0 0 1px rgba(212,175,55,0.20); } /* Header strip with photo thumbnail */ .amc-head{ display:flex;gap:12px;align-items:stretch; padding:12px 14px 10px; position:relative; } .amc-head::before{ /* subtle hairline divider only when stats follow */ content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent); } body.light-theme .amc-head::before{background:linear-gradient(90deg,transparent,rgba(0,0,0,0.06),transparent)} .amc-photo{ flex:0 0 64px;width:64px;height:64px;border-radius:14px; background:rgba(255,255,255,0.04) center/cover no-repeat; border:1px solid rgba(255,255,255,0.06); position:relative;overflow:hidden; } .amc-photo.amc-photo-empty{display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--text3)} .is-premium .amc-photo{box-shadow:0 0 0 1px rgba(212,175,55,0.28),0 4px 10px rgba(212,175,55,0.12)} .amc-photo-count{ position:absolute;right:4px;bottom:4px; padding:1px 6px;font-size:.58rem;font-weight:800; background:rgba(0,0,0,0.55);color:#fff;border-radius:8px;backdrop-filter:blur(4px); } .amc-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center} .amc-row1{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:3px} .amc-status{ display:inline-flex;align-items:center;gap:5px; padding:2px 9px 2px 7px;border-radius:99px; font-size:.64rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase; border:1px solid currentColor; } .amc-status .amc-dot{ display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor; } .amc-status.s-active {background:rgba(54,215,183,.14);color:#3ddfb9;border-color:rgba(54,215,183,.45)} .amc-status.s-active .amc-dot{animation:amcPulse 2.2s ease-in-out infinite} .amc-status.s-pending {background:rgba(245,166,35,.14);color:#ffc170;border-color:rgba(245,166,35,.45)} .amc-status.s-rejected {background:rgba(231,76,60,.14);color:#ff7a6c;border-color:rgba(231,76,60,.45)} .amc-status.s-expired {background:rgba(150,150,150,.14);color:#bcbcbc;border-color:rgba(150,150,150,.45)} .amc-status.s-paused {background:rgba(140,180,255,.14);color:#a7c8ff;border-color:rgba(140,180,255,.45)} @keyframes amcPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}} .amc-premium-chip{ display:inline-flex;align-items:center;gap:3px; padding:2px 7px;border-radius:99px;font-size:.6rem;font-weight:800; background:linear-gradient(120deg,rgba(212,175,55,.18),rgba(245,200,90,.10)); color:#e6c265;border:1px solid rgba(212,175,55,.4); } .amc-tier-chip{ padding:2px 7px;border-radius:99px;font-size:.6rem;font-weight:700; background:rgba(255,255,255,0.04);color:var(--text2);border:1px solid var(--border); } .amc-title{ font-weight:800;font-size:1rem;line-height:1.25; color:var(--text);margin:0; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; } .is-premium .amc-title{ background:linear-gradient(120deg,#e6c265,#ffd28a); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .amc-meta{font-size:.7rem;color:var(--text3);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center} .amc-days{ display:inline-flex;align-items:center;gap:4px; padding:1px 7px;border-radius:99px;font-size:.6rem;font-weight:700; background:rgba(54,215,183,.10);color:#7fd1a0;border:1px solid rgba(54,215,183,.28); } .amc-days.warn{background:rgba(245,166,35,.12);color:#ffb74d;border-color:rgba(245,166,35,.4)} .amc-days.over{background:rgba(231,76,60,.12);color:#e74c3c;border-color:rgba(231,76,60,.4)} /* Stats grid — 4-col tiles with icon + number + label */ .amc-stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:6px; padding:10px 14px 4px; } .amc-stat{ display:flex;flex-direction:column;align-items:center;gap:1px; padding:8px 4px;border-radius:11px; background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.05); text-align:center; transition:background .15s ease; } .amc-stat.has-val{background:rgba(54,215,183,0.05);border-color:rgba(54,215,183,0.15)} body.light-theme .amc-stat{background:rgba(0,0,0,0.025);border-color:rgba(0,0,0,0.05)} body.light-theme .amc-stat.has-val{background:rgba(5,150,105,0.06);border-color:rgba(5,150,105,0.18)} .amc-stat-ico{font-size:.95rem;line-height:1;opacity:.85} .amc-stat.has-val .amc-stat-ico{opacity:1} .amc-stat-val{font-size:.92rem;font-weight:800;color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums} .amc-stat.has-val .amc-stat-val{color:#3ddfb9} body.light-theme .amc-stat.has-val .amc-stat-val{color:#059669} .amc-stat-lbl{font-size:.55rem;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;line-height:1.1} @media(max-width:380px){.amc-stats{grid-template-columns:repeat(4,1fr);gap:4px}.amc-stat{padding:6px 2px}.amc-stat-val{font-size:.82rem}} /* Last action footer line */ .amc-last{ padding:4px 14px 0;font-size:.62rem;color:var(--text3); display:flex;justify-content:space-between;gap:6px; } .amc-last b{color:var(--text2);font-weight:600} /* Rejection block — only when status=rejected */ .amc-reject{ margin:8px 14px 0;padding:8px 11px; background:linear-gradient(120deg,rgba(231,76,60,0.12),rgba(231,76,60,0.04)); border:1px solid rgba(231,76,60,0.3); border-left-width:3px; border-radius:10px; font-size:.72rem;color:#ff8076;line-height:1.45; } .amc-reject b{color:#ff5e50;display:block;margin-bottom:2px;font-size:.62rem;text-transform:uppercase;letter-spacing:.04em} /* Action rows — two-row layout: Подробнее full-width on top, secondary buttons split below */ .amc-actions{display:flex;flex-direction:column;gap:6px;padding:10px 14px 12px} .amc-actions-row{display:flex;gap:6px;width:100%} .amc-actions-row .amc-btn{flex:1 1 0;min-width:0} .amc-btn{ flex:1;min-width:90px; padding:8px 12px;border-radius:11px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); color:var(--text);font-size:.76rem;font-weight:700;font-family:inherit; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:transform .12s ease,background .18s ease,border-color .18s ease; display:inline-flex;align-items:center;justify-content:center;gap:4px; } .amc-btn:hover{background:rgba(255,255,255,0.07)} .amc-btn:active{transform:scale(.97)} .amc-btn.primary{ background:linear-gradient(120deg,#34D399,#059669); color:#08231a;border-color:transparent; box-shadow:0 4px 12px rgba(52,211,153,0.22); } .amc-btn.primary:hover{box-shadow:0 6px 16px rgba(52,211,153,0.32)} .amc-btn.warn{ background:rgba(140,180,255,0.10); border-color:rgba(140,180,255,0.30); color:#a7c8ff; } .amc-btn.ghost{flex:0 0 auto;min-width:0;padding:8px 10px;background:transparent;border-color:rgba(255,255,255,0.08)} body.light-theme .amc-btn{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.10);color:var(--text)} body.light-theme .amc-btn:hover{background:rgba(0,0,0,0.07)} body.light-theme .amc-btn.warn{background:rgba(40,90,200,0.08);border-color:rgba(40,90,200,0.25);color:#3a6cd4} /* Section heading */ .ads-mine-section-h{ margin:14px 14px 10px;font-size:.92rem;font-weight:800; display:flex;align-items:center;gap:8px;color:var(--text); } .ads-mine-section-h .ads-mine-section-count{ font-size:.7rem;font-weight:700;color:var(--text3); padding:1px 8px;border-radius:99px;background:rgba(255,255,255,0.05);border:1px solid var(--border); } .ads-mine-demo-bar{ font-size:.72rem;color:#ffb74d; background:linear-gradient(120deg,rgba(245,166,35,0.14),rgba(245,166,35,0.04)); border:1px solid rgba(245,166,35,0.30); padding:9px 12px;border-radius:11px; margin:0 14px 10px;display:flex;align-items:center;gap:6px; } body.light-theme .ads-mine-demo-bar{color:#b3641e;background:linear-gradient(120deg,#fff4dc,#fffaf0);border-color:rgba(180,120,30,0.35)} .exc-empty{padding:1.4rem 1rem;text-align:center;color:var(--text3,rgba(255,255,255,0.5));font-size:.82rem;line-height:1.5;border:1px dashed rgba(255,255,255,0.08);border-radius:14px;margin:0 0 .8rem} /* ════ PRIVATE GUIDE CARDS — slim premium look (2026-05-21 redesign) ════ The card shows only the essentials; everything else lives in the detail screen (#pgDetailOverlay / openPgDetail). */ .pg-card{position:relative;cursor:pointer} /* Cover photo — fixed ratio so every card is the same height */ .pg-cover{margin:-2px -2px .7rem;border-radius:12px 12px 0 0;overflow:hidden;position:relative;background:rgba(255,255,255,0.04);aspect-ratio:16/10} .pg-cover img{display:block;width:100%;height:100%;object-fit:cover} /* Swipeable photo carousel — native horizontal scroll-snap. overflow-y:hidden is explicit: with only overflow-x set, the spec computes overflow-y to auto, which traps vertical drags. touch-action MUST be `pan-x pan-y` — `pan-x` alone forbids vertical panning for any touch that starts on the photo, blocking up/down page scroll. Both axes allowed: horizontal pans the carousel, vertical scrolls the page/list. */ .pg-cover-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y} .pg-cover-track::-webkit-scrollbar{display:none} .pg-cover-slide{flex:0 0 100%;height:100%;scroll-snap-align:center} .pg-cover-dots{position:absolute;left:0;right:0;bottom:.45rem;display:flex;justify-content:center;gap:.28rem;pointer-events:none;z-index:2} .pg-cover-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.45);transition:width .2s,height .2s,background .2s} .pg-cover-dot.active{background:#fff;width:6px;height:6px;box-shadow:0 0 4px rgba(0,0,0,0.45)} .pg-cover-cnt{position:absolute;right:.5rem;bottom:.5rem;font-size:.62rem;font-weight:700;color:#fff;background:rgba(0,0,0,0.55);padding:.14rem .46rem;border-radius:7px;backdrop-filter:blur(4px)} .pg-cover.pg-cover--empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(48,213,200,0.12),rgba(100,210,255,0.06))} .pg-cover--empty svg{width:40px;height:40px;opacity:.4;color:var(--sea,#30d5c8)} /* Badges — calm, at most two on the card */ .pg-card .pg-badges{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;margin:0 0 .4rem} .pg-badge{display:inline-flex;align-items:center;gap:.22rem;font-size:.6rem;font-weight:800;letter-spacing:.03em;padding:.2rem .52rem;border-radius:99px;text-transform:uppercase} .pg-badge-default{background:rgba(48,213,200,0.10);color:var(--sea,#30d5c8);border:1px solid rgba(48,213,200,0.28)} .pg-badge-verified{background:rgba(52,211,153,0.12);color:#6ee7b7;border:1px solid rgba(52,211,153,0.34)} .pg-badge-premium{background:rgba(245,166,35,0.12);color:#F5A623;border:1px solid rgba(245,166,35,0.42)} .pg-badge-recommended{background:rgba(217,184,108,0.12);color:#e6c992;border:1px solid rgba(217,184,108,0.36)} .pg-badge-demo{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.10);text-transform:none;letter-spacing:0} .pg-card.pg-premium{border:1px solid rgba(245,166,35,0.28);box-shadow:0 0 0 1px rgba(245,166,35,0.10),0 4px 22px rgba(245,166,35,0.07)} .pg-card.pg-premium::before{background:linear-gradient(180deg,#F5C36A,#F5A623)!important} /* Languages — one compact line: RU · EN · KA +2 */ .pg-card .pg-langs{font-size:.7rem;font-weight:700;color:var(--sky,#64d2ff);letter-spacing:.03em;margin:.1rem 0 .5rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pg-card .pg-langs .pg-lang-more{color:rgba(255,255,255,0.42);font-weight:600} /* Description — exactly 2 lines, ellipsis, no inline expand */ .pg-card .pg-desc{font-size:.78rem;color:var(--text-on-card);line-height:1.45;margin:0 0 .65rem;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere} /* Footer — price left, actions right */ .pg-foot{display:flex;align-items:center;justify-content:space-between;gap:.55rem;margin-top:.1rem} .pg-foot-l{display:flex;align-items:center;gap:.5rem;min-width:0} .pg-foot-r{display:flex;align-items:center;gap:.4rem;flex-shrink:0} .pg-price{font-size:.9rem;font-weight:800;color:var(--text-on-card);white-space:nowrap} .pg-cta{display:inline-flex;align-items:center;gap:.28rem;font-size:.74rem;font-weight:800;padding:.52rem .85rem;border-radius:10px;border:none;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;white-space:nowrap;text-decoration:none} .pg-cta-primary{background:linear-gradient(135deg,#30d5c8,#1ba8c4);color:#06251f} .pg-cta-primary:active{transform:scale(.95)} .pg-cta-wa{background:rgba(37,211,102,0.14);color:#4ade80;border:1px solid rgba(37,211,102,0.32);padding:.52rem .6rem} .pg-cta-wa:active{transform:scale(.95)} body.light-theme .pg-card .pg-langs .pg-lang-more{color:rgba(0,0,0,0.4)} /* ════ PRIVATE GUIDE DETAIL SCREEN (#pgDetailOverlay) ════ */ #pgDetailCard{ background: radial-gradient(ellipse 120% 60% at 50% 0%, rgba(255,255,255,0.06), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--bg3) 78%, #fff 22%) 0%, color-mix(in srgb, var(--bg2) 92%, #fff 8%) 50%, var(--bg2) 100%); border:1px solid var(--card-bdr); padding:0 0 calc(20px + env(safe-area-inset-bottom,0px)); } body.light-theme #pgDetailCard{ background: radial-gradient(ellipse 120% 60% at 50% 0%, rgba(255,255,255,0.55), transparent 70%), linear-gradient(180deg,#ffffff 0%,#f3f4f6 100%); border-color:rgba(0,0,0,0.07);color:#1a1a1c; box-shadow:0 -8px 32px rgba(0,0,0,0.18); } .pgd-hero{position:relative;aspect-ratio:16/10;background:#1a1a1a;cursor:pointer;overflow:hidden;border-radius:18px 18px 0 0} .pgd-hero img{width:100%;height:100%;object-fit:cover;display:block} .pgd-hero.pgd-hero--empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(48,213,200,0.13),rgba(100,210,255,0.07));cursor:default} .pgd-hero--empty svg{width:58px;height:58px;opacity:.45;color:var(--sea,#30d5c8)} .pgd-hero-cnt{position:absolute;right:12px;bottom:12px;font-size:.68rem;font-weight:700;color:#fff;background:rgba(0,0,0,0.6);padding:.24rem .58rem;border-radius:8px;backdrop-filter:blur(6px)} .pgd-body{padding:16px 16px 0} .pgd-badges{margin:0 0 .5rem} .pgd-name{font-size:1.2rem;font-weight:800;margin:0 0 .35rem;letter-spacing:-0.01em;line-height:1.25;color:var(--text,#fff)} .pgd-meta-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:.55rem 0 .15rem} .pgd-meta-row .bookmark-btn{position:static;width:auto;height:auto;background:none;border:none;box-shadow:none;font-size:1.2rem;padding:0;margin:0;line-height:1} .pgd-price{font-size:1.05rem;font-weight:800;color:var(--sea,#30d5c8);margin:.6rem 0 .1rem} .pgd-sec{margin-top:1.05rem} .pgd-sec-h{font-size:.64rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text3,rgba(255,255,255,0.45));margin-bottom:.42rem} .pgd-desc,.pgd-txt{font-size:.86rem;line-height:1.6;color:var(--text2,rgba(255,255,255,0.82));margin:0;overflow-wrap:anywhere} .pgd-txt{display:flex;gap:.35rem;align-items:flex-start} .pgd-langs{display:flex;flex-wrap:wrap;gap:.35rem} .pgd-lang{font-size:.7rem;font-weight:700;padding:.2rem .55rem;border-radius:6px;background:rgba(100,210,255,0.10);color:var(--sky,#64d2ff);border:1px solid rgba(100,210,255,0.22);letter-spacing:.04em} .pgd-routes{display:flex;flex-wrap:wrap;gap:.4rem} .pgd-route{font-size:.78rem;padding:.3rem .62rem;border-radius:8px;background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.8);border:1px solid rgba(255,255,255,0.08)} .pgd-acts{display:flex;flex-direction:column;gap:.5rem} .pgd-act{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;padding:.72rem .9rem;border-radius:11px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);color:var(--text,#fff);text-decoration:none;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent} .pgd-act:active{transform:scale(.985)} .pgd-act-wa{background:rgba(37,211,102,0.12);border-color:rgba(37,211,102,0.3);color:#4ade80} .pgd-act-map{background:rgba(100,210,255,0.10);border-color:rgba(100,210,255,0.26);color:#64d2ff} body.light-theme .pgd-name{color:#16181c} body.light-theme .pgd-desc,body.light-theme .pgd-txt{color:#333} body.light-theme .pgd-route{background:rgba(0,0,0,0.04);color:#333;border-color:rgba(0,0,0,0.1)} body.light-theme .pgd-act{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:#1a1a1c} /* ===== BEACHES — ocean blue & turquoise ===== */ #exploreContent[data-cat="beaches"] .place-card::before{ background:linear-gradient(180deg,#22D3EE,#0284C7); } #exploreContent[data-cat="beaches"] .place-card{border-color:rgba(34,211,238,0.12)} #exploreContent[data-cat="beaches"] .place-card:active{ border-color:rgba(34,211,238,0.3); box-shadow:0 0 24px rgba(34,211,238,0.1), 0 0 48px rgba(2,132,199,0.05); } #exploreContent[data-cat="beaches"] .pc-name{ background:linear-gradient(135deg,#CFFAFE,#fff,#A5F3FC); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } #exploreContent[data-cat="beaches"] .pc-price{background:rgba(34,211,238,0.15);color:#A5F3FC;box-shadow:0 0 8px rgba(34,211,238,0.1)} #exploreContent[data-cat="beaches"] .place-list{position:relative} #exploreContent[data-cat="beaches"] .place-list::before{ content:'';position:absolute;top:5%;left:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(34,211,238,0.04),transparent 70%);pointer-events:none;z-index:0; } .pill[data-cat="beaches"].active{ background:rgba(34,211,238,0.28)!important;border-color:rgba(34,211,238,0.45)!important; color:#fff!important;box-shadow:0 0 16px rgba(34,211,238,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } #exploreContent[data-cat="beaches"] .pc-link{border-color:rgba(34,211,238,0.3);color:#A5F3FC} /* ===== SIGHTS — golden amber ===== */ #exploreContent[data-cat="sights"] .place-card::before{ background:linear-gradient(180deg,#FBBF24,#D97706); } #exploreContent[data-cat="sights"] .place-card{border-color:rgba(251,191,36,0.12)} #exploreContent[data-cat="sights"] .place-card:active{ border-color:rgba(251,191,36,0.3); box-shadow:0 0 24px rgba(251,191,36,0.1), 0 0 48px rgba(217,119,6,0.05); } #exploreContent[data-cat="sights"] .pc-name{ background:linear-gradient(135deg,#FEF3C7,#fff,#FDE68A); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } #exploreContent[data-cat="sights"] .pc-price{background:rgba(251,191,36,0.15);color:#FDE68A;box-shadow:0 0 8px rgba(251,191,36,0.1)} #exploreContent[data-cat="sights"] .place-list{position:relative} #exploreContent[data-cat="sights"] .place-list::before{ content:'';position:absolute;top:5%;left:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(251,191,36,0.04),transparent 70%);pointer-events:none;z-index:0; } .pill[data-cat="sights"].active{ background:rgba(251,191,36,0.28)!important;border-color:rgba(251,191,36,0.45)!important; color:#fff!important;box-shadow:0 0 16px rgba(251,191,36,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } #exploreContent[data-cat="sights"] .pc-link{border-color:rgba(251,191,36,0.3);color:#FDE68A} /* ===== PHRASES — teal & mint ===== */ #exploreContent[data-cat="phrases"] .phrase-card{ border-color:rgba(40,181,160,0.12); } #exploreContent[data-cat="phrases"] .phrase-card:active{ border-color:rgba(40,181,160,0.3); box-shadow:0 0 20px rgba(40,181,160,0.08); } #exploreContent[data-cat="phrases"] .ph-ka{ background:linear-gradient(135deg,#6EEBCF,#fff,#5EEAD4); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } #exploreContent[data-cat="phrases"] .ph-pron{color:rgba(40,181,160,0.7)} .pill[data-cat="phrases"].active{ background:rgba(40,181,160,0.28)!important;border-color:rgba(40,181,160,0.45)!important; color:#fff!important;box-shadow:0 0 16px rgba(40,181,160,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } .pill[data-cat="translator"].active{ background:rgba(40,181,160,0.28)!important;border-color:rgba(40,181,160,0.45)!important; color:#fff!important;box-shadow:0 0 16px rgba(40,181,160,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } /* ===== GEORGIAN FOR TRAVELERS — practical phrase helper ===== */ .lg-tabbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:2px;margin:0 0 16px;position:sticky;top:0;z-index:5;background:linear-gradient(180deg,var(--bg) 0,color-mix(in srgb,var(--bg) 94%,transparent) 78%,transparent 100%);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .lg-tab{position:relative;min-width:0;min-height:56px;padding:10px 13px;border:1px solid color-mix(in srgb,var(--text) 8%,var(--border));border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,var(--bg3) 88%,transparent),color-mix(in srgb,var(--bg2) 96%,transparent));color:var(--text2);cursor:pointer;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;font-family:inherit;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 20px rgba(0,0,0,.1);transition:color .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;-webkit-tap-highlight-color:transparent} .lg-tab:active{transform:scale(.96)} .lg-tab-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text3);transition:color .18s ease,background .18s ease,transform .18s ease} .lg-tab-icon svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round} .lg-tab-label{display:block;overflow:hidden;min-width:0;font-size:.76rem;font-weight:690;letter-spacing:-.012em;text-align:left;text-overflow:ellipsis;white-space:nowrap} .lg-tab.active{border-color:color-mix(in srgb,var(--theme-accent) 38%,var(--border));background:linear-gradient(140deg,color-mix(in srgb,var(--theme-accent) 17%,var(--bg3)),color-mix(in srgb,var(--theme-accent) 7%,var(--bg2)));color:var(--text);box-shadow:0 10px 26px color-mix(in srgb,var(--theme-accent) 10%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--theme-accent) 9%,transparent)} .lg-tab.active .lg-tab-icon{background:var(--theme-accent);color:var(--bg);box-shadow:0 5px 14px color-mix(in srgb,var(--theme-accent) 24%,transparent);transform:translateY(-1px)} .lg-tab.active::after{content:"";position:absolute;top:50%;right:10px;width:5px;height:5px;border-radius:50%;background:var(--theme-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--theme-accent) 10%,transparent);transform:translateY(-50%)} .lg-tab-trainer .lg-tab-icon{color:#ff7c76;background:rgba(255,116,111,.07)} .lg-tab-trainer .lg-tab-label{font-size:.72rem;line-height:1.18;white-space:normal;text-overflow:clip} .lg-tab:focus-visible{outline:2px solid var(--theme-accent);outline-offset:2px} body.light-theme .lg-tabbar{background:linear-gradient(180deg,var(--bg) 0,color-mix(in srgb,var(--bg) 95%,transparent) 78%,transparent 100%)} body.light-theme .lg-tab{border-color:rgba(20,60,53,.09);background:linear-gradient(145deg,rgba(255,255,255,.92),color-mix(in srgb,var(--bg2) 92%,#fff));color:var(--text2);box-shadow:0 8px 22px rgba(20,45,40,.07),inset 0 1px 0 #fff} body.light-theme .lg-tab.active{border-color:color-mix(in srgb,var(--theme-accent) 32%,rgba(20,60,53,.1));background:linear-gradient(140deg,color-mix(in srgb,var(--theme-accent) 12%,#fff),color-mix(in srgb,var(--theme-accent) 5%,var(--bg2)));color:var(--text)} @media(max-width:350px){.lg-tabbar{gap:7px}.lg-tab{min-height:53px;padding:8px 10px;gap:8px}.lg-tab-icon{flex-basis:31px;width:31px;height:31px}.lg-tab-icon svg{width:17px;height:17px}.lg-tab-label{font-size:.7rem}} .lg-hero{position:relative;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,rgba(40,181,160,0.12),rgba(100,210,255,0.07));border:1px solid rgba(40,181,160,0.22);margin-bottom:10px;overflow:hidden} .lg-hero::after{content:"";position:absolute;inset:auto -20px -40px auto;width:140px;height:140px;background:radial-gradient(circle at 40% 40%,rgba(40,181,160,0.20),transparent 65%);pointer-events:none} .lg-hero h2{margin:0 0 4px;font-size:1.05rem;font-weight:700;color:var(--text);letter-spacing:-.01em} .lg-hero p{margin:0;font-size:.78rem;color:var(--text2);line-height:1.45} .lg-hero-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px} .lg-hero-chip{font-size:.62rem;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(40,181,160,0.15);border:1px solid rgba(40,181,160,0.3);color:var(--text);letter-spacing:.01em} .lg-audio-note{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.025);border:1px dashed rgba(255,255,255,0.12);font-size:.7rem;color:var(--text3);margin-bottom:12px;line-height:1.4} body.light-theme .lg-audio-note{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.10)} .lg-section-title{font-size:.92rem;font-weight:700;color:var(--text);margin:14px 0 8px;display:flex;align-items:center;gap:7px;letter-spacing:-.01em} .lg-section-title small{font-size:.66rem;font-weight:500;color:var(--text3);letter-spacing:0} /* Big "Show to a local" card */ .lg-showcard{position:relative;padding:20px 18px 16px;border-radius:18px;background:linear-gradient(160deg,rgba(40,181,160,0.13),rgba(100,210,255,0.06));border:1px solid rgba(40,181,160,0.30);margin-bottom:10px;box-shadow:0 6px 24px rgba(0,0,0,0.18);text-align:center} .lg-showcard-ka{font-size:1.7rem;font-weight:700;color:var(--text);line-height:1.18;font-family:Georgia,'Sylfaen','BPG Nino Mtavruli',serif;word-break:break-word;letter-spacing:-.01em} .lg-showcard-lat{font-size:.92rem;color:rgba(40,181,160,0.92);font-weight:600;margin-top:7px} .lg-showcard-meaning{font-size:.95rem;color:var(--text2);margin-top:9px;line-height:1.4} .lg-showcard-actions{display:flex;gap:8px;margin-top:14px;justify-content:center;flex-wrap:wrap} .lg-showcard-actions .lg-btn{flex:1;min-width:130px;justify-content:center} /* Generic buttons */ .lg-btn{font-size:.74rem;font-weight:600;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);color:var(--text);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:background .12s,border-color .12s,transform .08s;-webkit-tap-highlight-color:transparent} .lg-btn:active{transform:scale(0.97);background:rgba(255,255,255,0.10)} .lg-btn.primary{background:linear-gradient(135deg,rgba(48,213,200,0.30),rgba(100,210,255,0.18));border-color:rgba(48,213,200,0.55);color:#fff} .lg-btn.primary:active{background:linear-gradient(135deg,rgba(48,213,200,0.45),rgba(100,210,255,0.30))} body.light-theme .lg-btn{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.10);color:var(--text)} body.light-theme .lg-btn:active{background:rgba(0,0,0,0.07)} body.light-theme .lg-btn.primary{color:var(--text)} /* Phrase of the day — mini card */ .lg-pod-mini{padding:11px 13px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);margin-bottom:12px} .lg-pod-mini-label{font-size:.6rem;font-weight:700;color:rgba(40,181,160,0.95);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px} .lg-pod-mini-ka{font-size:1.05rem;font-weight:700;color:var(--text);line-height:1.2} .lg-pod-mini-lat{font-size:.72rem;color:rgba(40,181,160,0.85);font-weight:600;margin-top:3px} .lg-pod-mini-meaning{font-size:.78rem;color:var(--text2);margin-top:4px;line-height:1.4} body.light-theme .lg-pod-mini{background:rgba(0,0,0,0.025);border-color:rgba(0,0,0,0.06)} /* Categories chips */ .lg-catbar{display:flex;flex-wrap:wrap;gap:7px;padding:4px 2px 8px} .lg-catchip{flex-shrink:0;display:inline-flex;align-items:center;padding:6px 12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);border-radius:999px;font-size:.71rem;font-weight:600;color:var(--text2);white-space:nowrap;cursor:pointer;transition:background .12s,border-color .12s,color .12s;font-family:inherit;line-height:1} .lg-catchip.active{background:rgba(40,181,160,0.18);border-color:rgba(40,181,160,0.45);color:var(--text)} body.light-theme .lg-catchip{background:rgba(0,0,0,0.035);border-color:rgba(0,0,0,0.07)} /* Search */ .lg-search-wrap{margin:4px 0 10px} .lg-search{width:100%;padding:9px 13px;border-radius:12px;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.04);color:var(--text);font-family:inherit;font-size:.82rem;outline:none;transition:border-color .12s,background .12s;box-sizing:border-box} .lg-search:focus{border-color:rgba(40,181,160,0.45);background:rgba(255,255,255,0.06)} .lg-search::placeholder{color:var(--text3)} body.light-theme .lg-search{background:rgba(0,0,0,0.025);border-color:rgba(0,0,0,0.08);color:var(--text)} /* Phrase card */ .lg-phrase{padding:11px 13px;border-radius:14px;background:rgba(255,255,255,0.035);border:1px solid rgba(255,255,255,0.07);margin-bottom:7px} .lg-phrase-head{display:flex;align-items:flex-start;gap:8px} .lg-phrase-text{flex:1;min-width:0} .lg-phrase-ka{font-size:1.05rem;font-weight:700;color:var(--text);line-height:1.25;word-break:break-word;font-family:Georgia,'Sylfaen',serif} .lg-phrase-lat{font-size:.72rem;color:rgba(40,181,160,0.85);font-weight:600;margin-top:2px;line-height:1.25} .lg-phrase-meaning{font-size:.8rem;color:var(--text2);margin-top:4px;line-height:1.4} .lg-phrase-actions{display:flex;flex-direction:column;gap:4px;flex-shrink:0} .lg-phrase-action{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:50%;font-size:1rem;cursor:pointer;color:var(--text3);transition:color .12s,background .12s,transform .08s;-webkit-tap-highlight-color:transparent;padding:0} .lg-phrase-action:active{transform:scale(0.92);background:rgba(40,181,160,0.18);color:var(--text)} .lg-phrase-fav.active{color:#30D5C8;background:rgba(40,181,160,0.12)} body.light-theme .lg-phrase{background:rgba(0,0,0,0.025);border-color:rgba(0,0,0,0.06)} /* "What they may answer" inline block */ .lg-responses{margin-top:9px;padding-top:8px;border-top:1px dashed rgba(255,255,255,0.10)} .lg-responses-title{font-size:.6rem;font-weight:700;color:rgba(100,210,255,0.95);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px} .lg-response{padding:7px 9px;border-radius:10px;background:rgba(100,210,255,0.05);border:1px solid rgba(100,210,255,0.15);margin-bottom:5px} .lg-response-ka{font-size:.88rem;font-weight:600;color:var(--text);line-height:1.2;font-family:Georgia,'Sylfaen',serif} .lg-response-lat{font-size:.66rem;color:rgba(100,210,255,0.85);font-weight:600;margin-top:1px} .lg-response-meaning{font-size:.72rem;color:var(--text2);margin-top:3px;line-height:1.35} body.light-theme .lg-responses{border-top-color:rgba(0,0,0,0.10)} body.light-theme .lg-response{background:rgba(60,160,210,0.07);border-color:rgba(60,160,210,0.20)} /* Alphabet (collapsible at the bottom — secondary info) */ .lg-collapse{margin-top:18px;border-radius:14px;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.07);overflow:hidden} .lg-collapse-header{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:0;background:transparent;color:var(--text);font-family:inherit;text-align:left;cursor:pointer;font-size:.82rem;-webkit-tap-highlight-color:transparent} .lg-collapse-header:active{background:rgba(255,255,255,0.04)} .lg-collapse-title{flex:1;font-weight:700;letter-spacing:-.01em} .lg-collapse-sub{font-size:.66rem;color:var(--text3);font-weight:500} .lg-collapse-arrow{color:var(--text3);font-size:.9rem} .lg-collapse-body{padding:10px 12px 12px} .lg-alpha-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px} .lg-alpha-tile{padding:8px 4px 6px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);text-align:center} .lg-alpha-ka{font-size:1.3rem;font-weight:700;color:var(--text);line-height:1;margin-bottom:2px;font-family:Georgia,'Sylfaen','BPG Nino Mtavruli',serif} .lg-alpha-lat{font-size:.62rem;color:rgba(40,181,160,0.9);font-weight:700} body.light-theme .lg-collapse{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.06)} body.light-theme .lg-collapse-header:active{background:rgba(0,0,0,0.04)} body.light-theme .lg-alpha-tile{background:rgba(0,0,0,0.025);border-color:rgba(0,0,0,0.06)} /* Empty state + toast */ .lg-empty{padding:18px;text-align:center;color:var(--text3);font-size:.78rem;border-radius:12px;background:rgba(255,255,255,0.025);border:1px dashed rgba(255,255,255,0.10)} .lg-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:78px;padding:10px 18px;border-radius:999px;background:rgba(0,0,0,0.78);color:#fff;font-size:.78rem;font-weight:600;z-index:9999;pointer-events:none;opacity:0;transition:opacity .25s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(0,0,0,0.30)} .lg-toast.show{opacity:1} body.light-theme .lg-toast{background:rgba(20,20,20,0.85)} /* ===== HOTELS — royal blue & silver ===== */ #exploreContent[data-cat="hotels"] .place-card::before{ background:linear-gradient(180deg,#818cf8,#3730a3); } #exploreContent[data-cat="hotels"] .place-card{border-color:rgba(129,140,248,0.12)} #exploreContent[data-cat="hotels"] .place-card:active{ border-color:rgba(129,140,248,0.3); box-shadow:0 0 24px rgba(129,140,248,0.1), 0 0 48px rgba(67,56,202,0.05); } #exploreContent[data-cat="hotels"] .pc-name{ background:linear-gradient(135deg,#C7D2FE,#fff,#818CF8); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } #exploreContent[data-cat="hotels"] .pc-price{background:rgba(129,140,248,0.15);color:#818CF8;box-shadow:0 0 8px rgba(129,140,248,0.1)} #exploreContent[data-cat="hotels"] .place-list{position:relative} #exploreContent[data-cat="hotels"] .place-list::before{ content:'';position:absolute;top:5%;left:-15%;width:50%;height:40%; background:radial-gradient(ellipse,rgba(129,140,248,0.04),transparent 70%);pointer-events:none;z-index:0; } .pill[data-cat="hotels"].active{ background:rgba(129,140,248,0.28)!important;border-color:rgba(129,140,248,0.45)!important; color:#fff!important;box-shadow:0 0 16px rgba(129,140,248,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } #exploreContent[data-cat="hotels"] .pc-link, #exploreContent[data-cat="guesthouses"] .pc-link, #exploreContent[data-cat="apartments"] .pc-link{ background:none; border:none; box-shadow:none; } #exploreContent[data-cat="hotels"] .pc-link::after, #exploreContent[data-cat="guesthouses"] .pc-link::after, #exploreContent[data-cat="apartments"] .pc-link::after{display:none} #exploreContent[data-cat="hotels"] .pc-link:active, #exploreContent[data-cat="guesthouses"] .pc-link:active, #exploreContent[data-cat="apartments"] .pc-link:active{background:none;box-shadow:none} /* ===== TRANSPORT — steel blue & slate ===== */ #exploreContent[data-cat="transport"] .place-card::before, #exploreContent[data-cat="transport"] .t-info-card::before{ background:linear-gradient(180deg,#38BDF8,#475569); } #exploreContent[data-cat="transport"] .t-info-card{ border-color:rgba(56,189,248,0.12); } #exploreContent[data-cat="transport"] .t-info-card:active{ border-color:rgba(56,189,248,0.3); box-shadow:0 0 20px rgba(56,189,248,0.08); } .pill[data-cat="transport"].active{ background:rgba(56,189,248,0.28)!important;border-color:rgba(56,189,248,0.45)!important; color:#fff!important;box-shadow:0 0 16px rgba(56,189,248,0.25); backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } /* Transport hero title shimmer */ #exploreContent[data-cat="transport"] .t-hero-title{ background:linear-gradient(135deg,#BAE6FD,#fff,#7DD3FC); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; } /* Transport search input glow on focus */ #exploreContent[data-cat="transport"] .t-search-input:focus{ border-color:rgba(56,189,248,0.4); box-shadow:0 0 16px rgba(56,189,248,0.1); } /* Transport info cards title */ #exploreContent[data-cat="transport"] .t-info-card-title{ color:#7DD3FC; } /* Donate modal — smooth entrance (transition only, no conflicting animation) */ /* Donate amount buttons — ripple feel */ .donate-amount{ position:relative;overflow:hidden; } .donate-amount::after{ content:'';position:absolute;inset:0; background:radial-gradient(circle at center,rgba(255,209,102,0.3),transparent 70%); opacity:0;transition:opacity .3s; } .donate-amount:active::after{opacity:1} /* Weather full screen — aurora effect */ .weather-full::after{ } @keyframes auroraFloat{ 0%{transform:translate(-40px,-40px) scale(1)} 100%{transform:translate(-20px,-20px) scale(1.3)} } .weather-full::before{ } /* Large temp — glow */ .wf-temp{ filter:drop-shadow(0 0 30px rgba(255,255,255,0.1)); } /* Exchange rate items — slide highlight */ .rate-item{ position:relative;overflow:hidden; } .rate-item::after{ content:'';position:absolute;top:0;left:-100%;width:100%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,209,102,0.04),transparent); transition:left .4s;pointer-events:none; } .rate-item:active::after{left:100%} .ri-val{ text-shadow:0 0 10px rgba(255,209,102,0.25); } /* Converter swap — rotation smoothing */ .conv-swap-btn{ transition:all .4s cubic-bezier(.34,1.56,.64,1); } .conv-swap-btn:active{ transform:rotate(180deg) scale(1.1); box-shadow:0 0 16px rgba(255,255,255,0.12); } /* Info cards — shimmer pulse on touch */ .info-card:active{ border-color:rgba(0,229,184,0.15); box-shadow:0 2px 24px rgba(0,229,184,0.08), inset 0 1px 0 rgba(255,255,255,0.05); } /* SOS cards — urgent pulse on the icon */ .sos-card .sc-icon{ } .sc-phone{ text-shadow:0 0 8px rgba(255,107,53,0.3); transition:all .2s; } .sc-phone:active{ text-shadow:0 0 16px rgba(255,68,68,0.5); } /* Bottom nav — tap feedback */ .bnav-item:active{transform:scale(0.9)} /* Section titles — unified glass style (see main .sec-title) */ /* Language trigger — smooth transitions */ .lang-trigger{ transition:all .3s cubic-bezier(.4,0,.2,1); } /* Smooth screen transitions */ /* screen transition removed — caused iOS WebKit opacity glitch where translucent children rendered only as text/emoji */ /* Scrollbar glow */ ::-webkit-scrollbar-thumb{ box-shadow:0 0 4px rgba(255,255,255,0.12); } /* ============ PREMIUM CITY HOME — isolated from internal screens ============ */ #scrHome{padding-bottom:calc(6.4rem + max(env(safe-area-inset-bottom,0px),var(--tg-safe-bottom,0px)))} .city-home-hero{position:relative;display:block;min-height:178px;margin-bottom:.85rem;padding:1.05rem 1.05rem .95rem;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:linear-gradient(152deg,rgba(24,48,62,.96),rgba(18,27,38,.94) 57%,rgba(39,31,31,.9));box-shadow:0 18px 44px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.09);cursor:pointer;isolation:isolate} .city-home-hero::before{content:'';position:absolute;z-index:-1;inset:auto -12% -38% 26%;height:150px;border-radius:50%;background:radial-gradient(ellipse,rgba(63,184,199,.2),rgba(63,184,199,0) 67%);transform:rotate(-5deg);animation:citySeaDrift 18s ease-in-out infinite alternate;pointer-events:none} .city-home-hero::after{content:'';position:absolute;z-index:-1;right:-35px;top:-44px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(244,177,112,.22),rgba(244,177,112,0) 70%);pointer-events:none} .city-home-kicker{display:flex;align-items:center;gap:.45rem;color:rgba(225,239,241,.7);font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase} .city-home-kicker::before{content:'';width:16px;height:1px;background:rgba(117,211,215,.8)} .city-home-brand{margin-top:.5rem;font-family:'Space Grotesk',sans-serif;font-size:clamp(1.7rem,7vw,2.25rem);font-weight:750;line-height:1;letter-spacing:-.04em;color:#f5f8f8} .city-home-place{display:flex;align-items:center;gap:.35rem;margin-top:.42rem;color:rgba(225,239,241,.74);font-size:.78rem} .city-home-place svg{width:14px;height:14px;color:#75d3d7} .city-home-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;margin-top:1.05rem} .city-home-greeting{min-width:0}.city-home-greeting .hh-greeting-text{font-size:.88rem;color:#fff;background:none;-webkit-text-fill-color:currentColor;animation:none}.city-home-greeting .hh-greeting-sub{margin-top:.16rem;color:rgba(225,239,241,.62);white-space:normal} .city-home-date{flex:0 0 auto;text-align:right;color:rgba(225,239,241,.68);font-size:.68rem;line-height:1.35;max-width:42%} .city-home-section{margin:.9rem 0}.city-home-heading{display:flex;align-items:end;justify-content:space-between;gap:.8rem;margin:0 0 .55rem;padding:0 .1rem}.city-home-heading h2{margin:0;font-family:'Space Grotesk',sans-serif;font-size:1.02rem;line-height:1.2;color:var(--text)}.city-home-heading span{font-size:.66rem;color:var(--text3)} .city-now-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.city-now-card{min-height:84px;padding:.75rem;border:1px solid rgba(255,255,255,.075);border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.045);color:var(--text);text-align:left;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y}.city-now-icon{display:flex;align-items:center;justify-content:center;width:27px;height:27px;margin-bottom:.52rem;border-radius:9px;background:rgba(117,211,215,.1);color:#75d3d7}.city-now-icon svg{width:16px;height:16px}.city-now-label{font-size:.65rem;color:var(--text3)}.city-now-value{margin-top:.14rem;font-size:.82rem;font-weight:700;line-height:1.25;overflow-wrap:anywhere} .city-transport-card{position:relative;display:flex;align-items:center;width:100%;min-height:132px;padding:1.05rem 46% 1.05rem 1.1rem;overflow:hidden;border:1px solid rgba(89,167,255,.3);border-radius:24px;background:radial-gradient(circle at 84% 28%,rgba(54,130,229,.34),transparent 43%),linear-gradient(135deg,#102a4c 0%,#0d2039 56%,#091725 100%);box-shadow:0 18px 42px rgba(2,14,32,.34),inset 0 1px 0 rgba(255,255,255,.1);color:#f7fbff;text-align:left;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y;isolation:isolate}.city-transport-card::before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(7,20,37,.08) 0%,rgba(7,20,37,.2) 43%,rgba(7,20,37,0) 66%);pointer-events:none}.city-transport-copy{position:relative;z-index:2;display:block;min-width:0}.city-transport-bus{position:absolute;z-index:1;right:-4%;bottom:-2%;width:72%;height:auto;pointer-events:none;filter:drop-shadow(0 15px 18px rgba(0,7,18,.42));transform:rotate(-1deg);transform-origin:50% 100%}.city-transport-title{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.08rem;font-weight:760;line-height:1.08;text-shadow:0 1px 12px rgba(0,0,0,.35)}.city-transport-sub{display:block;margin-top:.3rem;color:rgba(230,241,255,.72);font-size:.7rem;line-height:1.36;text-shadow:0 1px 9px rgba(0,0,0,.34)}.city-live-mark{display:inline-flex;align-items:center;gap:.32rem;margin-top:.55rem;color:#8fc5ff;font-size:.6rem;font-weight:750;letter-spacing:.055em;text-transform:uppercase}.city-live-mark::before{content:'';width:6px;height:6px;border-radius:50%;background:#65b0ff;box-shadow:0 0 0 3px rgba(101,176,255,.14),0 0 13px rgba(101,176,255,.62)}.city-transport-arrow{position:absolute;z-index:3;right:.75rem;top:.68rem;display:flex;align-items:center;justify-content:center;width:27px;height:27px;border:1px solid rgba(255,255,255,.13);border-radius:50%;background:rgba(5,18,35,.34);color:rgba(255,255,255,.8);font-size:1.22rem;line-height:1;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)} .city-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.city-action{display:flex;align-items:center;gap:.6rem;min-height:58px;padding:.72rem;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.035);color:var(--text);font:inherit;font-size:.78rem;font-weight:700;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y}.city-action svg{flex:0 0 auto;width:19px;height:19px;color:#9bcfd2} .city-all-sections-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;margin:.65rem 0 1rem;padding:.75rem .9rem;border:1px solid rgba(117,211,215,.16);border-radius:16px;background:rgba(117,211,215,.06);color:var(--text);font:700 .8rem/1.2 inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y}.city-all-sections-btn span:last-child{color:#75d3d7;font-size:1.2rem}.city-all-sections-btn:active{transform:scale(.985);opacity:.9} .city-featured-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:.55rem 0 .8rem}.city-featured-card{display:flex;align-items:center;gap:.55rem;min-height:58px;padding:.65rem .7rem;border:1px solid rgba(255,255,255,.07);border-radius:15px;background:rgba(255,255,255,.035);color:var(--text);font:700 .75rem/1.25 inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y;overflow:hidden}.city-featured-card .cfc-icon{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:27px;height:27px;border-radius:9px;background:rgba(117,211,215,.09);color:#8bcfd1}.city-featured-card svg{width:17px;height:17px}.city-featured-card .cfc-name{min-width:0;overflow-wrap:anywhere}.city-featured-card:active{transform:scale(.985);opacity:.9} .city-all-heading{margin-top:1rem!important}.city-home-hero:active,.city-now-card:active,.city-transport-card:active,.city-action:active{transform:scale(.985);opacity:.9} @keyframes citySeaDrift{from{transform:translate3d(-5px,0,0) rotate(-5deg)}to{transform:translate3d(12px,-5px,0) rotate(-2deg)}} @media(max-width:350px){.city-home-hero{min-height:165px;padding:.9rem}.city-home-date{font-size:.62rem}.city-transport-card{min-height:126px;padding:.9rem 44% .9rem .9rem}.city-transport-bus{right:-6%;width:76%}.city-transport-title{font-size:1rem}.city-transport-sub{font-size:.66rem}.city-action{padding:.62rem;font-size:.72rem}} @media(min-width:700px){.city-transport-card{min-height:150px;padding-left:1.35rem;padding-right:48%}.city-transport-bus{right:0;bottom:-5%;width:64%}.city-transport-title{font-size:1.22rem}.city-transport-sub{max-width:280px;font-size:.76rem}.city-live-mark{font-size:.64rem}} @media(prefers-reduced-motion:reduce){.city-home-hero::before{animation:none}.city-home-hero,.city-now-card,.city-transport-card,.city-action{transition:none!important}} body.light-theme .city-home-hero{border-color:rgba(22,73,77,.12);box-shadow:0 15px 35px rgba(33,73,77,.13)}body.light-theme .city-now-card,body.light-theme .city-action{border-color:rgba(18,66,70,.1);background:rgba(255,255,255,.72)} /* ============ GREETING BANNER ============ */ .greeting-banner{ display:flex;align-items:center;justify-content:space-between; margin-bottom:.4rem;padding:.2rem 0; animation:greetFade .8s ease both; } @keyframes greetFade{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .greeting-text{ font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:800; background:linear-gradient(135deg,var(--sea),var(--sky),var(--sand)); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; line-height:1.2; } .greeting-sub{ font-size:.65rem;color:var(--text3);margin-top:.1rem; letter-spacing:.3px; } .greeting-left{flex:1;min-width:0} .greeting-weather-mini{ display:flex;align-items:center;gap:.4rem;cursor:pointer; padding:.3rem .6rem;border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); -webkit-tap-highlight-color:transparent; } .greeting-weather-mini .gw-temp{ font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:800;color:var(--sky); } .greeting-weather-mini .gw-desc{font-size:.6rem;color:var(--text3);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ============ HOME HERO (compact greeting + weather pill) ============ */ .home-hero{ display:flex;align-items:center;justify-content:space-between;gap:.7rem; margin-bottom:.55rem;padding:.7rem .9rem; background: radial-gradient(ellipse at 90% 0%, rgba(100,210,255,0.13) 0%, transparent 55%), linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.025) 100%); background-color:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:18px; box-shadow:0 3px 14px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); animation:greetFade .7s ease both; } .hh-greeting{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem} .hh-greeting-text{ font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:800; background:linear-gradient(110deg,var(--sea) 0%,var(--sky) 35%,var(--sand) 70%,var(--sea) 100%); background-size:300% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; line-height:1.2; animation:hhTextShift 14s ease-in-out infinite; } @keyframes hhTextShift{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} } .hh-greeting-sub{ font-size:.7rem;color:var(--text2);opacity:.78;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .hh-weather-pill{ flex-shrink:0;display:flex;align-items:center;gap:.3rem; padding:.4rem .7rem;border-radius:14px;cursor:pointer; background:rgba(100,210,255,0.12); border:1px solid rgba(100,210,255,0.22); -webkit-tap-highlight-color:transparent; transition:transform .15s, background .2s; font-family:inherit; } .hh-weather-pill:active{transform:scale(0.96);background:rgba(100,210,255,0.2)} .hh-weather-pill .hwp-temp{ font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:800;color:var(--sky); } .hh-weather-pill .hwp-icon{font-size:1rem;line-height:1} /* ============ HOME SEARCH PILL (collapsed/expanded) ============ */ .home-search-pill{ display:flex;align-items:center;gap:.5rem; padding:.55rem .85rem;margin-bottom:.6rem;border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:var(--text3);font-size:.82rem;font-weight:500; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:border-color .2s, background .2s; } .home-search-pill:active{background:rgba(255,255,255,0.06);border-color:rgba(54,215,183,0.22)} .home-search-pill .hsp-icon{flex-shrink:0;color:var(--sea);opacity:.8} .home-search-pill .hsp-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .home-search-expanded{margin-bottom:.6rem} .home-search-expanded .home-search-input-wrap{position:relative;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:14px;background:rgba(255,255,255,0.05);border:1px solid rgba(54,215,183,0.3)} .home-search-expanded input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:.9rem;font-family:inherit;padding:.2rem 0} .home-search-expanded input::placeholder{color:var(--text3)} .home-search-expanded .hse-close{flex-shrink:0;background:none;border:none;color:var(--text3);font-size:1rem;cursor:pointer;padding:.2rem .3rem;-webkit-tap-highlight-color:transparent} .home-search-expanded .hse-close:active{color:var(--coral)} /* ============ QUICK CHIPS — compact Taxi/Wolt/Glovo row ============ */ .quick-chips{ display:flex;gap:.45rem;margin-bottom:.55rem;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none; } .quick-chips::-webkit-scrollbar{display:none} .quick-chip{ flex-shrink:0;display:inline-flex;align-items:center;gap:.35rem; padding:.42rem .75rem;border-radius:12px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); color:var(--text);font-size:.78rem;font-weight:600; text-decoration:none;cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .15s ease; } .quick-chip:active{transform:scale(0.96)} .quick-chip .qc-icon{font-size:.95rem;line-height:1} .quick-chip.qc-taxi{color:#A78BFA;border-color:rgba(167,139,250,0.22);background:rgba(167,139,250,0.1)} .quick-chip.qc-taxi:active{background:rgba(167,139,250,0.24)} .quick-chip.qc-wolt{color:#00C2E8;border-color:rgba(0,194,232,0.25);background:rgba(0,194,232,0.1)} .quick-chip.qc-wolt:active{background:rgba(0,194,232,0.24)} .quick-chip.qc-glovo{color:#FFC244;border-color:rgba(255,194,68,0.25);background:rgba(255,194,68,0.1)} .quick-chip.qc-glovo:active{background:rgba(255,194,68,0.24)} .quick-chip.qc-firsthour{color:#5EEAD4;border:1px solid rgba(94,234,212,0.28);background:rgba(94,234,212,0.13);font-weight:700;cursor:pointer;font-family:inherit} .quick-chip.qc-firsthour:active{background:rgba(94,234,212,0.28)} .quick-chip.qc-prices{color:#FB923C;border:1px solid rgba(251,146,60,0.25);background:rgba(251,146,60,0.12);cursor:pointer;font-family:inherit} .quick-chip.qc-prices:active{background:rgba(251,146,60,0.25)} /* ============ TOURIST AID MODALS (first-hour / price guide) ============ */ .tourist-modal-overlay{ position:fixed;inset:0;z-index:9998;display:flex;align-items:flex-end;justify-content:center; opacity:0;pointer-events:none;transition:opacity .25s ease; background:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(10,15,25,.92) 60%,rgba(14,20,35,.88) 100%); } .tourist-modal-overlay.open{opacity:1;pointer-events:auto} .tourist-modal{ width:100%;max-width:420px;max-height:88vh;overflow-y:auto;scrollbar-width:none; background:linear-gradient(180deg,#1c2238 0%,#111520 100%); border:1px solid rgba(69,174,245,.12); border-radius:22px 22px 0 0;padding:0 0 1.5rem; transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,.32,1); box-shadow:0 -8px 40px rgba(0,0,0,.5); } .tourist-modal::-webkit-scrollbar{display:none} .tourist-modal-overlay.open .tourist-modal{transform:translateY(0)} .tm-handle{width:36px;height:4px;background:rgba(255,255,255,.18);border-radius:2px;margin:10px auto 0} .tm-header{display:flex;align-items:flex-start;justify-content:space-between;padding:.9rem 1.1rem .5rem;gap:.5rem} .tm-title{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:800;color:var(--text);line-height:1.2} .tm-subtitle{font-size:.78rem;color:var(--text2);margin-top:.3rem;line-height:1.4} .tm-close{background:rgba(255,255,255,.06);border:none;border-radius:50%;color:var(--text);font-size:.9rem;cursor:pointer;width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .15s} .tm-close:active{transform:scale(.88);background:rgba(255,255,255,.12)} .tm-body{padding:.2rem 1.1rem} .fh-offline-note{background:rgba(54,215,183,0.1);border:1px solid rgba(54,215,183,0.25);border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:.78rem;line-height:1.4;color:var(--text1,#fff)} .fh-offline-note b{color:#36D7B7} .fh-offline-note.tappable{cursor:pointer} .fh-offline-note.tappable:active{background:rgba(54,215,183,0.16)} .fh-on-arrow{color:#36D7B7;font-weight:800} .pc-cover.ev-poster{position:relative;overflow:hidden;border-radius:12px;background-size:cover;background-position:center;cursor:zoom-in} .pc-cover.ev-poster::before{content:"";position:absolute;inset:0;background-image:inherit;background-size:cover;background-position:center;filter:blur(16px) brightness(.5);transform:scale(1.25);z-index:0} .pc-cover.ev-poster>img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block} .pc-cover.ev-poster::after{content:"\2922";position:absolute;z-index:2;right:8px;bottom:8px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:9px;color:#fff;font-size:15px;line-height:1} .sim-sect{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.06)} .sim-sect:last-of-type{border-bottom:none} .sim-sect-icon{font-size:1.3rem;flex-shrink:0;width:26px;text-align:center;line-height:1.3} .sim-sect-body{min-width:0} .sim-sect-title{font-size:.9rem;font-weight:700;color:var(--text1,#fff);margin-bottom:2px} .sim-sect-desc{font-size:.8rem;color:var(--text2,#b9bdc6);line-height:1.42} .sim-cta{display:block;width:100%;margin-top:14px;padding:13px;border:none;border-radius:12px;background:#36D7B7;color:#06231e;font-size:.9rem;font-weight:800;cursor:pointer} .sim-cta:active{transform:scale(.98)} .sim-note{font-size:.7rem;color:var(--text3,#8b9098);text-align:center;margin:12px 0 4px} .sim-code{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:9px;padding:9px 12px;border:1px dashed rgba(54,215,183,0.45);border-radius:12px;background:rgba(54,215,183,0.07);cursor:pointer;transition:background .2s,transform .15s;position:relative} .sim-code:active{transform:scale(.98)} .sim-code-val{font-weight:800;font-size:.92rem;letter-spacing:.04em;color:#36D7B7;font-family:ui-monospace,Menlo,Consolas,monospace} .sim-code-note{font-size:.72rem;color:var(--text2,#b9bdc6)} .sim-code.copied{background:rgba(54,215,183,0.16)} .sim-code.copied::after{content:'✓';position:absolute;right:12px;color:#36D7B7;font-weight:800} /* First-hour steps */ .fh-step{ display:flex;gap:.75rem;padding:.8rem;margin-bottom:.55rem; background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%); border:1px solid rgba(255,255,255,.08);border-radius:14px; cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,border-color .2s; } .fh-step:active{transform:scale(.98);border-color:rgba(54,215,183,.3)} .fh-step-icon{flex-shrink:0;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:rgba(54,215,183,.1);border:1px solid rgba(54,215,183,.2)} .fh-step-body{flex:1;min-width:0} .fh-step-title{font-family:'Space Grotesk',sans-serif;font-size:.92rem;font-weight:700;color:var(--text);line-height:1.25} .fh-step-desc{font-size:.72rem;color:var(--text2);line-height:1.4;margin-top:.2rem} .fh-step-arrow{flex-shrink:0;color:var(--text3);font-size:1.1rem;align-self:center} /* Price guide groups */ .pg-group{margin-bottom:1rem} .pg-group-title{font-family:'Space Grotesk',sans-serif;font-size:.82rem;font-weight:800;color:var(--sand);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.4rem;display:flex;align-items:center;gap:.45rem} .pg-list{display:flex;flex-direction:column;gap:3px} .pg-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .7rem;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:10px} .pg-item-name{font-size:.8rem;color:var(--text);font-weight:500} .pg-item-price{font-family:'Space Grotesk',sans-serif;font-size:.82rem;font-weight:700;color:var(--sand);white-space:nowrap} .pg-warning{margin-top:.8rem;padding:.7rem .85rem;background:rgba(251,146,60,.08);border:1px solid rgba(251,146,60,.2);border-radius:12px;font-size:.75rem;color:var(--text2);line-height:1.4} /* ============ HOME AMBIENT — floating background orbs (slow, subtle) ============ */ #scrHome::before{ content:'';position:absolute;top:-40px;left:-40px;right:-40px;height:60vh; pointer-events:none;z-index:-1;opacity:.65; background: radial-gradient(circle at 15% 20%, rgba(54,215,183,0.16) 0%, transparent 38%), radial-gradient(circle at 80% 15%, rgba(100,210,255,0.15) 0%, transparent 35%), radial-gradient(circle at 45% 55%, rgba(245,166,35,0.09) 0%, transparent 40%); filter:blur(20px); animation:homeOrbDrift 28s ease-in-out infinite alternate; } @keyframes homeOrbDrift{ 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(12px,-18px) scale(1.06)} 100%{transform:translate(-10px,14px) scale(1.02)} } /* Floating ambient particles (4 dots) */ #scrHome .amb-particle{ position:absolute;width:3px;height:3px;border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.7), rgba(255,255,255,0)); pointer-events:none;z-index:0;opacity:.35; } #scrHome .amb-p1{top:8%;left:22%;animation:ambFloat 24s ease-in-out infinite} #scrHome .amb-p2{top:14%;left:78%;animation:ambFloat 32s ease-in-out infinite reverse;animation-delay:-6s} #scrHome .amb-p3{top:32%;left:12%;animation:ambFloat 28s ease-in-out infinite;animation-delay:-14s} #scrHome .amb-p4{top:40%;left:90%;animation:ambFloat 36s ease-in-out infinite reverse;animation-delay:-20s} @keyframes ambFloat{ 0%,100%{transform:translate(0,0);opacity:.25} 50%{transform:translate(-18px,-24px);opacity:.55} } /* ============ HOME POLISH — ambient animations ============ */ /* Home hero: subtle shimmer light sweep */ .home-hero{position:relative;overflow:hidden} .home-hero::after{ content:'';position:absolute;top:0;left:-60%;width:50%;height:100%; background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.06) 50%, transparent 80%); animation:heroShimmer 8s ease-in-out infinite; pointer-events:none; } @keyframes heroShimmer{ 0%,100%{transform:translateX(0);opacity:0} 40%{opacity:1} 100%{transform:translateX(340%);opacity:0} } /* Weather pill: soft glow halo */ .hh-weather-pill{position:relative;z-index:1} .hh-weather-pill::before{ content:'';position:absolute;inset:-3px;border-radius:inherit;z-index:-1; background:radial-gradient(circle at 50% 50%, rgba(100,210,255,0.3), transparent 70%); opacity:0;transition:opacity .3s;filter:blur(10px); animation:weatherGlow 5s ease-in-out infinite; } @keyframes weatherGlow{ 0%,100%{opacity:0.25} 50%{opacity:0.6} } /* Search pill: idle breathing border */ .home-search-pill{transition:border-color .4s ease, background .2s} .home-search-pill:not(:active){animation:searchBreathe 6s ease-in-out infinite} @keyframes searchBreathe{ 0%,100%{border-color:rgba(255,255,255,0.08)} 50%{border-color:rgba(54,215,183,0.22)} } /* Section title: right divider line */ .sec-title{display:flex;align-items:center;gap:.55rem} .sec-title::after{ content:'';flex:1;height:1px;margin-left:.2rem; background:linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0)); } /* My-place chips: premium glass */ .my-place-chip{ background:linear-gradient(135deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.04) 100%)!important; backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(255,255,255,0.13)!important; box-shadow:0 2px 10px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08); transition:transform .18s, background .25s, border-color .25s; font-weight:600!important; } .my-place-chip:active{ transform:scale(0.96); background:linear-gradient(135deg, rgba(54,215,183,0.2) 0%, rgba(54,215,183,0.08) 100%)!important; border-color:rgba(54,215,183,0.35)!important; } /* Channel banner: pulse + premium CTA */ .channel-banner{ box-shadow:0 6px 24px rgba(54,215,183,0.14), inset 0 1px 0 rgba(255,255,255,0.1); animation:cbPulse 5s ease-in-out infinite; } @keyframes cbPulse{ 0%,100%{box-shadow:0 6px 24px rgba(54,215,183,0.12), inset 0 1px 0 rgba(255,255,255,0.1)} 50%{box-shadow:0 10px 34px rgba(54,215,183,0.24), inset 0 1px 0 rgba(255,255,255,0.14)} } .cb-join{ box-shadow:0 3px 12px rgba(54,215,183,0.4), inset 0 1px 0 rgba(255,255,255,0.2); transition:transform .15s, box-shadow .2s; } .cb-join:active{transform:scale(0.95);box-shadow:0 2px 8px rgba(54,215,183,0.6)} /* Home heart: beat animation + better layout */ .home-heart{ margin-top:.9rem;padding:.8rem 1rem; display:flex;align-items:center;justify-content:center;gap:.5rem; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:transform .2s, color .2s; color:var(--text2); } .home-heart:active{transform:scale(0.97)} .home-heart-icon{display:inline-flex;animation:heartBeat 3s ease-in-out infinite;transform-origin:center} @keyframes heartBeat{ 0%,30%,100%{transform:scale(1)} 10%{transform:scale(1.2)} 20%{transform:scale(1)} 25%{transform:scale(1.1)} } /* 2026-05-13: removed catEnter stagger animations on home cat-hero/cat-row. Every renderHome re-fired them → user perceived as "cards flickering". */ /* Hero cards: ambient glow-pulse around border */ .cat-hero{position:relative} .cat-hero::before{ content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0; background:linear-gradient(135deg, color-mix(in srgb, var(--grp) 22%, transparent), transparent 55%); opacity:.55; animation:heroBorderGlow 9s ease-in-out infinite; } .cat-hero>*{position:relative;z-index:1} @keyframes heroBorderGlow{ 0%,100%{opacity:.35} 50%{opacity:.7} } /* Hero icon: gentle float */ .cat-hero .ch-icon{animation:iconFloat 5s ease-in-out infinite} .cat-hero:nth-child(2) .ch-icon{animation-delay:-1.2s} .cat-hero:nth-child(3) .ch-icon{animation-delay:-2.4s} .cat-hero:nth-child(4) .ch-icon{animation-delay:-3.6s} @keyframes iconFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} } /* Row icon: subtle pulse of accent color */ .cat-row .cr-icon{animation:rowIconGlow 7s ease-in-out infinite} .cat-row:nth-child(2) .cr-icon{animation-delay:-1.5s} .cat-row:nth-child(3) .cr-icon{animation-delay:-3s} .cat-row:nth-child(4) .cr-icon{animation-delay:-4.5s} @keyframes rowIconGlow{ 0%,100%{box-shadow:none} 50%{box-shadow:0 0 12px color-mix(in srgb, var(--grp) 25%, transparent)} } /* Chevron arrow: subtle horizontal drift */ .cat-row .cr-arrow, .cat-hero .ch-arrow{animation:arrowNudge 4.5s ease-in-out infinite} @keyframes arrowNudge{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(2px)} } /* Nn-card: small shine on the top-right */ .nn-card{position:relative;overflow:hidden} .nn-card::before{ content:'';position:absolute;top:-30%;right:-30%;width:80%;height:80%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), transparent 60%); pointer-events:none; } /* ============ WEATHER ACTIVITY SUGGEST ============ */ .weather-suggest{ display:flex;gap:.5rem;overflow-x:auto;padding:.3rem 0 .6rem; -webkit-overflow-scrolling:touch;scrollbar-width:none; margin-bottom:.4rem; } .weather-suggest::-webkit-scrollbar{display:none} .ws-chip{ flex-shrink:0;display:flex;align-items:center;gap:.3rem; padding:.35rem .7rem;border-radius:20px;font-size:.68rem;font-weight:600; background:rgba(54,215,183,0.08);border:1px solid rgba(54,215,183,0.15); color:var(--sea);cursor:pointer;transition:all .2s;white-space:nowrap; font-family:inherit; } .ws-chip:active{background:var(--sea);color:#fff;transform:scale(.95)} .ws-chip .ws-icon{font-size:.9rem} /* ============ DISH CARDS (OCR menu) ============ */ .dish-cards-wrap{margin:.6rem 0;display:flex;flex-direction:column;gap:.5rem} .dish-cards-title{font-size:.78rem;font-weight:700;color:var(--sand);letter-spacing:.3px;margin-bottom:.1rem;padding:0 .1rem} .dish-card{background:linear-gradient(135deg,rgba(255,214,10,.05),rgba(54,215,183,.04));border:1px solid rgba(255,214,10,.15);border-radius:12px;padding:.7rem .8rem;position:relative} .dish-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.3rem} .dish-icon{font-size:1.6rem;flex:0 0 auto;filter:drop-shadow(0 0 5px rgba(255,214,10,.25))} .dish-names{flex:1;min-width:0} .dish-name{font-weight:700;font-size:.92rem;color:#fff;line-height:1.2} .dish-ka{font-size:.72rem;color:var(--sea);font-family:'BPG Square',sans-serif;margin-top:.05rem} .dish-head .tts-btn{flex:0 0 auto;margin-left:auto;width:32px;height:32px;font-size:.9rem} .dish-desc{font-size:.8rem;color:rgba(255,255,255,.85);line-height:1.35;margin:.2rem 0 .45rem} .dish-meta{display:flex;gap:.3rem;flex-wrap:wrap} .dish-tag{font-size:.65rem;font-weight:600;padding:.15rem .5rem;border-radius:6px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);white-space:nowrap} .dish-tag.vg{background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.2)} .dish-tag.allerg{background:rgba(255,107,107,.1);color:#ff9b9b;border:1px solid rgba(255,107,107,.2);white-space:normal} .dish-tag.price{background:rgba(255,214,10,.12);color:var(--sand);border:1px solid rgba(255,214,10,.2);font-weight:700} /* ============ PUSH SUBSCRIBE ============ */ .push-sub-card{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;margin:.6rem 0;background:linear-gradient(135deg,rgba(255,214,10,.12),rgba(100,210,255,.06));border:1px solid rgba(255,214,10,.3);border-radius:14px} .push-sub-card.on{background:linear-gradient(135deg,rgba(54,215,183,.15),rgba(100,210,255,.08));border-color:rgba(54,215,183,.35)} .push-sub-card .ps-emoji{font-size:1.4rem;filter:drop-shadow(0 0 6px rgba(255,214,10,.4))} .push-sub-card.on .ps-emoji{filter:drop-shadow(0 0 8px rgba(54,215,183,.5))} .push-sub-card .ps-text{flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0} .push-sub-card .ps-text strong{font-size:.85rem;color:#fff;font-weight:700;line-height:1.2} .push-sub-card .ps-text span{font-size:.7rem;color:rgba(255,255,255,.6);line-height:1.3} .push-sub-card .ps-btn{background:var(--sand);color:#0e0e0e;border:0;border-radius:9px;padding:.4rem .7rem;font-weight:700;font-size:.72rem;cursor:pointer;font-family:inherit;white-space:nowrap} .push-sub-card.on .ps-btn{background:var(--sea)} .push-sub-card .ps-dismiss{background:rgba(255,255,255,.08);border:0;color:rgba(255,255,255,.5);width:24px;height:24px;border-radius:50%;font-size:.7rem;cursor:pointer;padding:0;margin-left:.1rem} /* ============ REVIEWS ============ */ .pc-reviews.has-rev{background:rgba(255,214,10,.1);color:var(--sand);border-color:rgba(255,214,10,.25)} /* ── Reviews — theme-aware (uses the same CSS vars + body.light-theme overrides as the rest of the app; no more hardcoded #151515 / fixed white text). ── */ .reviews-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:9500;display:none;align-items:flex-end;justify-content:center;padding:0} .reviews-modal.show{display:flex} .reviews-sheet{width:100%;max-width:540px;max-height:90vh;background:linear-gradient(160deg,var(--bg2),var(--bg3));border-radius:20px 20px 0 0;border:none;color:var(--text);box-shadow:0 -12px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;animation:rvSlide .25s cubic-bezier(.2,.8,.3,1)} @keyframes rvSlide{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}} .rv-head-bar{display:flex;align-items:center;gap:.5rem;padding:.9rem 1rem .6rem;border-bottom:1px solid var(--card-bdr-soft);flex-shrink:0} .rv-head-bar h3{flex:1;margin:0;font-size:.95rem;font-weight:700;color:var(--text)} .rv-close{background:var(--glass);border:0;color:var(--text);width:32px;height:32px;border-radius:50%;font-size:1rem;cursor:pointer} .rv-body{flex:1;overflow-y:auto;padding:.8rem 1rem;-webkit-overflow-scrolling:touch} .rv-summary{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.55rem .75rem;margin-bottom:.7rem;border-radius:12px;background:var(--card-soft);border:none;font-size:.74rem;color:var(--text2)} .rv-summary-avg{font-weight:800;font-size:.95rem;color:var(--text)} .rv-summary-cnt{color:var(--text2)} .rv-summary-mod{margin-left:auto;font-size:.66rem;color:var(--text3)} .rv-loading,.rv-empty{text-align:center;padding:2rem .5rem;color:var(--text3);font-size:.82rem} .rv-item{padding:.8rem;margin-bottom:.6rem;background:var(--card-grad);border:none;border-radius:12px} .rv-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.25rem;gap:.5rem} .rv-name{font-weight:700;color:var(--text);font-size:.82rem} .rv-date{font-size:.65rem;color:var(--text3)} .rv-stars{font-size:.75rem;margin-bottom:.3rem;letter-spacing:-2px} .rv-text{font-size:.82rem;color:var(--text-on-card);line-height:1.35;margin-top:.25rem;word-break:break-word} .rv-photo{margin-top:.5rem;max-width:100%;max-height:220px;border-radius:10px;display:block;cursor:pointer} .rv-form{flex-shrink:0;padding:.9rem 1rem 1.1rem;border-top:1px solid var(--card-bdr-soft);background:var(--card2)} .rv-form-title{font-weight:700;font-size:.85rem;color:var(--text);margin-bottom:.55rem} .rv-rating-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;flex-wrap:wrap} .rv-rating-label{font-size:.75rem;color:var(--text2)} .rv-stars-picker{display:inline-flex;gap:.1rem;font-size:1.4rem} .rv-star-pick{cursor:pointer;filter:grayscale(1) brightness(.6);transition:filter .15s,transform .1s;user-select:none} .rv-star-pick:active{transform:scale(.9)} .rv-star-pick.picked{filter:none} .rv-textarea{width:100%;min-height:60px;padding:.55rem .7rem;background:var(--bg3);border:1px solid var(--card-bdr);border-radius:10px;color:var(--text);font-family:inherit;font-size:.82rem;resize:vertical;margin-bottom:.55rem;box-sizing:border-box} .rv-textarea::placeholder{color:var(--text3)} .rv-textarea:focus{outline:none;border-color:var(--sea)} .rv-form-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .rv-photo-btn{font-size:.7rem;padding:.4rem .6rem;background:rgba(100,210,255,.1);color:var(--sky);border:1px solid rgba(100,210,255,.25);border-radius:8px;cursor:pointer;font-weight:600} .rv-photo-preview{display:inline-flex;align-items:center;gap:.3rem} .rv-submit{margin-left:auto;padding:.5rem 1rem;background:var(--sea);color:#0e1512;border:0;border-radius:10px;font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit} .rv-submit:disabled{opacity:.5;cursor:wait} .rv-quick{margin-bottom:.7rem} .rv-quick-title{font-size:.72rem;color:var(--text3);margin-bottom:.4rem;font-weight:600;letter-spacing:.2px} .rv-quick-row{display:flex;gap:.5rem} .rv-quick-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem .5rem;border-radius:12px;border:1px solid var(--card-bdr);background:var(--glass);color:var(--text);font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:transform .12s,background .2s,border-color .2s;-webkit-tap-highlight-color:transparent} .rv-quick-btn:active{transform:scale(.96)} .rv-quick-emoji{font-size:1.15rem;line-height:1} .rv-quick-good{border-color:rgba(100,210,255,.3);background:rgba(100,210,255,.08);color:var(--sky)} .rv-quick-good:active{background:rgba(100,210,255,.18)} .rv-quick-great{border-color:rgba(255,214,10,.32);background:rgba(255,214,10,.1);color:var(--sand)} .rv-quick-great:active{background:rgba(255,214,10,.2)} .rv-or{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 .7rem;color:var(--text3);font-size:.7rem;text-transform:lowercase} .rv-or::before,.rv-or::after{content:'';flex:1;height:1px;background:var(--border)} /* Light theme — soft white surfaces, same treatment as .place-card / .rent-card */ body.light-theme .reviews-sheet{background:linear-gradient(160deg,#ffffff,#f3f4f6);box-shadow:0 -12px 40px rgba(0,0,0,.14)} body.light-theme .rv-head-bar{border-bottom-color:rgba(0,0,0,.06)} body.light-theme .rv-close{background:rgba(0,0,0,.05)} body.light-theme .rv-item{background:linear-gradient(168deg,rgba(255,255,255,0.98),rgba(255,255,255,0.9));border:none;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.05)} body.light-theme .rv-summary{background:rgba(0,0,0,.04)} body.light-theme .rv-form{border-top-color:rgba(0,0,0,.06);background:rgba(0,0,0,.02)} body.light-theme .rv-textarea{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1)} body.light-theme .rv-quick-btn{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08)} body.light-theme .rv-or::before,body.light-theme .rv-or::after{background:rgba(0,0,0,.1)} /* ============ NOW NEARBY ============ */ .now-nearby-section{margin:0 0 .35rem} .now-nearby-section:empty{display:none} /* Geo enable CTA (nearme transport tab) */ .geo-cta-card{position:relative;margin:10px 0;padding:26px 20px 20px;border-radius:18px;background:linear-gradient(135deg,rgba(74,222,128,0.1),rgba(34,197,94,0.04));border:1.5px solid rgba(74,222,128,0.28);cursor:pointer;transition:all .2s;text-align:center;overflow:hidden;-webkit-tap-highlight-color:transparent;animation:geoCtaGlow 2.5s ease-in-out infinite} .geo-cta-card:active{transform:scale(.985);background:linear-gradient(135deg,rgba(74,222,128,0.15),rgba(34,197,94,0.08))} .geo-cta-head{display:flex;flex-direction:column;align-items:center;gap:6px} .geo-cta-pin{position:relative;display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:rgba(74,222,128,0.14);margin-bottom:4px} .geo-cta-pin svg{width:34px;height:34px;color:#4ade80} .geo-cta-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(74,222,128,0.55);animation:geoCtaPulse 1.6s ease-out infinite} .geo-cta-title{font-size:1.08rem;font-weight:800;color:#4ade80;letter-spacing:.2px;line-height:1.25} .geo-cta-sub{font-size:.75rem;color:var(--text2);margin-top:2px;line-height:1.35;max-width:280px} .geo-cta-tap{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:14px auto 0;padding:10px 20px;border-radius:22px;background:#4ade80;color:#042016;font-size:.85rem;font-weight:800;letter-spacing:.3px;box-shadow:0 6px 18px rgba(74,222,128,.35);animation:geoCtaTapBounce 1.8s ease-in-out infinite} @keyframes geoCtaPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.6);opacity:0}} @keyframes geoCtaGlow{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}50%{box-shadow:0 0 0 4px rgba(74,222,128,.08)}} @keyframes geoCtaTapBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} .nn-cta{position:relative;display:flex;align-items:center;gap:.7rem;background:linear-gradient(135deg,rgba(48,213,200,.14),rgba(100,210,255,.07));border:1.5px solid rgba(48,213,200,.28);border-radius:14px;padding:.8rem .85rem;cursor:pointer;transition:transform .15s;animation:nnCtaGlow 2.5s ease-in-out infinite} @keyframes nnCtaGlow{0%,100%{box-shadow:0 0 0 0 rgba(48,213,200,0)}50%{box-shadow:0 0 0 4px rgba(48,213,200,.08)}} .nn-cta:active{transform:scale(.98)} .nn-cta-icon{font-size:1.6rem;filter:drop-shadow(0 0 6px rgba(48,213,200,.55))} .nn-cta-text{flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0} .nn-cta-text strong{font-size:.88rem;font-weight:700;color:#fff;line-height:1.25} .nn-cta-text span{font-size:.72rem;color:rgba(255,255,255,.6);line-height:1.3} .nn-cta-btn{background:var(--sea);color:#0e0e0e;border:0;border-radius:10px;padding:.45rem .75rem;font-weight:700;font-size:.75rem;cursor:pointer;white-space:nowrap;font-family:inherit} .nn-scroll{display:flex;gap:.55rem;overflow-x:auto;padding:.25rem .1rem .4rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none} .nn-scroll::-webkit-scrollbar{display:none} .nn-card{flex:0 0 165px;scroll-snap-align:start;background:var(--card-grad);border:1px solid var(--card-bdr);border-top:1px solid var(--card-bdr-top);border-bottom:1px solid var(--card-bdr-soft);border-radius:14px;padding:.6rem .65rem;display:flex;flex-direction:column;gap:.3rem;cursor:pointer;transition:transform .15s,border-color .2s,box-shadow .2s;min-height:118px;box-shadow:inset 0 1px 2px rgba(255,255,255,0.12),0 4px 14px rgba(0,0,0,0.25),0 0 0 1px rgba(255,255,255,0.04)} .nn-card:active{transform:scale(.97);border-color:rgba(48,213,200,.4);box-shadow:0 0 0 2px rgba(48,213,200,.15)} .nn-top{display:flex;align-items:center;justify-content:space-between;gap:.3rem} .nn-emoji{font-size:1.05rem;line-height:1} .nn-cat-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:8px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.16);max-width:fit-content;align-self:flex-start} .nn-cat-emoji{font-size:.95rem;line-height:1;flex-shrink:0} .nn-cat-text{font-size:.66rem;font-weight:700;color:#fff;letter-spacing:.1px;white-space:nowrap;line-height:1} body.light-theme .nn-cat-chip{background:rgba(0,0,0,0.06);border-color:rgba(0,0,0,0.10)} body.light-theme .nn-cat-text{color:#111} .nn-dist{font-size:.68rem;color:#4ade80;font-weight:700;white-space:nowrap} .nn-name{font-size:.82rem;font-weight:700;color:var(--text1);line-height:1.22;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2em} .nn-foot{display:flex;align-items:center;justify-content:space-between;gap:.25rem;margin-top:auto;flex-wrap:wrap} .nn-foot .status-badge{font-size:.6rem;padding:.1rem .35rem;border-radius:5px} .nn-foot .pc-stars{font-size:.68rem;padding:.08rem .3rem} .nn-close{font-size:.7rem;font-weight:700;color:#4ade80;letter-spacing:.1px;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:3px;line-height:1.15} .nn-close::before{content:'';width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 5px rgba(74,222,128,.55);flex-shrink:0} .nn-close.is-247{color:#64d2ff} .nn-close.is-247::before{background:#64d2ff;box-shadow:0 0 5px rgba(100,210,255,.55)} /* ============ QUICK ACTIONS ============ */ .quick-actions{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem 0 .5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:.3rem;-webkit-mask-image:linear-gradient(to right,#000 88%,transparent 100%);mask-image:linear-gradient(to right,#000 88%,transparent 100%)} .quick-actions::-webkit-scrollbar{display:none} .qa-btn{flex-shrink:0;display:flex;align-items:center;gap:.35rem;padding:.45rem .75rem;border-radius:14px;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;font-family:inherit;text-decoration:none;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04)} .qa-btn:active{transform:scale(.95)} .qa-btn .qa-icon{font-size:1rem} .qa-taxi{color:#A78BFA;border-color:rgba(167,139,250,0.2)!important;background:rgba(167,139,250,0.08)!important} .qa-taxi:active{background:rgba(167,139,250,0.25)!important} .qa-delivery{color:#FB923C;border-color:rgba(251,146,60,0.2)!important;background:rgba(251,146,60,0.08)!important} .qa-delivery:active{background:rgba(251,146,60,0.25)!important} .qa-eat{color:#34D399;border-color:rgba(52,211,153,0.2)!important;background:rgba(52,211,153,0.08)!important} .qa-eat:active{background:rgba(52,211,153,0.25)!important} .qa-transport{color:var(--sea);border-color:rgba(54,215,183,0.2)!important;background:rgba(54,215,183,0.08)!important} .qa-transport:active{background:rgba(54,215,183,0.25)!important} .qa-phrases{color:var(--sky);border-color:rgba(69,174,245,0.2)!important;background:rgba(69,174,245,0.08)!important} .qa-phrases:active{background:rgba(69,174,245,0.25)!important} /* ============ SEASONAL WIDGET ============ */ .seasonal-widget{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:.65rem .8rem;margin-bottom:.5rem;display:none;align-items:center;gap:.7rem} .seasonal-widget.show{display:flex} .sw-icon{font-size:1.6rem;flex-shrink:0} .sw-body{flex:1;min-width:0} .sw-title{font-size:.72rem;font-weight:700;color:var(--text1);margin-bottom:.15rem} .sw-text{font-size:.62rem;color:var(--text3);line-height:1.4} .sw-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem} .sw-tag{display:inline-flex;align-items:center;gap:.15rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);padding:.12rem .4rem;border-radius:10px;font-size:.58rem;color:var(--text2);font-weight:500} .sw-sea{background:rgba(69,174,245,0.1)!important;color:var(--sky)!important;border-color:rgba(69,174,245,0.2)!important} /* ============ WHERE TO EAT SHEET ============ */ .eat-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity .25s} .eat-overlay.show{opacity:1;pointer-events:auto} .eat-sheet{background:var(--card);border-radius:20px 20px 0 0;width:100%;max-width:480px;max-height:75vh;overflow-y:auto;padding:1.2rem 1rem 2rem;transform:translateY(100%);transition:transform .3s ease} .eat-overlay.show .eat-sheet{transform:translateY(0)} .eat-sheet-handle{width:36px;height:4px;background:rgba(255,255,255,0.15);border-radius:2px;margin:0 auto .8rem} .eat-sheet-title{font-size:.85rem;font-weight:700;color:var(--text1);margin-bottom:.7rem;text-align:center} .eat-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:.7rem .8rem;margin-bottom:.5rem;cursor:pointer;transition:all .2s} .eat-card:active{transform:scale(.98);background:rgba(52,211,153,0.08)} .eat-card-name{font-size:.78rem;font-weight:700;color:var(--text1);margin-bottom:.2rem} .eat-card-desc{font-size:.62rem;color:var(--text3);line-height:1.35;margin-bottom:.3rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .eat-card-meta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.6rem} .eat-card-dist{color:var(--sky);font-weight:600} .eat-card-price{color:var(--sand);font-weight:600} .eat-card-open{padding:.1rem .35rem;border-radius:6px;font-weight:600;font-size:.55rem;background:rgba(52,211,153,0.15);color:#34D399} .eat-empty{text-align:center;padding:2rem 1rem;color:var(--text3);font-size:.75rem} /* ============ CATEGORY COUNT BADGE ============ */ .cat-count{ position:absolute;top:-6px;right:-4px; display:inline-flex;align-items:center;justify-content:center; min-width:18px;height:18px;padding:0 4px; background:var(--sea); color:#fff; border:2px solid var(--bg); border-radius:9px;font-size:.58rem;font-weight:800; font-family:'Space Grotesk',sans-serif; letter-spacing:.2px; z-index:3; } /* ============ SCROLL-TO-TOP FAB ============ */ .scroll-top-fab{display:none!important} /* ============ SKELETON LOADING ============ */ @keyframes skeletonPulse{ 0%{background-position:-200% 0} 100%{background-position:200% 0} } .skeleton{ background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.04) 75%); background-size:200% 100%; animation:skeletonPulse 1.5s ease-in-out infinite; border-radius:8px; } .skeleton-weather{ display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem; } .skeleton-temp{width:60px;height:40px;border-radius:10px} .skeleton-lines{flex:1;display:flex;flex-direction:column;gap:6px} .skeleton-line{height:10px;border-radius:5px} .skeleton-line.w70{width:70%} .skeleton-line.w50{width:50%} .skeleton-line.w40{width:40%} .skeleton-exchange{display:flex;gap:.5rem;padding:.3rem 0} .skeleton-chip{width:100px;height:38px;border-radius:14px;flex-shrink:0} /* ============ RIPPLE EFFECT ============ */ .ripple{ position:absolute;border-radius:50%; background:rgba(255,255,255,0.15); transform:scale(0);animation:rippleAnim .5s ease-out forwards; pointer-events:none; } @keyframes rippleAnim{ to{transform:scale(2.5);opacity:0} } /* ============ UPDATED TIME ============ */ .exchange-updated{ text-align:center;font-size:.6rem;color:var(--text3); margin-top:.6rem;opacity:.6; } /* === SPLASH SCREEN === */ .splash{ position:fixed;top:-2px;left:0;right:0;bottom:calc(-2px - max(env(safe-area-inset-bottom,0px),var(--tg-safe-bottom,0px)));z-index:9999; background:linear-gradient(180deg,#0a0a0a 0%,#0e0e0e 40%,#121212 100%); display:flex;flex-direction:column;align-items:center;justify-content:center; transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 1.2s cubic-bezier(.4,0,.2,1),filter 1.2s ease; overflow:hidden; } .splash.fade-out{opacity:0;transform:scale(1.03);pointer-events:none;filter:blur(6px)} .splash-center{ position:absolute;z-index:2;left:0;right:0;top:var(--boot-center-y,50%); height:88px;transform:translateY(-44px); display:flex;flex-direction:column;align-items:center;justify-content:flex-start } /* Stars / particles */ .splash-stars{position:absolute;inset:0;overflow:hidden} .splash-star{ position:absolute;width:2px;height:2px;border-radius:50%; background:#fff;opacity:0;animation:starTwinkle var(--dur) ease-in-out var(--delay) infinite; } @keyframes starTwinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:var(--o);transform:scale(1)}} /* Title */ .splash-title{ font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:1.5rem; line-height:1.1; background:linear-gradient(135deg,#36D7B7,#45AEF5,#F5A623,#FF6B8A,#36D7B7);background-size:400% 400%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; letter-spacing:2px;margin-bottom:.6rem; animation:splashTitleShift 3s ease-in-out infinite; filter:drop-shadow(0 0 20px rgba(54,215,183,0.3)); opacity:1;animation:splashTitleShift 3s ease-in-out infinite; } @keyframes splashTitleShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} @keyframes splashTitleIn{to{opacity:1}} /* Subtitle */ .splash-sub{ font-size:.7rem;color:rgba(255,255,255,.25);letter-spacing:3px;text-transform:uppercase; font-family:'Space Grotesk',sans-serif;font-weight:600; opacity:0;animation:splashSubIn 1s ease forwards .6s; } @keyframes splashSubIn{to{opacity:1}} /* Waves */ .splash-waves{ position:absolute;bottom:0;left:0;right:0;height:55%; overflow:hidden; } .splash-wave{position:absolute;bottom:0;left:-10%;width:120%} .splash-wave path{transition:fill 1s} .splash-wave:nth-child(1) path{fill:rgba(54,215,183,0.07)} .splash-wave:nth-child(2) path{fill:rgba(69,174,245,0.05)} .splash-wave:nth-child(3) path{fill:rgba(245,166,35,0.03)} .splash-wave:nth-child(1){animation:splashWave1 5s ease-in-out infinite;opacity:.5} .splash-wave:nth-child(2){animation:splashWave2 7s ease-in-out infinite;opacity:.35;bottom:-10px} .splash-wave:nth-child(3){animation:splashWave3 9s ease-in-out infinite;opacity:.2;bottom:-25px} @keyframes splashWave1{0%,100%{transform:translateX(0) translateY(0) scaleY(1)}50%{transform:translateX(25px) translateY(-8px) scaleY(1.05)}} @keyframes splashWave2{0%,100%{transform:translateX(0) translateY(0) scaleY(1)}50%{transform:translateX(-30px) translateY(-12px) scaleY(1.08)}} @keyframes splashWave3{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(18px) translateY(-5px)}} /* Center glow — breathing orb */ .splash-glow{ position:absolute;bottom:20%;left:50%;transform:translateX(-50%); width:400px;height:400px;border-radius:50%; background:radial-gradient(circle,rgba(54,215,183,0.1) 0%,rgba(69,174,245,0.06) 30%,rgba(245,166,35,0.04) 55%,transparent 75%); animation:splashGlow 3s ease-in-out infinite; } @keyframes splashGlow{0%,100%{opacity:.25;transform:translateX(-50%) scale(.9)}50%{opacity:.8;transform:translateX(-50%) scale(1.15)}} /* Horizon line */ .splash-horizon{ position:absolute;bottom:38%;left:10%;right:10%;height:1px; background:linear-gradient(90deg,transparent,rgba(54,215,183,0.15),rgba(245,166,35,0.1),rgba(54,215,183,0.15),transparent); animation:horizonPulse 3s ease-in-out infinite; } @keyframes horizonPulse{0%,100%{opacity:.3;transform:scaleX(.8)}50%{opacity:.7;transform:scaleX(1)}} /* Floating particles */ .splash-particle{ position:absolute;border-radius:50%; animation:particleFloat var(--dur) ease-in-out var(--delay) infinite; opacity:0; } @keyframes particleFloat{ 0%{opacity:0;transform:translateY(0) scale(.5)} 30%{opacity:var(--o)} 70%{opacity:var(--o)} 100%{opacity:0;transform:translateY(calc(var(--dy) * -1)) scale(0)} } /* Loading dots */ .splash-dots{ display:flex;gap:6px;margin-top:1.5rem; } .splash-dot{ width:4px;height:4px;border-radius:50%; background:rgba(54,215,183,.4); animation:splashDotPulse 1.2s ease-in-out infinite; } .splash-dot:nth-child(2){animation-delay:.2s} .splash-dot:nth-child(3){animation-delay:.4s} @keyframes splashDotPulse{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}} /* Sunrise reveal */ .splash-sunrise{ position:fixed;inset:0;z-index:9998;pointer-events:none; background: radial-gradient(ellipse at 50% 130%,rgba(255,180,70,0.22) 0%,rgba(255,120,60,0.1) 25%,transparent 55%), radial-gradient(ellipse at 30% 110%,rgba(255,100,150,0.06) 0%,transparent 40%), radial-gradient(ellipse at 70% 110%,rgba(255,200,50,0.06) 0%,transparent 40%); opacity:0;transition:opacity 1s cubic-bezier(.4,0,.2,1); } .splash-sunrise.active{opacity:1} .splash-sunrise.done{opacity:0;transition:opacity .8s cubic-bezier(.4,0,.2,1)} /* === HOME SCREEN EFFECTS (lightweight) === */ /* Exchange row fade edge — removed, was causing black bg */ /* Category card — hover lift */ .cat-card:active{transform:scale(0.93) translateY(2px)} /* Bottom nav glow on active */ .bnav-item.active .bnav-icon{ filter:drop-shadow(0 0 6px currentColor); transition:filter .2s; } /* Bottom nav — ripple on tap (uses ::before to avoid overwriting ::after indicator) */ .bnav-item{position:relative;overflow:hidden} /* ====== FEATURE: Bookmark heart ====== */ .bookmark-btn{position:absolute;top:8px;right:8px;border:none;cursor:pointer;z-index:2;opacity:1;display:flex;align-items:center;justify-content:center;padding:6px;background:rgba(12,14,17,.42);border-radius:50%;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 2px 6px rgba(0,0,0,.32);transition:transform .2s,background .2s} .bookmark-btn.active{transform:scale(1.12);background:rgba(12,14,17,.52)} .bookmark-btn:active{transform:scale(.85)} .bookmark-btn .bm-ico{width:23px;height:23px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;color:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))} .bookmark-btn.active .bm-ico{fill:#36D7B7;stroke:#36D7B7;filter:none} .pgd-meta-row .bookmark-btn .bm-ico{filter:none} /* Per-place share button (re-enabled 2026-07-01) — round, sits left of the bookmark */ .pc-share-btn{position:absolute;top:8px;right:46px;border:none;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;padding:6px;background:rgba(12,14,17,.42);border-radius:50%;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 2px 6px rgba(0,0,0,.32);transition:transform .2s,background .2s;color:#fff} .pc-share-btn:active{transform:scale(.85)} .pc-share-btn.shared{background:rgba(69,174,245,.55)} .pc-share-btn svg{width:20px;height:20px;display:block;stroke:#fff;fill:none} .pgd-meta-row .pc-share-btn{position:static;width:auto;height:auto;background:none;border:none;box-shadow:none;padding:0;margin:0;line-height:1;color:var(--sky)} .pgd-meta-row .pc-share-btn svg{width:1.15rem;height:1.15rem} .my-places-title .bm-ttl{width:18px;height:18px;vertical-align:-3px;fill:#36D7B7;stroke:#36D7B7;display:inline-block} /* ====== FEATURE: My Places chips on Home ====== */ .my-places-section{margin:0 0 .5rem} .my-places-title{font-size:.75rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.4rem;display:flex;align-items:center;gap:6px} .my-places-scroll{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch} .my-places-scroll::-webkit-scrollbar{display:none} .my-place-chip{display:flex;align-items:center;gap:4px;padding:5px 10px;background:var(--wet);border:1px solid var(--wet-border);border-radius:20px;font-size:.72rem;color:var(--text);white-space:nowrap;cursor:pointer;transition:background .2s;flex-shrink:0} .my-place-chip:active{background:rgba(255,255,255,0.1)} /* ====== FEATURE: Sort toggle button ====== */ .sort-toggle{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;background:var(--wet);border:1px solid var(--wet-border);border-radius:16px;font-size:.72rem;color:var(--text2);cursor:pointer;font-family:inherit;margin:8px 0;transition:background .2s} .sort-toggle:active{background:rgba(255,255,255,0.1)} .cat-mapall-btn{gap:6px} .cat-mapall-ico{width:1.1rem;height:1.1rem;flex-shrink:0;stroke:currentColor;display:inline-block;vertical-align:middle} .hotel-kind-select{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 36px 8px 14px;background:linear-gradient(135deg,rgba(48,213,200,0.12),rgba(100,210,255,0.08));border:1px solid rgba(48,213,200,0.35);border-radius:14px;margin:.2rem 0 .6rem;cursor:pointer;transition:background .2s,border-color .2s} .hotel-kind-select:hover{border-color:rgba(48,213,200,0.55);background:linear-gradient(135deg,rgba(48,213,200,0.18),rgba(100,210,255,0.12))} .hotel-kind-select .hk-lbl{font-size:.68rem;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-weight:600;pointer-events:none} .hotel-kind-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:0;outline:0;color:var(--text);font-family:inherit;font-size:.82rem;font-weight:700;padding:0;margin:0;cursor:pointer;min-width:140px} .hotel-kind-select select option{background:#1c1c1c;color:var(--text)} .hotel-kind-select .hk-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--sea);font-size:.8rem;pointer-events:none} /* Bars accent on the type dropdown (cafes use the default sea tint). */ .hotel-kind-select[data-cat="bars"]{background:linear-gradient(135deg,rgba(180,140,255,0.18),rgba(180,140,255,0.10));border-color:rgba(180,140,255,0.45)} .hotel-kind-select[data-cat="bars"]:hover{border-color:rgba(180,140,255,0.65);background:linear-gradient(135deg,rgba(180,140,255,0.24),rgba(180,140,255,0.14))} .hotel-kind-select[data-cat="bars"] .hk-arrow{color:#c0a4ff} /* Compact horizontal sub-cat chips (cafes/bars). No emoji, plain text. 2026-05-19 — container is fully transparent (no sticky bar / dark mask gradient): the chips themselves carry the glass pill look. Backwards- compatible CSS — `.hotel-kind-select` is kept for hotels/grocery/fast_food. */ .subcat-chip-bar{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:6px 2px;margin:8px 0 12px;-webkit-overflow-scrolling:touch;background:transparent;border:0;box-shadow:none;scrollbar-width:none} .subcat-chip-bar::-webkit-scrollbar{display:none} .subcat-chip{flex-shrink:0;display:inline-flex;align-items:center;padding:6px 14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:999px;font-size:.74rem;font-weight:600;color:var(--text2);white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s;font-family:inherit;line-height:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .subcat-chip:active{background:rgba(255,255,255,0.1)} .subcat-chip.active{background:linear-gradient(135deg,rgba(48,213,200,0.22),rgba(100,210,255,0.16));border-color:rgba(48,213,200,0.55);color:var(--text)} .subcat-chip-bar[data-cat="bars"] .subcat-chip.active{background:linear-gradient(135deg,rgba(180,140,255,0.28),rgba(180,140,255,0.16));border-color:rgba(180,140,255,0.6)} body.light-theme .subcat-chip{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.08);color:var(--text2)} body.light-theme .subcat-chip:active{background:rgba(0,0,0,0.07)} /* ═══ Open/Closed badge — premium pill design (2026-05-17) ═══ Backwards-compatible: same .status-badge / .status-sub classes the openStatusBadge() helper emits. Pill shape + animated dot + refined palette to match the «Моя реклама» premium card aesthetic. */ .status-badge{ display:inline-flex;align-items:center;gap:5px; padding:2px 9px 2px 7px; border-radius:99px; font-size:.62rem;font-weight:800; letter-spacing:.04em;text-transform:uppercase; margin-left:6px;vertical-align:middle; background:none !important;-webkit-background-clip:initial !important;background-clip:initial !important; border:1px solid transparent; transition:transform .15s ease; } /* Dot indicator — CSS-only via ::before so HTML stays untouched */ .status-badge::before{ content:"";display:inline-block; width:6px;height:6px;border-radius:50%; background:currentColor; flex:0 0 6px; } /* OPEN — green, live-pulsing dot */ .status-badge.open{ background:rgba(54,215,183,0.14) !important; color:#3ddfb9 !important;-webkit-text-fill-color:#3ddfb9 !important; border-color:rgba(54,215,183,0.45); text-shadow:0 0 6px rgba(54,215,183,0.25); box-shadow:0 1px 6px rgba(54,215,183,0.10); } /* 2026-05-27: status-badge animations removed — user reported card flicker across all sections */ /* CLOSED — muted red */ .status-badge.closed{ background:rgba(239,68,68,0.14) !important; color:#ff7a6c !important;-webkit-text-fill-color:#ff7a6c !important; border-color:rgba(239,68,68,0.40); text-shadow:0 0 6px rgba(239,68,68,0.20); } /* CLOSING-SOON — still green with amber tint (static) */ .status-badge.closing-soon{ background:linear-gradient(120deg,rgba(54,215,183,0.18),rgba(251,191,36,0.10)) !important; color:#3ddfb9 !important;-webkit-text-fill-color:#3ddfb9 !important; border-color:rgba(54,215,183,0.55); text-shadow:0 0 6px rgba(54,215,183,0.3); } /* OPENING-SOON — closed but warm-amber to invite (static) */ .status-badge.opening-soon{ background:linear-gradient(120deg,rgba(239,68,68,0.14),rgba(251,191,36,0.10)) !important; color:#ffb87a !important;-webkit-text-fill-color:#ffb87a !important; border-color:rgba(251,191,36,0.45); text-shadow:0 0 6px rgba(251,191,36,0.30); } @keyframes sb-dot-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} } @keyframes sb-glow-amber{ 0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0)} 50%{box-shadow:0 0 12px 2px rgba(251,191,36,0.30)} } /* Legacy aliases — kept so existing code that may reference these still works */ @keyframes pulse-soon-amber{0%,100%{opacity:1}50%{opacity:.7}} @keyframes pulse-soon-green{0%,100%{opacity:1}50%{opacity:.7}} @keyframes pulse-soon-red {0%,100%{opacity:1}50%{opacity:.7}} /* Subline — "· in 1 h · close at 22:00" */ .status-sub{ display:inline-block;margin-left:6px; font-size:.62rem;font-weight:600; color:var(--text3) !important;-webkit-text-fill-color:var(--text3) !important; background:none !important;-webkit-background-clip:initial !important;background-clip:initial !important; letter-spacing:.02em;font-variant-numeric:tabular-nums; text-transform:none;vertical-align:baseline; opacity:.85; } .status-sub.closing-sub{ color:#fbbf24 !important;-webkit-text-fill-color:#fbbf24 !important; opacity:1;font-weight:700; } .status-sub.opening-sub{ color:#3ddfb9 !important;-webkit-text-fill-color:#3ddfb9 !important; opacity:1;font-weight:700; } /* Light theme — softer surface + readable text */ body.light-theme .status-badge.open{ background:rgba(5,150,105,0.10) !important; color:#059669 !important;-webkit-text-fill-color:#059669 !important; border-color:rgba(5,150,105,0.40);text-shadow:none; } body.light-theme .status-badge.closed{ background:rgba(220,38,38,0.10) !important; color:#dc2626 !important;-webkit-text-fill-color:#dc2626 !important; border-color:rgba(220,38,38,0.40);text-shadow:none; } body.light-theme .status-badge.closing-soon{ background:linear-gradient(120deg,rgba(5,150,105,0.12),rgba(217,119,6,0.08)) !important; color:#047857 !important;-webkit-text-fill-color:#047857 !important; border-color:rgba(5,150,105,0.40);text-shadow:none; } body.light-theme .status-badge.opening-soon{ background:linear-gradient(120deg,rgba(220,38,38,0.10),rgba(217,119,6,0.10)) !important; color:#b45309 !important;-webkit-text-fill-color:#b45309 !important; border-color:rgba(217,119,6,0.45);text-shadow:none; } body.light-theme .status-sub.closing-sub{color:#b45309 !important;-webkit-text-fill-color:#b45309 !important} body.light-theme .status-sub.opening-sub{color:#059669 !important;-webkit-text-fill-color:#059669 !important} /* ====== FEATURE: Search in Explore ====== */ .explore-search{display:flex;align-items:center;gap:6px;padding:6px 12px;margin:0 0 8px;background:var(--wet);border:1px solid var(--wet-border);border-radius:14px} .explore-search input{flex:1;background:none;border:none;color:var(--text);font-size:.82rem;font-family:inherit;outline:none} .explore-search input::placeholder{color:var(--text3)} .explore-search-clear{background:none;border:none;color:var(--text3);font-size:1rem;cursor:pointer;padding:2px 4px;display:none} .explore-search.has-value .explore-search-clear{display:block} /* ====== FEATURE: Walking Routes ====== */ .routes-scroll{display:flex;gap:10px;overflow-x:auto;padding:6px 0 8px;-webkit-overflow-scrolling:touch} .routes-scroll::-webkit-scrollbar{display:none} .route-card{position:relative;min-width:200px;max-width:220px;padding:14px 14px 14px 18px;background:linear-gradient(135deg,rgba(255,255,255,0.035),rgba(255,255,255,0.012));border:1px solid rgba(255,255,255,0.06);border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.04);cursor:pointer;flex-shrink:0;transition:transform .15s,box-shadow .15s;overflow:hidden} .route-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sky);border-radius:0 3px 3px 0;opacity:.9} .route-card:active{transform:scale(.96)} .route-card:active::before{opacity:1} .route-card-icon{font-size:1.3rem;margin-bottom:6px} .route-card-title{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:3px} .route-card-desc{font-size:.7rem;color:var(--text2);line-height:1.3;margin-bottom:6px} .route-card-meta{font-size:.65rem;color:var(--text3);display:flex;gap:8px} .route-overlay{position:fixed;inset:0;z-index:9999;background:#000;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0)} .route-overlay-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(180deg,rgba(14,14,14,0.97),rgba(14,14,14,0.92));backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-bottom:1px solid rgba(255,255,255,0.08);box-shadow:0 4px 20px rgba(0,0,0,0.5);flex-shrink:0;position:relative;z-index:1100} .route-overlay-close{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.72);font-size:1.05rem;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s;padding:0} .route-overlay-close:active{background:rgba(255,255,255,0.15);transform:scale(0.9)} .route-overlay-title{flex:1;font-weight:700;font-size:.88rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;letter-spacing:0.01em} .route-overlay-geo{padding:7px 12px;border-radius:10px;border:1.5px solid rgba(245,166,35,0.3);background:rgba(245,166,35,0.1);color:var(--sand);font-size:.72rem;font-weight:700;cursor:pointer;flex-shrink:0;font-family:inherit;display:flex;align-items:center;gap:4px;transition:all .2s} .route-overlay-geo:active{transform:scale(.95);background:rgba(245,166,35,0.18)} .route-overlay-geo.on{background:rgba(54,215,183,0.14);border-color:rgba(54,215,183,0.38);color:var(--sea)} .route-overlay-geo.on:active{background:rgba(54,215,183,0.22)} .route-overlay-map{flex:1;position:relative;z-index:1;background:#111} .route-overlay-map .leaflet-control-attribution{background:rgba(14,14,14,0.7)!important;color:rgba(255,255,255,0.45)!important;border-radius:6px 0 0 0;font-size:.55rem!important} .route-overlay-map .leaflet-control-attribution a{color:rgba(54,215,183,0.75)!important} .route-overlay-map .leaflet-popup-content-wrapper{background:linear-gradient(160deg,rgba(32,32,32,0.98),rgba(20,20,20,0.97));backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);color:var(--text);border:1px solid rgba(255,255,255,0.1);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,0.6)} .route-overlay-map .leaflet-popup-content{margin:10px 14px;font-size:.78rem;font-weight:600;line-height:1.3} .route-overlay-map .leaflet-popup-tip{background:rgba(24,24,24,0.97);border:1px solid rgba(255,255,255,0.1)} .route-overlay-map .leaflet-popup-close-button{color:rgba(255,255,255,0.55)!important} .route-stops-list{max-height:35vh;overflow-y:auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0));background:linear-gradient(180deg,rgba(14,14,14,0.97),rgba(10,10,10,0.99));backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-top:1px solid rgba(255,255,255,0.08);box-shadow:0 -6px 30px rgba(0,0,0,0.5)} .route-stop-item{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:.82rem;color:var(--text);border-bottom:1px solid rgba(255,255,255,0.04)} .route-stop-item:last-child{border-bottom:none} .route-stop-num{width:24px;height:24px;border-radius:50%;background:var(--sea);color:#000;font-weight:800;font-size:.7rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(54,215,183,0.35)} .route-stop-name{flex:1;line-height:1.3} /* ====== FEATURE: Pull to refresh ====== */ .ptr-indicator{text-align:center;padding:0;height:0;overflow:hidden;transition:height .2s,padding .2s;color:var(--text2);font-size:.8rem} .ptr-indicator.active{height:40px;padding:10px 0} .ptr-indicator.refreshing{height:40px;padding:10px 0} /* ====== FEATURE: Skeleton loading ====== */ @keyframes skeleton-pulse{0%{opacity:.4}50%{opacity:.8}100%{opacity:.4}} .skeleton-weather{height:80px;margin-bottom:8px;border-radius:var(--r)} .skeleton-exchange{height:36px;margin-bottom:8px;border-radius:20px} /* ====== FEATURE: Swipe indicator ====== */ .swipe-hint{position:absolute;top:50%;transform:translateY(-50%);width:3px;height:40px;background:rgba(255,255,255,0.1);border-radius:2px;pointer-events:none;opacity:0;transition:opacity .3s} .swipe-hint.left{left:2px} .swipe-hint.right{right:2px} /* ===== PHARMACY — green & mint ===== */ #exploreContent[data-cat="pharmacy"] .place-card::before{background:linear-gradient(180deg,#4ade80,#166534)} #exploreContent[data-cat="pharmacy"] .place-card{border-color:rgba(74,222,128,0.12)} #exploreContent[data-cat="pharmacy"] .place-card:active{border-color:rgba(74,222,128,0.3);box-shadow:0 0 24px rgba(74,222,128,0.1)} #exploreContent[data-cat="pharmacy"] .pc-name{background:linear-gradient(135deg,#BBF7D0,#fff,#86EFAC);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} #exploreContent[data-cat="pharmacy"] .pc-price{background:rgba(74,222,128,0.15);color:#86EFAC;box-shadow:0 0 8px rgba(74,222,128,0.1)} .pill[data-cat="pharmacy"].active{background:rgba(74,222,128,0.28)!important;border-color:rgba(74,222,128,0.45)!important;color:#fff!important;box-shadow:0 0 16px rgba(74,222,128,0.25) backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } /* ===== GROCERY — warm orange ===== */ #exploreContent[data-cat="grocery"] .place-card::before{background:linear-gradient(180deg,#FB923C,#9A3412)} #exploreContent[data-cat="grocery"] .place-card{border-color:rgba(251,146,60,0.12)} #exploreContent[data-cat="grocery"] .place-card:active{border-color:rgba(251,146,60,0.3);box-shadow:0 0 24px rgba(251,146,60,0.1)} #exploreContent[data-cat="grocery"] .pc-name{background:linear-gradient(135deg,#FED7AA,#fff,#FDBA74);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} #exploreContent[data-cat="grocery"] .pc-price{background:rgba(251,146,60,0.15);color:#FDBA74;box-shadow:0 0 8px rgba(251,146,60,0.1)} #exploreContent[data-cat="grocery"] .pc-link{border-color:rgba(251,146,60,0.3);color:#FDBA74} .pill[data-cat="grocery"].active{background:rgba(251,146,60,0.28)!important;border-color:rgba(251,146,60,0.45)!important;color:#fff!important;box-shadow:0 0 16px rgba(251,146,60,0.25) backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } /* ===== ACTIVITIES (water) — cyan & aqua ===== */ #exploreContent[data-cat="water"] .place-card::before{background:linear-gradient(180deg,#22D3EE,#164E63)} #exploreContent[data-cat="water"] .place-card{border-color:rgba(34,211,238,0.12)} #exploreContent[data-cat="water"] .place-card:active{border-color:rgba(34,211,238,0.3);box-shadow:0 0 24px rgba(34,211,238,0.1)} #exploreContent[data-cat="water"] .pc-name{background:linear-gradient(135deg,#A5F3FC,#fff,#67E8F9);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} #exploreContent[data-cat="water"] .pc-price{background:rgba(34,211,238,0.15);color:#67E8F9;box-shadow:0 0 8px rgba(34,211,238,0.1)} .pill[data-cat="water"].active{background:rgba(34,211,238,0.28)!important;border-color:rgba(34,211,238,0.45)!important;color:#fff!important;box-shadow:0 0 16px rgba(34,211,238,0.25) backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } /* ===== WINE — burgundy & rose ===== */ #exploreContent[data-cat="wine"] .place-card::before{background:linear-gradient(180deg,#F472B6,#831843)} #exploreContent[data-cat="wine"] .place-card{border-color:rgba(244,114,182,0.12)} #exploreContent[data-cat="wine"] .place-card:active{border-color:rgba(244,114,182,0.3);box-shadow:0 0 24px rgba(244,114,182,0.1)} #exploreContent[data-cat="wine"] .pc-name{background:linear-gradient(135deg,#FBCFE8,#fff,#F9A8D4);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} #exploreContent[data-cat="wine"] .pc-price{background:rgba(244,114,182,0.15);color:#F9A8D4;box-shadow:0 0 8px rgba(244,114,182,0.1)} .pill[data-cat="wine"].active{background:rgba(244,114,182,0.28)!important;border-color:rgba(244,114,182,0.45)!important;color:#fff!important;box-shadow:0 0 16px rgba(244,114,182,0.25) backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } /* ===== MENU — warm amber ===== */ #exploreContent[data-cat="menu"] .place-card::before{background:linear-gradient(180deg,#FBBF24,#92400E)} #exploreContent[data-cat="menu"] .place-card{border-color:rgba(251,191,36,0.12)} #exploreContent[data-cat="menu"] .place-card:active{border-color:rgba(251,191,36,0.3);box-shadow:0 0 24px rgba(251,191,36,0.1)} #exploreContent[data-cat="menu"] .pc-name{background:linear-gradient(135deg,#FDE68A,#fff,#FCD34D);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} #exploreContent[data-cat="menu"] .pc-price{background:rgba(251,191,36,0.15);color:#FCD34D;box-shadow:0 0 8px rgba(251,191,36,0.1)} .pill[data-cat="menu"].active{background:rgba(251,191,36,0.28)!important;border-color:rgba(251,191,36,0.45)!important;color:#fff!important;box-shadow:0 0 16px rgba(251,191,36,0.25) backdrop-filter:blur(14px) saturate(180%)!important; -webkit-backdrop-filter:blur(14px) saturate(180%)!important; } /* ===== UNIFIED PLACE-CARD STYLE — mirrors sport/concert cards (soft tinted glass + left accent) ===== */ #exploreContent .place-card{ background:linear-gradient(135deg,rgba(255,255,255,0.035),rgba(255,255,255,0.012))!important; border-radius:12px!important; box-shadow:0 2px 10px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.04)!important; } #exploreContent .place-card::after{display:none!important} #exploreContent .place-card::before{ transform:scaleY(1)!important; width:3px!important; top:0!important;bottom:0!important;left:0!important; border-radius:0 3px 3px 0!important; opacity:.9; } /* 2026-05-27: card flicker fix — :active rules across categories shifted border-color (.12 → .3 opacity) + added a colored box-shadow glow, with .25s transitions. During touch-scroll the finger briefly hit each card under it, lighting it up then fading out — perceived as «flicker». Make :active visually identical to resting per category (lock border-color to the resting value, drop the glow box-shadow, keep accent stripe steady). First attempt used border-color:inherit which evaluated to the parent text color → white outline on tap — replaced with per-category locks. */ #exploreContent .place-card{transition:transform .15s ease!important} #exploreContent .place-card:active{ box-shadow:0 2px 10px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.04)!important; } #exploreContent .place-card:active::before{opacity:.9!important} /* Per-category :active border-color locked to resting opacity (0.12), so the tap-darken (.12 → .3) no longer flickers cards under finger during scroll. List order matches the resting rules above; fast_food uses var(--card-bdr-soft). */ #exploreContent[data-cat="nightclubs"] .place-card:active{border-color:rgba(191,90,242,0.12)!important} #exploreContent[data-cat="karaoke"] .place-card:active{border-color:rgba(54,215,183,0.12)!important} #exploreContent[data-cat="fast_food"] .place-card:active{border-color:var(--card-bdr-soft)!important} #exploreContent[data-cat="concerts"] .place-card:active{border-color:rgba(255,159,10,0.12)!important} #exploreContent[data-cat="casinos"] .place-card:active{border-color:rgba(255,215,0,0.12)!important} #exploreContent[data-cat="sports"] .place-card:active{border-color:rgba(0,180,216,0.12)!important} #exploreContent[data-cat="shopping"] .place-card:active{border-color:rgba(247,37,133,0.12)!important} #exploreContent[data-cat="beauty"] .place-card:active{border-color:rgba(54,215,183,0.12)!important} #exploreContent[data-cat="cafes"] .place-card:active{border-color:rgba(232,168,124,0.12)!important} #exploreContent[data-cat="bars"] .place-card:active{border-color:rgba(180,140,255,0.12)!important} #exploreContent[data-cat="photos"] .place-card:active{border-color:rgba(168,85,247,0.12)!important} #exploreContent[data-cat="restaurants"] .place-card:active{border-color:rgba(239,68,68,0.12)!important} #exploreContent[data-cat="excursions"] .place-card:active{border-color:rgba(52,211,153,0.12)!important} #exploreContent[data-cat="beaches"] .place-card:active{border-color:rgba(34,211,238,0.12)!important} #exploreContent[data-cat="sights"] .place-card:active{border-color:rgba(251,191,36,0.12)!important} #exploreContent[data-cat="hotels"] .place-card:active{border-color:rgba(129,140,248,0.12)!important} #exploreContent[data-cat="pharmacy"] .place-card:active{border-color:rgba(74,222,128,0.12)!important} #exploreContent[data-cat="grocery"] .place-card:active{border-color:rgba(251,146,60,0.12)!important} #exploreContent[data-cat="water"] .place-card:active{border-color:rgba(34,211,238,0.12)!important} #exploreContent[data-cat="wine"] .place-card:active{border-color:rgba(244,114,182,0.12)!important} #exploreContent[data-cat="menu"] .place-card:active{border-color:rgba(251,191,36,0.12)!important} /* Stars badge positioned globally via base .pc-stars rule (order:-1, margin-right:auto) */ /* === EXPAND BUTTON === */ /* === NEARBY HOME SECTION === */ .nearby-home-list{display:flex;flex-direction:column;gap:.35rem;padding:0 .3rem} .nb-locked{opacity:.7} .nb-blur{filter:blur(5px);user-select:none} .nb-lock{color:var(--sand);font-size:.9rem;padding-left:.3rem} .nb-unlock-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.6rem;margin-top:.4rem;background:linear-gradient(135deg,rgba(245,166,35,0.1),rgba(245,166,35,0.05));border:1px solid rgba(245,166,35,0.2);border-radius:12px;color:var(--sand);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s} .nb-unlock-btn:active{transform:scale(0.97);background:rgba(245,166,35,0.15)} /* === PILL HOME BUTTON === */ .pill-home{position:sticky;left:0;z-index:2;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:rgba(54,215,183,0.1);border:1px solid rgba(54,215,183,0.25);color:var(--sea);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;margin-right:.3rem} .pill-home:active{background:rgba(54,215,183,0.2);transform:scale(0.9)} /* === SUNSET/RAIN ROW === */ .sunset-rain-row{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem .5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none} .sunset-rain-row::-webkit-scrollbar{display:none} .sr-chip{display:flex;align-items:center;gap:.25rem;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:.35rem .6rem;white-space:nowrap;cursor:pointer;font-size:.72rem;color:var(--text2);transition:background .2s} .sr-chip:active{background:rgba(255,255,255,0.08)} .sr-sea{background:rgba(69,174,245,0.08)!important;border-color:rgba(69,174,245,0.18)!important;color:var(--sky)!important} .sr-icon{font-size:.85rem} .sr-label{color:var(--text3);font-size:.65rem} .sr-val{color:var(--sky);font-weight:600} .sr-rain{border-color:rgba(255,107,138,0.2);background:rgba(255,107,138,0.05)} .sr-rain .sr-val{color:var(--coral)} /* === NEARBY BUTTON === */ .nearby-btn{display:flex;align-items:center;gap:.4rem;background:linear-gradient(135deg,rgba(54,215,183,0.1),rgba(54,215,183,0.05));border:1px solid rgba(54,215,183,0.15);border-radius:14px;padding:.55rem 1rem;color:var(--sea);font-size:.78rem;font-weight:600;cursor:pointer;margin:.3rem .8rem;transition:all .2s;width:calc(100% - 1.6rem)} .nearby-btn:active{transform:scale(0.97);background:rgba(54,215,183,0.15)} .nearby-btn svg{flex-shrink:0} /* === NEARBY MODAL === */ .nearby-modal-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;margin-bottom:.5rem} .nearby-modal-header h3{margin:0;font-size:1rem;color:var(--text)} .nearby-list{display:flex;flex-direction:column;gap:.4rem} .nearby-item{display:flex;align-items:center;gap:.6rem;padding:.6rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:12px;cursor:pointer;transition:background .2s} .nearby-item:active{background:rgba(255,255,255,0.07)} .nb-icon{font-size:1.3rem;width:2rem;text-align:center} .nb-info{flex:1;min-width:0} .nb-name{font-size:.8rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nb-meta{font-size:.7rem;color:var(--text3);margin-top:.1rem} .nb-open{color:#4caf50;font-weight:600;margin-left:.3rem} .nb-closed{color:var(--coral);font-weight:600;margin-left:.3rem} .nb-arrow{color:var(--text3);font-size:1.2rem;padding-left:.3rem} /* ============ THEME PICKER ============ */ .theme-btn{ width:28px;height:28px;border-radius:50%;border:none;cursor:pointer; background:conic-gradient(var(--sea),var(--sky),var(--sand),var(--coral),var(--sea)); display:flex;align-items:center;justify-content:center; transition:all .25s;-webkit-tap-highlight-color:transparent; box-shadow:0 0 0 1.5px rgba(255,255,255,0.12); flex-shrink:0; } .theme-btn:active{transform:scale(.85)} .tp-overlay{ position:fixed;inset:0;z-index:200; display:flex;align-items:flex-end;justify-content:center; background:rgba(0,0,0,0.5); opacity:1;transition:opacity .3s; } .tp-overlay.hidden{opacity:0;pointer-events:none} .tp-sheet{ width:100%;max-width:420px; background:var(--bg2);border-radius:20px 20px 0 0; padding:1rem 1rem calc(1rem + var(--safe-b)); border:1px solid rgba(255,255,255,0.1);border-bottom:none; box-shadow:0 -8px 40px rgba(0,0,0,0.4); backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px); transform:translateY(0);transition:transform .35s cubic-bezier(.32,.72,.32,1); } .tp-overlay.hidden .tp-sheet{transform:translateY(100%)} .tp-handle{width:36px;height:4px;background:rgba(255,255,255,0.15);border-radius:2px;margin:0 auto .8rem} .tp-title{ font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700; color:var(--text);text-align:center;margin-bottom:.8rem; } .tp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:.5rem;max-height:min(62vh,520px);overflow-y:auto;padding:2px 3px 8px;scrollbar-width:thin} .tp-group-title{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:.68rem;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.09em;margin:8px 2px 1px} .tp-group-title::after{content:'';height:1px;flex:1;background:var(--border)} .tp-swatch{ aspect-ratio:1;border-radius:18px;cursor:pointer;position:relative; border:2px solid var(--border);transition:all .25s; overflow:hidden; } .tp-swatch::before{ content:'';position:absolute;top:0;left:0;right:0;height:40%; background:linear-gradient(180deg,rgba(255,255,255,0.15),transparent); border-radius:16px 16px 50% 50%;pointer-events:none; } .tp-swatch:active{transform:scale(.9)} .tp-swatch .tp-check{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:1.2rem;opacity:0;transition:opacity .2s; } .tp-swatch.active .tp-check{opacity:1} .tp-name{ font-size:.6rem;font-weight:600;color:var(--text3);text-align:center; margin-top:4px;letter-spacing:.3px; } .tp-swatch.active{border-color:var(--sea);box-shadow:0 0 0 2px var(--sea),0 4px 16px rgba(0,0,0,0.15)} @media(max-width:360px){.tp-grid{gap:8px}.tp-name{font-size:.56rem}.tp-swatch{border-radius:15px}} .tp-custom{grid-column:1/-1;display:flex;flex-direction:column;gap:16px;padding:6px 2px 4px} .tp-custom-preview{height:88px;border-radius:18px;border:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 24px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;transition:background .15s} .tp-custom-preview span{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.75rem;font-weight:800;color:var(--text);border:1px solid rgba(255,255,255,.2)} .tp-control{display:flex;flex-direction:column;gap:8px} .tp-control-head{display:flex;align-items:center;justify-content:space-between;font-size:.72rem;font-weight:700;color:var(--text2)} .tp-control-val{font-variant-numeric:tabular-nums;color:var(--sea)} .tp-color-row{display:flex;align-items:center;gap:12px} .tp-native-color{width:52px;height:42px;border:0;padding:0;background:none;border-radius:12px;overflow:hidden;cursor:pointer;flex-shrink:0} .tp-native-color::-webkit-color-swatch-wrapper{padding:0}.tp-native-color::-webkit-color-swatch{border:2px solid var(--border);border-radius:12px} .tp-range{width:100%;height:22px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer} .tp-range::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:var(--track);border:1px solid rgba(127,127,127,.18)} .tp-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--sea);box-shadow:0 2px 8px rgba(0,0,0,.25);margin-top:-7px} .tp-range::-moz-range-track{height:10px;border-radius:999px;background:var(--track);border:1px solid rgba(127,127,127,.18)} .tp-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--sea);box-shadow:0 2px 8px rgba(0,0,0,.25)} .tp-hue{--track:linear-gradient(90deg,#f44,#ff0,#4f4,#0ff,#44f,#f0f,#f44)} .tp-lightness{--track:linear-gradient(90deg,#080b10,#6f7782,#fff)} .tp-custom-hint{font-size:.66rem;line-height:1.45;color:var(--text3);text-align:center;padding:0 10px} .tp-color-field{position:relative;height:176px;border-radius:18px;overflow:hidden;touch-action:none;cursor:crosshair;border:1px solid rgba(127,127,127,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 22px rgba(0,0,0,.12);background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--picker-hue),100%,50%)} .tp-field-knob{position:absolute;width:24px;height:24px;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.15);transform:translate(-50%,-50%);pointer-events:none} .tp-mode{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;border-radius:14px;background:rgba(127,127,127,.10);border:1px solid var(--border)} .tp-mode-btn{padding:9px 10px;border:0;border-radius:10px;background:transparent;color:var(--text3);font-family:inherit;font-size:.72rem;font-weight:800;cursor:pointer} .tp-mode-btn.active{background:var(--card-grad);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.12);outline:1px solid var(--border)} .tp-contrast-note{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:11px;background:color-mix(in srgb,var(--sea) 9%,transparent);border:1px solid color-mix(in srgb,var(--sea) 22%,transparent);font-size:.65rem;color:var(--text2);line-height:1.35} /* ============ LIGHT THEME OVERRIDES ============ */ /* --- Light reusable shadows --- */ body.light-theme{ background-color:var(--theme-canvas,var(--bg)); background-image: radial-gradient(ellipse 85% 60% at 92% 4%,color-mix(in srgb,var(--theme-accent2) 10%,transparent),transparent 58%), radial-gradient(ellipse 75% 55% at 4% 92%,color-mix(in srgb,var(--theme-accent) 8%,transparent),transparent 62%), linear-gradient(180deg,var(--theme-canvas,var(--bg)),var(--theme-surface,var(--bg2))) } body.light-theme::before{background:none} body.light-theme::after{background:none} body.light-theme .app{ background: radial-gradient(ellipse 85% 60% at 92% 4%,color-mix(in srgb,var(--theme-accent2) 10%,transparent),transparent 58%), radial-gradient(ellipse 75% 55% at 4% 92%,color-mix(in srgb,var(--theme-accent) 8%,transparent),transparent 62%), linear-gradient(180deg,var(--theme-canvas,var(--bg)),var(--theme-surface,var(--bg2))) } /* --- Shell: topbar / bottomnav --- */ body.light-theme .topbar{ background:color-mix(in srgb,var(--theme-bar,#fff) 94%,transparent); box-shadow:0 1px 2px rgba(0,0,0,0.06),0 4px 16px rgba(0,0,0,0.04),inset 0 -1px 0 rgba(0,0,0,0.04); backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4); } body.light-theme .topbar::after{background:linear-gradient(90deg,transparent,var(--sea) 30%,var(--sky) 50%,var(--sand) 70%,transparent);opacity:.15} body.light-theme .bottomnav{ background:color-mix(in srgb,var(--theme-bar,#fff) 92%,var(--theme-surface,var(--bg2)))!important; box-shadow:0 -1px 2px rgba(0,0,0,0.05),0 -6px 20px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.7); backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4); } body.light-theme .bottomnav::before{background:none} body.light-theme .bnav-item .icon svg{color:var(--text3)} body.light-theme .bnav-item .label{color:var(--text3)} body.light-theme .bnav-item.active .icon svg{color:var(--sea);filter:drop-shadow(0 2px 6px rgba(54,215,183,0.3))} body.light-theme .bnav-item.active .label{color:var(--sea)} body.light-theme .bnav-item.active::before{background:rgba(54,215,183,0.1);box-shadow:0 0 12px rgba(54,215,183,0.08)} body.light-theme .bnav-item.sos-tab.active .icon svg{color:var(--coral);filter:drop-shadow(0 2px 6px rgba(255,107,138,0.3))} body.light-theme .bnav-item.sos-tab.active .label{color:var(--coral)} /* --- Modals --- */ body.light-theme .lp-modal{background:rgba(255,255,255,0.97);border-color:rgba(0,0,0,0.05); box-shadow:0 8px 24px rgba(0,0,0,0.08),0 24px 60px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.8)} body.light-theme .tp-sheet{background:var(--bg2);border-color:rgba(0,0,0,0.05); box-shadow:0 -4px 16px rgba(0,0,0,0.06),0 -12px 48px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.7)} body.light-theme .tp-handle{background:rgba(0,0,0,0.12)} body.light-theme .donate-modal{background:linear-gradient(160deg,rgba(255,255,255,0.98),rgba(250,250,255,0.97));border-color:rgba(0,0,0,0.05); box-shadow:0 8px 24px rgba(0,0,0,0.08),0 24px 60px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.8)} body.light-theme .t-geo-confirm{background:rgba(255,255,255,0.97);border-color:rgba(0,0,0,0.06); box-shadow:0 8px 32px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.8)} /* --- Cards: 3D raised with inset highlight + layered shadow --- */ body.light-theme .cat-card{ background: radial-gradient(ellipse at 50% 115%, color-mix(in srgb, var(--grp) 22%, transparent) 0%, transparent 55%), linear-gradient(165deg,rgba(255,255,255,0.62),rgba(255,255,255,0.32)); background-color:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.6);border-top:1px solid rgba(255,255,255,0.85); backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4); box-shadow:0 2px 4px rgba(0,0,0,0.04),0 6px 20px rgba(0,0,0,0.08),inset 0 1px 2px rgba(255,255,255,0.9),inset 0 -1px 2px rgba(0,0,0,0.04); } body.light-theme .cat-card::before{background:linear-gradient(180deg,rgba(255,255,255,0.6),transparent)} body.light-theme .cat-card:active{box-shadow:inset 0 2px 8px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.03)} body.light-theme .place-card, body.light-theme .t-result, body.light-theme .t-route-card, body.light-theme .t-info-card, body.light-theme .t-sub-card, body.light-theme .t-route-list-item{ background:linear-gradient(168deg,rgba(255,255,255,0.97),rgba(255,255,255,0.88)); border-color:rgba(0,0,0,0.05);border-top-color:rgba(255,255,255,0.8); border-bottom-color:rgba(0,0,0,0.08); box-shadow:0 2px 4px rgba(0,0,0,0.05),0 6px 20px rgba(0,0,0,0.07),inset 0 1px 1px rgba(255,255,255,0.95),inset 0 -1px 1px rgba(0,0,0,0.03); } body.light-theme .info-card{ background:linear-gradient(145deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85)); border-color:rgba(0,0,0,0.05);border-top-color:rgba(255,255,255,0.7); box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .info-card::after{display:none} body.light-theme .info-card.open{border-color:rgba(54,215,183,0.2); box-shadow:0 2px 6px rgba(54,215,183,0.06),0 8px 24px rgba(54,215,183,0.08),inset 0 1px 0 rgba(255,255,255,0.8)} body.light-theme .sos-card{ background:linear-gradient(145deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85)); border-color:rgba(0,0,0,0.05);border-top-color:rgba(255,255,255,0.7); box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .exc-card,body.light-theme .phrase-card{ background:linear-gradient(145deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85)); border-color:rgba(0,0,0,0.05);border-top-color:rgba(255,255,255,0.7); box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .tip-bubble{ background:linear-gradient(145deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85)); border-color:rgba(0,0,0,0.05); box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.9); } /* --- Pills: raised chip --- */ body.light-theme .pill{ background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,255,255,0.88)); border-color:rgba(0,0,0,0.06); box-shadow:0 1px 2px rgba(0,0,0,0.05),0 3px 10px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .pill.active{box-shadow:0 2px 6px rgba(54,215,183,0.2),0 4px 16px rgba(54,215,183,0.12),inset 0 1px 0 rgba(255,255,255,0.2)} /* --- Chips: exchange, quick actions, weather suggest --- */ body.light-theme .exr-chip, body.light-theme .qa-btn, body.light-theme .ws-chip, body.light-theme .sr-chip{ background:linear-gradient(165deg,rgba(255,255,255,0.95),rgba(255,255,255,0.82)); border-color:rgba(0,0,0,0.05); box-shadow:0 1px 3px rgba(0,0,0,0.04),0 3px 10px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.9); } /* --- Search bar: inset + raised --- */ body.light-theme .search-input{color:var(--text)} body.light-theme .home-search-input-wrap{ background:linear-gradient(165deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85)); border-color:rgba(0,0,0,0.06); box-shadow:0 2px 6px rgba(0,0,0,0.05),0 6px 20px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .home-search-input-wrap::before{display:none} body.light-theme .home-search-input-wrap svg{color:var(--text3)} body.light-theme .home-search-bar input{color:var(--text)} body.light-theme .home-search-bar input::placeholder{color:var(--text3)} body.light-theme .home-search-bar .search-results{ background:rgba(255,255,255,0.98);border-color:rgba(0,0,0,0.06); box-shadow:0 8px 24px rgba(0,0,0,0.08),0 20px 48px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.8)} body.light-theme .sr-item{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.04)} /* --- Section title: raised glass --- */ body.light-theme .sec-title{ background:linear-gradient(165deg,rgba(255,255,255,0.92),rgba(255,255,255,0.8)); border-color:rgba(0,0,0,0.05); box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.9); } /* --- Transport / forms --- */ body.light-theme .t-hero{ background:linear-gradient(145deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85)); border-color:rgba(0,0,0,0.05); box-shadow:0 2px 6px rgba(0,0,0,0.04),0 6px 20px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .t-hero::before{display:none} body.light-theme .t-search-input, body.light-theme .t-planner-input, body.light-theme .stop-picker-search, body.light-theme .conv-input,body.light-theme .conv-select{ background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.07);color:var(--text); box-shadow:inset 0 1px 3px rgba(0,0,0,0.04),0 1px 0 rgba(255,255,255,0.8); } body.light-theme .t-geo-btn, body.light-theme .t-planner-swap, body.light-theme .conv-swap-btn{ background:linear-gradient(165deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85)); border-color:rgba(0,0,0,0.06); box-shadow:0 1px 3px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .t-tabs-bar{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.05); box-shadow:inset 0 1px 3px rgba(0,0,0,0.04)} body.light-theme .t-how-step{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.05)} body.light-theme .t-how-step-text{color:var(--text2)} body.light-theme .t-geo-stop{ background:linear-gradient(145deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85)); border-color:rgba(0,0,0,0.05); box-shadow:0 2px 6px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .t-geo-stop-name{color:var(--text)} body.light-theme .translator-card{ background:linear-gradient(145deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85)); border-color:rgba(0,0,0,0.06); box-shadow:0 2px 6px rgba(0,0,0,0.04),0 6px 20px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .translator-input{ background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.08);color:var(--text); box-shadow:inset 0 1px 3px rgba(0,0,0,0.04); } body.light-theme .translator-input:focus{background:rgba(0,0,0,0.02);border-color:rgba(54,215,183,0.3)} /* --- Weather --- */ body.light-theme .weather-full{ background:linear-gradient(180deg,#fff,#f8fafc 60%,#f1f5f9);border-color:rgba(0,0,0,0.05); box-shadow:0 2px 6px rgba(0,0,0,0.04),0 8px 24px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .weather-modal-overlay{ background: radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--theme-accent,var(--sea)) 16%,transparent) 0%,transparent 52%), linear-gradient(180deg,rgba(248,250,252,.76),rgba(245,247,248,.92)); } body.light-theme .weather-modal{ background: radial-gradient(ellipse at 78% 0%,color-mix(in srgb,var(--theme-accent2,var(--sky)) 15%,transparent) 0%,transparent 44%), radial-gradient(ellipse at 12% 100%,color-mix(in srgb,var(--theme-accent,var(--sea)) 12%,transparent) 0%,transparent 48%), linear-gradient(180deg,rgba(255,255,255,.98),color-mix(in srgb,var(--bg3) 72%,white 28%)); border-color:rgba(0,0,0,0.06); box-shadow:0 -8px 34px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.88); } body.light-theme .wm-day, body.light-theme .wm-hour{ background:rgba(0,0,0,0.025);border-color:rgba(0,0,0,0.045); } /* --- Lists / misc items --- */ body.light-theme .eat-sheet{background:rgba(255,255,255,0.98);box-shadow:0 -8px 32px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.8)} body.light-theme .eat-sheet-handle{background:rgba(0,0,0,0.12)} body.light-theme .eat-card, body.light-theme .crypto-item, body.light-theme .stop-picker-item, body.light-theme .nearby-item, body.light-theme .seasonal-widget, body.light-theme .my-place-chip, body.light-theme .route-card{ background:linear-gradient(165deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85)); border-color:rgba(0,0,0,0.05); box-shadow:0 1px 3px rgba(0,0,0,0.04),0 3px 10px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .rate-item{border-bottom-color:rgba(0,0,0,0.04)} body.light-theme .home-search-btn{ background:linear-gradient(165deg,rgba(255,255,255,0.9),rgba(255,255,255,0.8)); border-color:rgba(0,0,0,0.06); box-shadow:0 1px 3px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .lang-trigger{ border-color:rgba(0,0,0,0.06); background:linear-gradient(165deg,rgba(255,255,255,0.9),rgba(255,255,255,0.8)); box-shadow:0 1px 3px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .theme-btn{box-shadow:0 1px 4px rgba(0,0,0,0.1),0 0 0 1.5px rgba(0,0,0,0.06)} body.light-theme .explore-search{ background:linear-gradient(165deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85)); border-color:rgba(0,0,0,0.06); box-shadow:0 1px 3px rgba(0,0,0,0.04),0 3px 10px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.9); } body.light-theme .explore-search input{color:var(--text)} body.light-theme .suggest-toast{ background:rgba(255,255,255,0.97);color:var(--text);border-color:var(--sea); box-shadow:0 4px 16px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.8)} body.light-theme ::selection{background:var(--sea);color:#fff} body.light-theme ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12)} body.light-theme .skeleton{background:linear-gradient(90deg,rgba(0,0,0,0.04) 25%,rgba(0,0,0,0.07) 50%,rgba(0,0,0,0.04) 75%);background-size:200% 100%} /* --- Geo / donate buttons --- */ body.light-theme .geo-btn{ background:linear-gradient(135deg,rgba(54,215,183,0.12),rgba(54,215,183,0.06)); border-color:rgba(54,215,183,0.2); box-shadow:0 2px 6px rgba(54,215,183,0.08),inset 0 1px 0 rgba(255,255,255,0.7); } body.light-theme .section-geo-toggle{ box-shadow:0 2px 6px rgba(54,215,183,0.08),inset 0 1px 0 rgba(255,255,255,0.7); } body.light-theme .donate-home-btn{ box-shadow:0 2px 6px rgba(245,166,35,0.08),inset 0 1px 0 rgba(255,255,255,0.7); } .offline-banner{ position:fixed;top:0;left:0;right:0;z-index:9999; display:none;align-items:center;justify-content:center;gap:6px; padding:6px 12px; background:rgba(255,107,138,0.95);color:#fff; font-size:.72rem;font-weight:700;font-family:'Space Grotesk',sans-serif; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transform:translateY(-100%);transition:transform .3s ease; } .offline-banner.show{display:flex;transform:translateY(0)} .pwa-install{ position:fixed;left:12px;right:12px;bottom:calc(var(--bottom-h) + var(--safe-b) + 12px); z-index:9900; background:linear-gradient(135deg,rgba(54,215,183,0.14),rgba(69,174,245,0.12)); border:1px solid rgba(54,215,183,0.35); border-radius:18px;padding:14px 14px 14px 16px; box-shadow:0 10px 30px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); display:none;align-items:center;gap:12px; transform:translateY(30px);opacity:0;transition:transform .35s ease,opacity .35s ease; pointer-events:none; } .pwa-install.show{display:flex;transform:translateY(0);opacity:1;pointer-events:auto} .pwa-install .pwa-ico{ width:44px;height:44px;border-radius:12px;flex:0 0 44px; background:url('/logo-header.png?v=1') center/cover no-repeat; box-shadow:0 6px 14px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.1); } .pwa-install .pwa-txt{flex:1;min-width:0} .pwa-install .pwa-t1{font-weight:700;font-size:14px;color:#eaeaea;line-height:1.2} .pwa-install .pwa-t2{font-size:12px;color:#b0b0b0;margin-top:3px;line-height:1.3} .pwa-install .pwa-actions{display:flex;gap:6px;flex:0 0 auto} .pwa-install .pwa-btn{ border:none;font-size:13px;font-weight:700;padding:8px 12px;border-radius:10px; cursor:pointer;transition:transform .15s ease,background .2s ease; font-family:inherit;white-space:nowrap; } .pwa-install .pwa-btn.primary{background:#36D7B7;color:#0b1f1a} .pwa-install .pwa-btn.primary:active{transform:scale(0.95)} .pwa-install .pwa-btn.ghost{background:rgba(255,255,255,0.06);color:#b0b0b0;padding:8px 10px} .pwa-install .pwa-btn.ghost:active{transform:scale(0.95)} .pwa-ios-hint{ position:fixed;left:12px;right:12px;bottom:calc(var(--bottom-h) + var(--safe-b) + 12px); z-index:9900; background:rgba(28,28,32,0.96); border:1px solid rgba(255,255,255,0.12); border-radius:18px;padding:14px 16px; box-shadow:0 10px 30px rgba(0,0,0,0.5); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); display:none;flex-direction:column;gap:10px; color:#eaeaea;font-size:13px;line-height:1.4; } .pwa-ios-hint.show{display:flex} .pwa-ios-hint .ios-row{display:flex;align-items:center;gap:8px} .pwa-ios-hint .ios-close{position:absolute;top:8px;right:10px;background:none;border:none;color:#707070;font-size:20px;cursor:pointer;padding:4px} .pwa-ios-hint b{color:#36D7B7} /* ========== ALERTS (utility outages) ========== */ .topbar-alert-btn{ position:relative; width:34px;height:34px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:linear-gradient(160deg,#ff4747 0%,#c81f1f 100%); border:1.5px solid rgba(255,255,255,0.22); box-shadow:0 4px 12px rgba(200,31,31,0.4),inset 0 1px 0 rgba(255,255,255,0.25); color:#fff; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; transition:transform .15s ease,background .3s; } .topbar-alert-btn:active{transform:scale(.9)} /* 2026-05-13: ADS button replaces the bell. Same footprint as topbar-menu-btn-round so it doesn't shift the layout. Sand-gold accent so it's visible without being loud. */ .topbar-ads-btn{ position:relative;width:34px;height:34px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;padding:0; background:linear-gradient(160deg,rgba(245,166,35,0.22),rgba(245,166,35,0.08)); border:1px solid rgba(245,166,35,0.45); color:var(--sand,#F5A623); font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:.62rem;letter-spacing:.04em; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:transform .15s ease,background .2s,border-color .2s; box-shadow:0 2px 8px rgba(245,166,35,0.18),inset 0 1px 0 rgba(255,255,255,0.06); } .topbar-ads-btn:hover{background:linear-gradient(160deg,rgba(245,166,35,0.32),rgba(245,166,35,0.12));border-color:rgba(245,166,35,0.6)} .topbar-ads-btn:active{transform:scale(.92)} body.light-theme .topbar-ads-btn{background:linear-gradient(160deg,rgba(245,166,35,0.20),rgba(245,166,35,0.06));border-color:rgba(245,166,35,0.50);color:#9c6300} /* 2026-05-17 — Support button. Same round footprint as ADS so the topbar layout doesn't shift. Sea-tinted to read as "help / contact" not "advertise". */ .topbar-support-btn{ position:relative;width:34px;height:34px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;padding:0; background:linear-gradient(160deg,rgba(54,215,183,0.20),rgba(54,215,183,0.06)); border:1px solid rgba(54,215,183,0.42); color:var(--sea,#36D7B7); cursor:pointer;-webkit-tap-highlight-color:transparent; transition:transform .15s ease,background .2s,border-color .2s; box-shadow:0 2px 8px rgba(54,215,183,0.18),inset 0 1px 0 rgba(255,255,255,0.06); } .topbar-support-btn:hover{background:linear-gradient(160deg,rgba(54,215,183,0.32),rgba(54,215,183,0.12));border-color:rgba(54,215,183,0.6)} .topbar-support-btn:active{transform:scale(.92)} .topbar-support-btn svg{width:16px;height:16px;pointer-events:none} body.light-theme .topbar-support-btn{background:linear-gradient(160deg,rgba(54,215,183,0.18),rgba(54,215,183,0.05));border-color:rgba(54,215,183,0.50);color:#0a8c75} /* Support modal — reuses the glass card pattern from the AI sheet & rentals modal */ .sup-overlay{ position:fixed;inset:0;z-index:9000; display:none;align-items:flex-end;justify-content:center; background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); } .sup-overlay.show{display:flex;animation:supOvIn .18s ease} @keyframes supOvIn{from{opacity:0}to{opacity:1}} .sup-card{ width:100%;max-width:520px;max-height:92vh;overflow:auto; background:linear-gradient(180deg,rgba(20,22,28,.96),rgba(14,16,22,.96)); border:1px solid rgba(54,215,183,.22);border-bottom:0; border-radius:18px 18px 0 0; box-shadow:0 -16px 60px rgba(0,0,0,.55); padding:18px 18px calc(20px + env(safe-area-inset-bottom)); color:var(--text); animation:supCardIn .25s cubic-bezier(.2,.8,.2,1); } @keyframes supCardIn{from{transform:translateY(20px);opacity:.6}to{transform:none;opacity:1}} body.light-theme .sup-card{background:linear-gradient(180deg,#fff,#fafbfc);color:#1c1c1f;border-color:rgba(54,215,183,.30)} .sup-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px} .sup-head .sup-title{flex:1;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.05rem;color:var(--sea);line-height:1.3} .sup-head .sup-sub{font-size:.74rem;color:var(--text2);margin-top:2px;font-weight:500;line-height:1.4} body.light-theme .sup-head .sup-sub{color:#666} .sup-close{ width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04);color:var(--text2);cursor:pointer;font-size:1.1rem;line-height:1; display:flex;align-items:center;justify-content:center;flex-shrink:0; } body.light-theme .sup-close{border-color:rgba(0,0,0,.08);background:rgba(0,0,0,.03);color:#555} .sup-field{margin-bottom:11px} .sup-field label{display:block;font-size:.7rem;color:var(--text2);font-weight:700;margin-bottom:5px;letter-spacing:.02em} .sup-field select,.sup-field input,.sup-field textarea{ width:100%;box-sizing:border-box; padding:10px 12px;border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:var(--text);font-family:inherit;font-size:.86rem; -webkit-appearance:none;appearance:none; } body.light-theme .sup-field select, body.light-theme .sup-field input, body.light-theme .sup-field textarea{ background:#fff;border-color:rgba(0,0,0,.12);color:#1c1c1f; } .sup-field textarea{resize:vertical;min-height:96px;line-height:1.45} .sup-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text2) 50%),linear-gradient(135deg,var(--text2) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px} .sup-field select:focus,.sup-field input:focus,.sup-field textarea:focus{outline:none;border-color:rgba(54,215,183,.55)} .sup-actions{display:flex;gap:8px;margin-top:14px} .sup-actions button{ flex:1;padding:11px 14px;border-radius:11px;border:0;cursor:pointer; font-family:inherit;font-weight:800;font-size:.88rem; transition:transform .12s,opacity .2s; } .sup-actions .sup-cancel{ background:rgba(255,255,255,.06);color:var(--text2); border:1px solid rgba(255,255,255,.10); } .sup-actions .sup-submit{ background:linear-gradient(120deg,#36D7B7,#1ea88b);color:#0a1a17; box-shadow:0 4px 14px rgba(54,215,183,.30); } .sup-actions button:active{transform:scale(.97)} .sup-actions button:disabled{opacity:.55;cursor:default} body.light-theme .sup-actions .sup-cancel{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.10);color:#444} .sup-hint{font-size:.66rem;color:var(--text3);line-height:1.4;margin-top:8px} body.light-theme .sup-hint{color:#777} .sup-status{font-size:.78rem;margin-top:10px;line-height:1.45;min-height:1em} .sup-status.err{color:#ff6b6b} .sup-status.ok{color:#36D7B7} .sup-counter{font-size:.62rem;color:var(--text3);text-align:right;margin-top:3px} /* 2026-05-17 — Inline support card (home bottom / ADS / Info) — same accent as the form modal, lighter so it sits inside other sections without shouting. Renders via renderSupportCard({title,sub,topic,cta}). */ .sup-card-inline{ display:flex;align-items:flex-start;gap:12px; padding:14px 16px; margin:14px; border-radius:14px; background:linear-gradient(140deg,rgba(54,215,183,.10),rgba(54,215,183,.03)); border:1px solid rgba(54,215,183,.28); box-shadow:0 6px 22px rgba(0,0,0,.18); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); color:var(--text); } body.light-theme .sup-card-inline{background:linear-gradient(140deg,rgba(54,215,183,.10),rgba(255,255,255,.6));border-color:rgba(54,215,183,.40);color:#1c1c1f} .sup-card-inline .sup-ic{ flex-shrink:0;width:38px;height:38px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(54,215,183,.16);border:1px solid rgba(54,215,183,.32); color:var(--sea); } .sup-card-inline .sup-ic svg{width:18px;height:18px} .sup-card-inline .sup-body{flex:1;min-width:0} .sup-card-inline .sup-h{font-weight:800;font-size:.92rem;line-height:1.3;margin-bottom:2px} .sup-card-inline .sup-p{font-size:.76rem;color:var(--text2);line-height:1.45;margin-bottom:10px} body.light-theme .sup-card-inline .sup-p{color:#555} .sup-card-inline .sup-btn{ display:inline-flex;align-items:center;gap:6px; padding:8px 14px;border-radius:10px;border:0;cursor:pointer; background:linear-gradient(120deg,#36D7B7,#1ea88b);color:#0a1a17; font-family:inherit;font-weight:800;font-size:.78rem; box-shadow:0 3px 10px rgba(54,215,183,.30); -webkit-tap-highlight-color:transparent; } .sup-card-inline .sup-btn:active{transform:scale(.97)} /* Info-screen variant — full-width row that matches the existing news/info cards. Quick-topic chips wrap below the main CTA. */ .sup-info-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .sup-info-chip{ display:inline-flex;align-items:center;gap:4px; padding:5px 10px;border-radius:999px;font-size:.7rem;font-weight:700; background:rgba(54,215,183,.10);border:1px solid rgba(54,215,183,.28); color:var(--sea);cursor:pointer;-webkit-tap-highlight-color:transparent; transition:transform .12s,background .2s; } .sup-info-chip:active{transform:scale(.95)} .sup-info-chip:hover{background:rgba(54,215,183,.18)} body.light-theme .sup-info-chip{background:rgba(54,215,183,.14);color:#0a8c75;border-color:rgba(54,215,183,.40)} /* 2026-05-14: subtle ADS / Реклама marker on sponsored cards. Rendered INLINE in the title row (same badge zone as the open/closed status badge) so the card stays byte-identical to a normal place-card and the marker can't collide with the absolute .bookmark-btn. Does not affect card size/layout. */ .ads-badge{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; margin-left:.45rem; padding:2px 7px; border-radius:999px; font-family:'Space Grotesk',sans-serif; font-size:9px; font-weight:800; letter-spacing:.06em; line-height:1.5; color:var(--sand,#F5A623); background:rgba(245,166,35,0.10); border:1px solid rgba(245,166,35,0.42); } body.light-theme .ads-badge{color:#9c6300;background:rgba(245,166,35,0.18);border-color:rgba(245,166,35,0.55)} .ads-sponsored{position:relative} .ads-sponsored-wrap{display:contents} /* invisible flex wrapper — cards inherit grid */ /* Sponsored card meta laid out as two clean rows instead of wrapping wherever the flex breaks. Row 1 = info (stars / photos / price), Row 2 = actions (phone / tg / ig / map). */ .ads-actions{display:flex;flex-direction:column;gap:6px;margin-top:.5rem} .ads-actions-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .topbar-alert-btn.idle{ background:linear-gradient(160deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03)); border-color:rgba(255,255,255,0.1); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06); color:var(--text2); } .topbar-alert-btn.has-soon{ background:linear-gradient(160deg,#ffd60a 0%,#d99a00 100%); border-color:rgba(255,255,255,0.25); box-shadow:0 4px 12px rgba(217,154,0,0.35),inset 0 1px 0 rgba(255,255,255,0.3); color:#1a1a1a; } .topbar-alert-btn.has-active{animation:topbarAlertPulse 1.6s ease-in-out infinite} @keyframes topbarAlertPulse{ 0%,100%{box-shadow:0 4px 12px rgba(200,31,31,0.4),inset 0 1px 0 rgba(255,255,255,0.25),0 0 0 0 rgba(255,71,71,0.55)} 50%{box-shadow:0 4px 12px rgba(200,31,31,0.5),inset 0 1px 0 rgba(255,255,255,0.25),0 0 0 10px rgba(255,71,71,0)} } .topbar-alert-badge{ position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0; border-radius:50%; background:#ffd60a; color:#111; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,0.55); border:1.5px solid var(--bg,#0e0e0e); overflow:hidden; } .topbar-alert-badge .tab-num{ position:relative;z-index:2;line-height:1; text-shadow:0 1px 1px rgba(0,0,0,0.35); } .topbar-alert-btn.idle .topbar-alert-badge{display:none} body.light-theme .topbar-alert-btn.idle{background:linear-gradient(160deg,rgba(0,0,0,0.04),rgba(0,0,0,0.02));border-color:rgba(0,0,0,0.08);color:#444} body.light-theme .topbar-alert-badge{border-color:#fff} #scrAlerts{padding-bottom:120px} .alerts-hero{ display:flex; align-items:center; gap:12px; padding:14px 14px 6px; } .alerts-hero-ico{ width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px; background:linear-gradient(160deg,rgba(255,71,71,0.22),rgba(200,31,31,0.12)); border:1px solid rgba(255,71,71,0.28); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12); } .alerts-hero-titles{flex:1;min-width:0} .alerts-hero-titles h2{margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-0.01em} .alerts-hero-titles p{margin:2px 0 0;font-size:.72rem;color:var(--text3);line-height:1.3} .alerts-status-chip{ font-size:.65rem;font-weight:700;padding:4px 9px;border-radius:99px; background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:var(--text2); white-space:nowrap; } .alerts-status-chip.live{background:linear-gradient(120deg,rgba(255,71,71,0.22),rgba(255,71,71,0.08));border-color:rgba(255,71,71,0.35);color:#ffb4b4} .alerts-map-wrap{position:relative;margin:8px 14px 14px} #alertsMap{ height:200px; border-radius:18px; overflow:hidden; background:#1a1a1a; border:1px solid rgba(255,255,255,0.06); box-shadow:0 8px 20px rgba(0,0,0,0.35); } .alerts-map-empty{ position:absolute; inset:0; border-radius:18px; display:none; align-items:center; justify-content:center; background:rgba(20,20,20,0.85); color:var(--text3); font-size:.78rem; backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); pointer-events:none; } .alerts-map-empty.show{display:flex} body.light-theme .alerts-map-empty{background:rgba(250,250,250,0.85)} .alerts-tabs{display:flex;gap:6px;padding:0 14px 8px;overflow-x:auto;scrollbar-width:none} .alerts-tabs::-webkit-scrollbar{display:none} .alerts-tab{ flex:0 0 auto; padding:7px 13px; border-radius:99px; font-size:.74rem; font-weight:700; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:var(--text2); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:all .15s ease; white-space:nowrap; } .alerts-tab.active{background:linear-gradient(120deg,rgba(255,71,71,0.28),rgba(255,71,71,0.12));border-color:rgba(255,71,71,0.4);color:#fff} #alertsList{padding:0 14px;display:flex;flex-direction:column;gap:10px} .alert-card{ background:linear-gradient(160deg,rgba(28,28,28,0.95),rgba(20,20,20,0.95)); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:13px 14px; box-shadow:0 4px 14px rgba(0,0,0,0.35); position:relative; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .12s ease, border-color .2s; } .alert-card:active{transform:scale(.985);border-color:rgba(255,255,255,0.14)} .alert-card.live::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,#ff4747,#c81f1f); } .alert-card.soon::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,#ffd60a,#e3a700); } .alert-card-head{display:flex;align-items:center;gap:8px;margin-bottom:6px} .alert-card-ico{font-size:18px;line-height:1} .alert-card-source{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;color:#ffb4b4} .alert-card.soon .alert-card-source{color:#ffe070} .alert-card.upcoming .alert-card-source{color:var(--text2)} .alert-card-time{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--text2);text-align:right;line-height:1.25} .alert-card-time b{color:#fff;font-weight:800;display:block} .alert-card-sc{font-size:.78rem;font-weight:700;color:#fff;margin-bottom:3px} .alert-card-area{font-size:.7rem;color:var(--text2);line-height:1.4;max-height:3.5em;overflow:hidden;position:relative;transition:max-height .25s ease} .alert-card-area.expanded{max-height:60em} .alert-card-area:not(.expanded)::after{ content:""; position:absolute; left:0;right:0;bottom:0;height:1.4em; background:linear-gradient(180deg,transparent,rgba(20,20,20,0.95));pointer-events:none; } .alert-card-foot{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:.68rem;color:var(--text3)} .alert-card-toggle{background:none;border:none;color:var(--accent-sea);font-size:.7rem;font-weight:700;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent} .alerts-empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:.85rem} .alerts-empty .emo{font-size:36px;display:block;margin-bottom:8px;opacity:0.6} /* ── Rentals (Phase 1) — visually mirrors .alerts-* but with sand accent ─ */ .rent-hero{display:flex;align-items:center;gap:12px;padding:14px 14px 6px} .rent-hero-ico{ width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px; background:linear-gradient(160deg,rgba(245,166,35,0.22),rgba(200,130,30,0.12)); border:1px solid rgba(245,166,35,0.28); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12); } .rent-hero-titles{flex:1;min-width:0} .rent-hero-titles h2{margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-0.01em} .rent-hero-titles p{margin:2px 0 0;font-size:.72rem;color:var(--text3);line-height:1.3} .rent-tabs{display:flex;gap:6px;padding:0 14px 8px;overflow-x:auto;scrollbar-width:none} .rent-tabs::-webkit-scrollbar{display:none} .rent-tab{ flex:0 0 auto;padding:7px 13px;border-radius:99px;font-size:.74rem;font-weight:700; background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:var(--text2); cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .15s ease;white-space:nowrap; } .rent-tab.active{background:linear-gradient(120deg,rgba(245,166,35,0.28),rgba(245,166,35,0.12));border-color:rgba(245,166,35,0.4);color:#fff} .rent-post-info{ margin:6px 14px 12px; padding:10px 12px; border-radius:12px; background:linear-gradient(140deg,rgba(54,215,183,0.10),rgba(54,215,183,0.04)); border:1px solid rgba(54,215,183,0.18); color:var(--text2); font-size:.78rem; line-height:1.4; } #rentList{padding:0 14px 16px;display:flex;flex-direction:column;gap:11px} /* Card surface tinted to the current theme wallpaper — uses --bg2/--bg3 (theme-aware shades that sit between the screen background and the bright --card-grad). Gives an "elevated wallpaper" feel rather than pale gray. */ /* ============ RENTAL CARD — photo-first, premium, native to Guide ============ Surface, borders and text colors all flow through theme vars (--card-grad, --card-bdr, --card-bdr-top, --card-bdr-soft, --bg3, --text, --text2, --text-on-card) — see applyTheme() — so the card automatically retints itself to whichever wallpaper the user picked (Ocean, Forest, Wine, … plus light themes). */ .rent-card{ background:var(--card-grad); border:1px solid var(--card-bdr); border-top:1px solid var(--card-bdr-top); border-bottom:1px solid var(--card-bdr-soft); border-radius:var(--r); padding:0; box-shadow:inset 0 1px 2px rgba(255,255,255,0.08),0 2px 8px rgba(0,0,0,0.12); display:flex; flex-direction:column; position:relative; overflow:hidden; } /* Top inner highlight like .place-card::after — reads as wet glass. */ .rent-card::after{ content:''; position:absolute; top:0; left:0; right:0; height:38%; background:linear-gradient(180deg,rgba(255,255,255,0.10),transparent 60%,transparent); pointer-events:none; z-index:2; } /* Left accent strip — anchored to body section so it doesn't fight the photo. */ .rent-card-body{flex:1; min-width:0; position:relative; padding:13px 14px 14px 17px} .rent-card-body::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 99px 99px 0; background:linear-gradient(180deg,var(--sand,#F5A623) 0%,rgba(245,166,35,0.35) 100%); box-shadow:0 0 12px rgba(245,166,35,0.35); pointer-events:none; } .rent-card-vehicle .rent-card-body::before{ background:linear-gradient(180deg,var(--sea,#36D7B7) 0%,rgba(54,215,183,0.35) 100%); box-shadow:0 0 12px rgba(54,215,183,0.35); } /* Hero photo — full-width 16:9 above the body. */ .rent-card-photo{ width:100%; aspect-ratio:16/9; position:relative; overflow:hidden; background:var(--bg3,#232328) center/cover no-repeat; box-shadow:inset 0 -1px 0 rgba(0,0,0,0.18); } /* Subtle gradient at the bottom of the photo so the badges stay readable. */ .rent-card-photo::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:46%; background:linear-gradient(180deg,transparent,rgba(0,0,0,0.45)); pointer-events:none; } .rent-card-photo-count{ position:absolute; bottom:8px; right:8px; z-index:1; display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,0.55); color:#fff; font-size:.66rem; font-weight:700; line-height:1; padding:5px 9px; border-radius:99px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.10); } .rent-card-photo-count svg{width:11px;height:11px;opacity:.95} /* Photo-less fallback — wallpaper-aware. Base = current theme's --bg3 (applyTheme rewrites that variable per wallpaper). Brand accent tint sits on top: sand for housing, sea for vehicle. */ .rent-card-photo--empty{ background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(245,166,35,0.14), transparent 65%), linear-gradient(160deg, color-mix(in srgb, var(--bg3) 92%, #fff 8%), var(--bg3)); display:flex; align-items:center; justify-content:center; } .rent-card-vehicle .rent-card-photo--empty{ background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(54,215,183,0.14), transparent 65%), linear-gradient(160deg, color-mix(in srgb, var(--bg3) 92%, #fff 8%), var(--bg3)); } .rent-card-photo--empty svg{ width:54px; height:54px; opacity:.55; color:var(--sand,#F5A623); filter:drop-shadow(0 2px 10px rgba(245,166,35,0.25)); } .rent-card-vehicle .rent-card-photo--empty svg{ color:var(--sea,#36D7B7); filter:drop-shadow(0 2px 10px rgba(54,215,183,0.25)); } /* Body — head row holds type+rooms left, price right; then date; then desc; then actions. */ .rent-card-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; } .rent-card-type{ display:inline-flex; align-items:center; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:var(--sand,#F5A623); background:rgba(245,166,35,0.12); border:1px solid rgba(245,166,35,0.28); padding:3px 9px; border-radius:99px; line-height:1.1; } .rent-card-vehicle .rent-card-type{ color:var(--sea,#36D7B7); background:rgba(54,215,183,0.12); border-color:rgba(54,215,183,0.28); } .rent-card-rooms{font-size:.72rem;color:var(--text2);font-weight:600} .rent-card-price{ margin-left:auto; font-family:'Space Grotesk',sans-serif; font-size:1.15rem; font-weight:800; color:var(--text); letter-spacing:-0.01em; font-variant-numeric:tabular-nums; white-space:nowrap; } .rent-card-from{font-size:.72rem;color:var(--text2);font-weight:600;margin-bottom:5px;line-height:1.35} .rent-card-desc{font-size:.78rem;color:var(--text-on-card,var(--text2));line-height:1.45; max-height:2.9em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .rent-card-foot{margin-top:11px;display:flex;gap:8px;flex-wrap:wrap;align-items:center} .rent-contact-btn{ flex:1; min-width:0; min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; font-family:inherit; font-size:.82rem; font-weight:800; letter-spacing:.01em; border-radius:999px; border:1px solid rgba(54,215,183,0.55); background:linear-gradient(135deg,var(--sea,#36D7B7),var(--sky,#45AEF5)); color:#0a201d; text-decoration:none; cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; box-shadow:0 6px 16px rgba(54,215,183,0.25), inset 0 1px 0 rgba(255,255,255,0.35); transition:transform .12s, box-shadow .2s, filter .2s; } .rent-contact-btn:active{transform:scale(.97);filter:brightness(.97)} .rent-contact-btn:focus-visible{box-shadow:0 6px 16px rgba(54,215,183,0.25), inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 3px rgba(54,215,183,0.35)} .rent-contact-btn svg{width:14px;height:14px;flex-shrink:0} /* Light theme — identical treatment to body.light-theme .place-card */ body.light-theme .rent-card{ background:linear-gradient(168deg,rgba(255,255,255,0.97),rgba(255,255,255,0.88)); border-color:rgba(0,0,0,0.05); border-top-color:rgba(255,255,255,0.8); border-bottom-color:rgba(0,0,0,0.08); box-shadow:0 2px 4px rgba(0,0,0,0.05),0 6px 20px rgba(0,0,0,0.07),inset 0 1px 1px rgba(255,255,255,0.95),inset 0 -1px 1px rgba(0,0,0,0.03); } body.light-theme .rent-card::after{ background:linear-gradient(180deg,rgba(255,255,255,0.55),transparent 60%); } body.light-theme .rent-card-photo{background:#eef0f3 center/cover no-repeat} body.light-theme .rent-card-photo--empty{ background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(245,166,35,0.18), transparent 65%), linear-gradient(160deg, rgba(255,255,255,0.95), rgba(240,242,245,0.95)); } body.light-theme .rent-card-vehicle .rent-card-photo--empty{ background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(54,215,183,0.20), transparent 65%), linear-gradient(160deg, rgba(255,255,255,0.95), rgba(240,242,245,0.95)); } body.light-theme .rent-card-price{color:#1a1a1c} body.light-theme .rent-card-rooms{color:#444} body.light-theme .rent-card-from{color:#555} body.light-theme .rent-card-desc{color:#333} body.light-theme .rent-contact-btn{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.12)} .rent-empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:.85rem} .rent-empty .emo{font-size:36px;display:block;margin-bottom:8px;opacity:0.6} .rent-cta{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border-radius:14px; border:1px solid rgba(245,166,35,0.45); background:linear-gradient(120deg,rgba(245,166,35,0.32),rgba(245,166,35,0.16)); color:#fff; font-weight:800; font-size:.85rem; cursor:pointer; -webkit-tap-highlight-color:transparent; box-shadow:0 4px 14px rgba(245,166,35,0.18); } .rent-cta:active{transform:scale(.985)} .rent-form-overlay{ position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0.75); display:none;align-items:flex-end;justify-content:center; backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); padding:0 8px;overflow:hidden; } .rent-form-overlay.show{display:flex} .rent-form-card{ width:100%; max-width:560px;min-width:0; max-height:90vh; max-height:90dvh; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scroll-padding-bottom:96px; background:linear-gradient(180deg,#1c1c1c,#141414); border:1px solid rgba(255,255,255,0.08); border-radius:18px 18px 0 0; padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px)); position:relative; box-shadow:0 -8px 32px rgba(0,0,0,0.55); } @media (min-width:540px){.rent-form-overlay{align-items:center;padding:14px} .rent-form-card{border-radius:18px;max-height:85vh;max-height:85dvh}} #rentFormBody{width:100%;min-width:0;max-width:100%;overflow:hidden} .rent-form-close{ position:absolute; top:10px; right:10px; width:38px; height:38px; z-index:5; border-radius:50%; border:1px solid rgba(255,255,255,0.18); background:rgba(0,0,0,0.55); color:#fff; font-size:22px; line-height:1; font-weight:300; cursor:pointer; -webkit-tap-highlight-color:transparent; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 2px 10px rgba(0,0,0,0.35); } .rent-form-close:active{transform:scale(.92);background:rgba(0,0,0,0.75)} /* Drag indicator — iOS-style bottom-sheet handle. Floats over the card with a transparent background so it doesn't draw a dark strip across the photo underneath. Only the thin pill itself is visible. */ .rent-form-grabber{ position:absolute; top:0; left:0; right:0; height:22px; display:flex; align-items:flex-start; justify-content:center; padding-top:7px; background:transparent; pointer-events:auto; z-index:6; cursor:grab; -webkit-tap-highlight-color:transparent; touch-action:none; } .rent-form-grabber::before{ content:""; display:block; width:38px; height:4px; border-radius:99px; background:rgba(255,255,255,0.55); box-shadow:0 1px 4px rgba(0,0,0,0.35); } .rent-form-card.dragging{transition:none} .rent-form-card{transition:transform .25s ease} .rent-form-card.closing{transition:transform .22s cubic-bezier(.4,0,.7,.4);transform:translateY(100%)!important} .rent-form-h{font-size:1.15rem;font-weight:800;margin:0 0 8px;letter-spacing:-0.01em;padding-right:42px} .rent-form-sub{font-size:.78rem;color:var(--text3);margin-bottom:12px;line-height:1.45} .rent-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin-bottom:10px;width:100%;min-width:0} @media(max-width:539px){ #rentFormOverlay .rent-form-grid{grid-template-columns:minmax(0,1fr);gap:12px} #rentFormOverlay .rent-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #rentFormOverlay .rent-photo-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} } .rent-form-grid label{font-size:.74rem;color:var(--text3);display:flex;flex-direction:column;gap:5px;min-width:0} .rent-form-grid input, .rent-form-grid select, .rent-form-grid textarea, #rentFormBody textarea, #rentFormBody input.full, #adsFormBody textarea, #adsFormBody input.full, #adsFormBody input[type="text"], #adsFormBody input[type="tel"], #adsFormBody input[type="email"] { padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04);color:#fff;font-size:.85rem;font-family:inherit; width:100%;box-sizing:border-box; } /* Unified rent/ads form-field sizing. • font-size:16px — stops iOS Safari zooming in on focus (input must be >=16px). • min-width:0 — paired with min-width:0 on the label (grid item) + minmax(0,1fr) tracks, this lets a cell shrink below content width, so a native type="date" input can't blow out its column and overlap the next field ("По какое число" bug). • min-height — every input/select lands on the same height & radius. */ .rent-form-grid input, .rent-form-grid select, .rent-form-grid textarea, #adsFormBody textarea, #adsFormBody input.full, #adsFormBody input[type="text"], #adsFormBody input[type="tel"], #adsFormBody input[type="email"]{ font-size:16px;padding:11px 12px;border-radius:12px;min-width:0;max-width:100%; } .rent-form-grid input, .rent-form-grid select{min-height:46px} .rent-form-grid textarea{min-height:78px;line-height:1.45;resize:vertical} .rent-form-grid input:focus, .rent-form-grid select:focus, .rent-form-grid textarea:focus, #adsFormBody textarea:focus, #adsFormBody input:focus{ outline:none;border-color:rgba(245,166,35,0.5);background:rgba(255,255,255,0.06) } .rent-form-grid label.full{grid-column:1/-1} .rent-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px} @media(max-width:380px){.rent-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:300px){.rent-type-grid{grid-template-columns:1fr}} .rent-type-opt{ padding:11px 6px; border-radius:12px; font-size:.74rem; font-weight:700; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:var(--text2); cursor:pointer; -webkit-tap-highlight-color:transparent; text-align:center; display:flex;flex-direction:column;gap:4px; align-items:center; justify-content:center; min-height:72px; min-width:0; } .rent-type-opt:active{transform:scale(.97)} .rent-type-opt.active{ background:linear-gradient(140deg,rgba(245,166,35,0.32),rgba(245,166,35,0.16)); border-color:rgba(245,166,35,0.5); color:#fff; } .rent-type-opt .emo{font-size:18px;line-height:1} .rent-photo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px;margin:8px 0} .rent-photo-thumb{position:relative;aspect-ratio:1/1;border-radius:10px;background:#222 center/cover no-repeat;border:1px solid rgba(255,255,255,0.08)} .rent-photo-thumb .x{ position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%; background:rgba(0,0,0,0.7);color:#fff;font-size:12px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;border:0; } .rent-photo-add{ aspect-ratio:1/1;border-radius:10px;border:1px dashed rgba(255,255,255,0.2); background:rgba(255,255,255,0.02);color:var(--text3);font-size:20px; display:flex;align-items:center;justify-content:center;cursor:pointer; -webkit-tap-highlight-color:transparent; } .rent-photo-add:active{background:rgba(255,255,255,0.06)} /* ADS form — main/cover photo picker (2026-05-21) */ .rent-photo-thumb .ads-mainbtn{ position:absolute;bottom:2px;left:2px;width:22px;height:22px;border-radius:50%; background:rgba(0,0,0,0.7);color:#fff;font-size:12px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;border:0;padding:0; } .rent-photo-thumb .ads-mainbtn.on{background:#F5A623;color:#1a1206} .rent-photo-thumb.ads-main-photo{border:2px solid #F5A623;box-shadow:0 0 0 1px rgba(245,166,35,0.4)} .rent-photo-thumb .ads-main-tag{ position:absolute;left:2px;right:2px;top:2px;font-size:.54rem;font-weight:800; text-transform:uppercase;letter-spacing:.04em;text-align:center;color:#1a1206; background:#F5A623;border-radius:6px;padding:.1rem 0; } .rent-form-btn{ width:100%; padding:12px 16px; border-radius:12px; border:0; background:linear-gradient(120deg,rgba(54,215,183,0.55),rgba(54,215,183,0.35)); color:#fff; font-weight:800; font-size:.9rem; cursor:pointer; margin-top:10px; -webkit-tap-highlight-color:transparent; } .rent-form-btn:active{transform:scale(.985)} .rent-form-btn:disabled{opacity:0.5;cursor:not-allowed} .rent-form-err{margin-top:8px;color:#e74c3c;font-size:.78rem;line-height:1.4} /* Telegram Stars payment — gold/amber variant of the form button. */ .pay-stars-box{margin:6px 0 10px} .rent-form-btn-stars{ width:100%;padding:13px 16px;border-radius:12px;border:1px solid rgba(255,209,102,0.55); background:linear-gradient(120deg,rgba(255,209,102,0.30),rgba(245,166,35,0.22)); color:#ffe8b0;font-weight:800;font-size:.92rem;cursor:pointer;margin-top:4px; display:flex;align-items:center;justify-content:center;gap:6px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),0 4px 16px rgba(245,166,35,0.18); -webkit-tap-highlight-color:transparent;transition:transform .15s ease,opacity .2s; } .rent-form-btn-stars:active{transform:scale(.985)} .rent-form-btn-stars:disabled{opacity:0.45;cursor:not-allowed;box-shadow:none} .pay-stars-hint{font-size:.72rem;color:var(--text3);margin-top:5px;line-height:1.4} .pay-method-sep{ display:flex;align-items:center;gap:8px;margin:14px 0 10px; font-size:.7rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em; } .pay-method-sep::before,.pay-method-sep::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.08)} /* Amenities (housing only) — chip toggles in the rental form. */ .rent-amen-wrap{margin:4px 0 8px} .rent-amen-group{margin-bottom:9px} .rent-amen-group:last-child{margin-bottom:0} .rent-amen-group-title{ font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em; color:var(--text3);margin:6px 2px 6px;line-height:1; } .rent-amen-grid{display:flex;flex-wrap:wrap;gap:6px} .rent-amen-chip{ display:inline-flex;align-items:center;gap:6px; padding:7px 12px;border-radius:99px;font-family:inherit; font-size:.76rem;font-weight:600;line-height:1.1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); color:var(--text2);cursor:pointer;-webkit-tap-highlight-color:transparent; transition:background .15s,border-color .15s,color .15s,transform .12s; user-select:none;white-space:normal;min-height:34px;max-width:100%; overflow-wrap:anywhere;text-align:center; } .rent-amen-chip:active{transform:scale(.96)} .rent-amen-chip .emo{font-size:.92rem;line-height:1} .rent-amen-chip .check{display:none;color:var(--sand);font-weight:800;font-size:.78rem;line-height:1} .rent-amen-chip.active{ background:linear-gradient(120deg,rgba(245,166,35,0.22),rgba(245,166,35,0.10)); border-color:rgba(245,166,35,0.45);color:var(--text); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); } .rent-amen-chip.active .check{display:inline-block} body.light-theme .rent-amen-chip{ background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.08);color:#555; } body.light-theme .rent-amen-chip.active{ background:linear-gradient(120deg,rgba(245,166,35,0.20),rgba(245,166,35,0.08)); border-color:rgba(245,166,35,0.50);color:#1a1a1c; } /* Detail-card amenities — read-only chips showing only selected ones. */ .rent-det-amen-head{ font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em; color:var(--text3);margin:14px 0 7px; } .rent-det-amen-grid{display:flex;flex-wrap:wrap;gap:6px} .rent-det-amen-chip{ display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px; font-size:.72rem;font-weight:600;line-height:1.1; background:var(--card-soft); border:1px solid var(--card-bdr-soft); color:var(--text); } .rent-det-amen-chip .emo{font-size:.88rem;opacity:.9} body.light-theme .rent-det-amen-chip{ background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.07);color:#1a1a1c; } .rent-det-amen-toggle{ margin-top:6px;background:none;border:0;color:var(--sea);font-family:inherit; font-size:.72rem;font-weight:700;cursor:pointer;padding:4px 2px; -webkit-tap-highlight-color:transparent;letter-spacing:.01em; } .rent-det-amen-toggle:active{opacity:.7} .rent-pay-list{display:flex;flex-direction:column;gap:6px;margin:10px 0} .rent-pay-item{ background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08); border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px; cursor:pointer;-webkit-tap-highlight-color:transparent; } .rent-pay-item:active{background:rgba(255,255,255,0.06)} .rent-pay-coin{font-size:.7rem;font-weight:700;color:#ffd28a;letter-spacing:.02em} .rent-pay-addr{font-size:.62rem;color:var(--text2);font-family:'SF Mono',Menlo,monospace; word-break:break-all;line-height:1.3;opacity:.85} .rent-pay-sum{ background:linear-gradient(120deg,rgba(54,215,183,0.12),rgba(54,215,183,0.05)); border:1px solid rgba(54,215,183,0.25);border-radius:12px;padding:10px 12px; font-size:.78rem;color:var(--text);margin-bottom:8px;line-height:1.4; } .rent-pay-sum b{color:#36d7b7;font-size:1rem} .rent-pay-coins{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0} .rent-pay-chip{ padding:7px 12px;border-radius:18px;font-size:.72rem;font-weight:600; letter-spacing:.02em;color:#ffd28a;border:1px solid rgba(255,210,138,0.25); background:rgba(255,210,138,0.06);cursor:pointer; transition:transform .15s,background .15s,color .15s; -webkit-tap-highlight-color:transparent; } .rent-pay-chip:active{transform:scale(.96)} .rent-pay-chip.active{ background:linear-gradient(135deg,#ffd28a 0%,#f5a623 100%); color:#1c1c1c;border-color:transparent; box-shadow:0 4px 12px rgba(245,166,35,0.35) } .rent-pay-addr-slot{margin-top:8px} .rent-pay-addr-card{ padding:12px 14px;background:rgba(0,0,0,0.35); border:1px solid rgba(255,210,138,0.18);border-radius:12px; display:flex;flex-direction:column;gap:8px; animation:rentPayAddrIn .25s ease; } @keyframes rentPayAddrIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} .rent-pay-addr-card .rent-pay-coin{font-size:.78rem} .rent-pay-addr-card .rent-pay-addr{font-size:.65rem;word-break:break-all;line-height:1.4;color:var(--text);opacity:1} .rent-pay-copy-btn{ align-self:flex-start;padding:6px 12px;border-radius:10px; background:rgba(54,215,183,0.18);color:#36d7b7;font-size:.7rem;font-weight:700; border:none;cursor:pointer;letter-spacing:.02em; -webkit-tap-highlight-color:transparent; } .rent-pay-copy-btn.copied{background:#36d7b7;color:#1c1c1c} .rent-done-emo{font-size:48px;text-align:center;margin:10px 0} .rent-card-vehicle .rent-card-rooms{display:none} .rent-card-vehicle .rent-vehicle-meta{font-size:.72rem;color:var(--text2);font-weight:600;display:block;margin-top:2px} /* Whole listing card is now tappable → opens detail modal. Keep the contact button inside the card but on its own tap path (stopPropagation). */ .rent-card{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .14s ease,border-color .2s,box-shadow .2s} .rent-card:active{transform:scale(.99);border-color:rgba(245,166,35,0.30);box-shadow:0 2px 10px rgba(0,0,0,0.18),inset 0 1px 0 rgba(255,255,255,0.04)} .rent-card-vehicle:active{border-color:rgba(54,215,183,0.30)} body.light-theme .rent-card:active{border-color:rgba(245,166,35,0.45);box-shadow:0 1px 6px rgba(0,0,0,0.08)} body.light-theme .rent-card-vehicle:active{border-color:rgba(54,215,183,0.45)} /* ============ RENTAL DETAIL — premium photo-first sheet ===================== Modal surface and every inner block flow through theme vars (--card-grad, --card-bdr, --card-bdr-top, --card-bdr-soft, --card-soft, --bg2/--bg3, --text*, --text-on-card) — all rewritten by applyTheme() per wallpaper, so the screen retints automatically. No hardcoded burgundy / #111 / #1c1c1c panels live in here. */ #rentDetailCard{ /* Theme-aware lifted surface — top is white-blended for "glass lift", bottom fades into wallpaper bg. No hardcoded burgundy/charcoal. */ background: radial-gradient(ellipse 120% 60% at 50% 0%, rgba(255,255,255,0.06), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--bg3) 78%, #fff 22%) 0%, color-mix(in srgb, var(--bg2) 92%, #fff 8%) 50%, var(--bg2) 100%); border:1px solid var(--card-bdr); padding:0 0 calc(20px + env(safe-area-inset-bottom,0px)); } #rentDetailBody{padding:0 16px} body.light-theme #rentDetailCard{ background: radial-gradient(ellipse 120% 60% at 50% 0%, rgba(255,255,255,0.55), transparent 70%), linear-gradient(180deg,#ffffff 0%,#f3f4f6 100%); border-color:rgba(0,0,0,0.07);color:#1a1a1c; box-shadow:0 -8px 32px rgba(0,0,0,0.18); } /* Hero photo — flush to the modal edges, 16:9 mobile-first. */ .rent-det-hero{ position:relative; margin:0 -16px 0; overflow:hidden; aspect-ratio:16/10; width:auto; background:var(--bg3) center/cover no-repeat; border-radius:18px 18px 0 0; } @media (min-width:540px){ .rent-det-hero{aspect-ratio:16/9} } .rent-det-hero-img{ position:absolute; inset:0; width:100%; height:100%; background:var(--bg3) center/cover no-repeat; cursor:zoom-in; } .rent-det-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:55%; background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.30) 55%,rgba(0,0,0,0.55) 100%); pointer-events:none; } .rent-det-hero-counter{ position:absolute; top:12px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:5px; background:rgba(0,0,0,0.55); color:#fff; font-size:.7rem; font-weight:700; line-height:1; padding:6px 11px; border-radius:99px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.10); } .rent-det-hero-counter svg{width:12px;height:12px;opacity:.95} /* Hero overlay: type badge bottom-left, price bottom-right, sitting on the gradient veil — reads as a poster, not a form. */ .rent-det-hero-band{ position:absolute; left:14px; right:14px; bottom:12px; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; pointer-events:none; } .rent-det-hero-type{ display:inline-flex; align-items:center; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#fff; background:rgba(245,166,35,0.80); border:1px solid rgba(255,255,255,0.18); padding:5px 11px; border-radius:99px; line-height:1.1; text-shadow:0 1px 2px rgba(0,0,0,0.25); } .rent-det-vehicle .rent-det-hero-type{ background:rgba(54,215,183,0.80); } .rent-det-hero-price{ font-family:'Space Grotesk',sans-serif; font-size:1.6rem; font-weight:800; color:#fff; letter-spacing:-0.02em; line-height:1; font-variant-numeric:tabular-nums; text-shadow:0 2px 8px rgba(0,0,0,0.45); white-space:nowrap; } /* Hero-less fallback — wallpaper-tinted glass + line icon. */ .rent-det-hero--empty{ display:flex; align-items:center; justify-content:center; background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(245,166,35,0.18), transparent 65%), linear-gradient(160deg, color-mix(in srgb, var(--bg3) 90%, #fff 10%), var(--bg3)); } .rent-det-vehicle .rent-det-hero--empty{ background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(54,215,183,0.18), transparent 65%), linear-gradient(160deg, color-mix(in srgb, var(--bg3) 90%, #fff 10%), var(--bg3)); } .rent-det-hero--empty svg{ width:80px; height:80px; opacity:.55; color:var(--sand,#F5A623); filter:drop-shadow(0 2px 12px rgba(245,166,35,0.30)); } .rent-det-vehicle .rent-det-hero--empty svg{ color:var(--sea,#36D7B7); filter:drop-shadow(0 2px 12px rgba(54,215,183,0.30)); } /* Thumbnail strip — wallpaper-aware, no more orange-only active border. */ .rent-det-thumbs{ display:flex; gap:8px; padding:14px 16px 4px; margin:0 -16px; overflow-x:auto; scrollbar-width:none; } .rent-det-thumbs::-webkit-scrollbar{display:none} .svc-detail-photos{ display:flex;gap:10px;width:100%;max-width:100%;margin:12px 0; overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; scrollbar-width:none;-webkit-overflow-scrolling:touch; } .svc-detail-photos::-webkit-scrollbar{display:none} .svc-detail-photos img{ display:block;flex:0 0 100%;width:100%;max-width:100%;height:auto; max-height:52vh;max-height:52dvh;object-fit:contain;scroll-snap-align:start; border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08); } .rent-det-thumb{ flex:0 0 58px; width:58px; height:58px; border-radius:10px; background:var(--bg3) center/cover no-repeat; border:2px solid var(--card-bdr-soft); cursor:pointer; transition:border-color .15s, transform .12s; } .rent-det-thumb:active{transform:scale(.96)} .rent-det-thumb.active{border-color:var(--sea)} .rent-det-vehicle .rent-det-thumb.active{border-color:var(--sea)} /* Below-hero title block. */ .rent-det-titlewrap{margin:14px 0 4px} .rent-det-title{ font-size:1.18rem; font-weight:800; margin:0 0 4px; letter-spacing:-0.01em; color:var(--text); line-height:1.3; } .rent-det-sub{ font-size:.78rem; color:var(--text2); margin:0 0 12px; line-height:1.4; display:flex; align-items:center; gap:6px; } .rent-det-sub svg{width:13px;height:13px;flex-shrink:0;color:var(--text3)} /* Spec chips — replaces the heavy 2-column meta grid. */ .rent-det-specs{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; } .rent-det-spec{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px; background:var(--card-soft); border:1px solid var(--card-bdr-soft); color:var(--text); font-size:.74rem; font-weight:600; line-height:1.15; } .rent-det-spec b{color:var(--text); font-weight:700} .rent-det-spec .lbl{color:var(--text3); font-weight:600; margin-right:2px} .rent-det-spec svg{width:13px;height:13px;color:var(--text3);flex-shrink:0} /* Glass section card — used for description + amenities + map. */ .rent-det-section{ background:var(--card-grad); border:1px solid var(--card-bdr); border-top:1px solid var(--card-bdr-top); border-bottom:1px solid var(--card-bdr-soft); border-radius:var(--r); padding:13px 14px; margin-bottom:11px; box-shadow:inset 0 1px 2px rgba(255,255,255,0.06),0 2px 6px rgba(0,0,0,0.08); } .rent-det-section-head{ font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--text); margin:0 0 10px; opacity:.95; } body.light-theme .rent-det-section-head{color:#1a1a1c; opacity:1} .rent-det-desc{ font-size:.86rem; color:var(--text-on-card,var(--text)); line-height:1.55; white-space:pre-wrap; word-wrap:break-word; margin:0; } /* Clamped long descriptions get a soft fade and a "Show more" toggle so the detail screen stays a reasonable height. Expanded variant removes the clamp. */ .rent-det-desc.is-clamped{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden; position:relative; mask-image:linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%); } .rent-det-desc-toggle{ margin-top:8px; background:none; border:0; color:var(--sea); font-family:inherit; font-size:.78rem; font-weight:700; cursor:pointer; padding:4px 2px; -webkit-tap-highlight-color:transparent; letter-spacing:.01em; } .rent-det-desc-toggle:active{opacity:.7} /* Map button — glass pill that opens Google Maps search for the address. */ .rent-det-map-btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:99px; background:var(--card-soft); border:1px solid var(--card-bdr-soft); color:var(--text); font-family:inherit; font-size:.78rem; font-weight:700; text-decoration:none; cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; transition:transform .12s, background .2s; } .rent-det-map-btn:active{transform:scale(.97)} .rent-det-map-btn svg{width:14px;height:14px;color:var(--sea)} /* Contact CTA row — labeled buttons, no monospace, no raw values. */ .rent-det-cta-head{ font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--text3); margin:18px 0 14px; } .rent-det-cta-row{ display:grid; grid-template-columns:1fr; gap:12px; } .rent-det-cta-row.split{grid-template-columns:1fr 1fr} /* Air between the primary CTA row and the secondary (Telegram/Email) row so buttons don't visually merge with each other. */ .rent-det-cta-row + .rent-det-cta-row{margin-top:12px} .rent-det-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:13px 18px; border-radius:16px; font-family:inherit; font-size:.88rem; font-weight:800; letter-spacing:.01em; text-decoration:none; cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; transition:transform .12s, filter .2s, box-shadow .2s; border:1px solid var(--card-bdr-soft); background:var(--card-soft); color:var(--text); width:100%; min-width:0; } .rent-det-cta:active{transform:scale(.985); filter:brightness(.97)} .rent-det-cta svg{width:16px;height:16px;flex-shrink:0} /* Primary — phone or first available contact, full width, sea→sky gradient. */ .rent-det-cta.is-primary{ background:linear-gradient(135deg,var(--sea,#36D7B7),var(--sky,#45AEF5)); border-color:rgba(54,215,183,0.55); color:#0a201d; box-shadow:0 8px 20px rgba(54,215,183,0.28), inset 0 1px 0 rgba(255,255,255,0.35); } .rent-det-cta.is-tg{ background:linear-gradient(135deg,#2AABEE,#229ED9); border-color:rgba(34,158,217,0.55); color:#fff; box-shadow:0 6px 16px rgba(34,158,217,0.28), inset 0 1px 0 rgba(255,255,255,0.30); } body.light-theme .rent-det-cta{color:#1a1a1c} body.light-theme .rent-det-cta.is-primary, body.light-theme .rent-det-cta.is-tg{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.12)} body.light-theme .rent-det-section{ background:linear-gradient(168deg,rgba(255,255,255,0.97),rgba(255,255,255,0.88)); border-color:rgba(0,0,0,0.05); border-top-color:rgba(255,255,255,0.8); border-bottom-color:rgba(0,0,0,0.08); box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 14px rgba(0,0,0,0.05),inset 0 1px 1px rgba(255,255,255,0.95); } body.light-theme .rent-det-title{color:#1a1a1c} body.light-theme .rent-det-sub{color:#555} body.light-theme .rent-det-desc{color:#2a2a2e} body.light-theme .rent-det-spec{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.07);color:#1a1a1c} body.light-theme .rent-det-spec .lbl, body.light-theme .rent-det-spec svg{color:#666} body.light-theme .rent-det-thumb{border-color:rgba(0,0,0,0.08);background:#e8e9ec} body.light-theme .rent-det-thumb.active{border-color:var(--sea)} body.light-theme .rent-det-map-btn{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.08);color:#1a1a1c} body.light-theme .rent-det-hero--empty{ background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(245,166,35,0.20), transparent 65%), linear-gradient(160deg, rgba(255,255,255,0.95), rgba(240,242,245,0.95)); } body.light-theme .rent-det-vehicle .rent-det-hero--empty{ background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(54,215,183,0.22), transparent 65%), linear-gradient(160deg, rgba(255,255,255,0.95), rgba(240,242,245,0.95)); } /* Legacy classes kept for backwards-compat (old screens / shared pieces). */ .rent-det-photo-wrap{position:relative;margin:-18px -16px 12px;border-radius:16px 16px 0 0;overflow:hidden;background:var(--bg3)} .rent-det-photo{width:100%;height:240px;background:var(--bg3) center/cover no-repeat;display:block;cursor:zoom-in} .rent-det-photo-counter{position:absolute;top:8px;right:8px;background:rgba(0,0,0,0.6);color:#fff;font-size:.72rem;padding:3px 9px;border-radius:99px;font-weight:700} .rent-det-price{font-size:1.3rem;font-weight:800;color:var(--text);margin:6px 0 4px} .rent-lightbox{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,0.95); display:none;align-items:center;justify-content:center;padding:20px} .rent-lightbox.show{display:flex} .rent-lightbox img{max-width:100%;max-height:90vh;border-radius:8px;display:block} body.light-theme .rent-det-contact-btn .copy{background:rgba(0,0,0,0.05)} .rent-lb-nav{ position:absolute;top:50%;transform:translateY(-50%); width:44px;height:44px;border-radius:50%;border:0; background:rgba(255,255,255,0.12);color:#fff;font-size:24px;font-weight:700; cursor:pointer;-webkit-tap-highlight-color:transparent; } .rent-lb-prev{left:12px} .rent-lb-next{right:12px} /* Rentals home card — yellow title to draw attention to the paid section. */ .cat-hero-rentals .ch-title{color:var(--sand)} .cat-hero-rentals .ch-icon svg{color:var(--sand)} body.light-theme .alert-card{background:linear-gradient(160deg,#fff,#fafafa);border-color:rgba(0,0,0,0.06);box-shadow:0 4px 14px rgba(0,0,0,0.06)} body.light-theme .alert-card-sc{color:#111} body.light-theme .alert-card-time b{color:#111} body.light-theme #alertsMap{background:#f0f0f0;border-color:rgba(0,0,0,0.06)} body.light-theme .alert-card-area:not(.expanded)::after{background:linear-gradient(180deg,transparent,#fafafa)} body.light-theme .alerts-tab.active{color:#111} /* Portrait lock (2026-05-21) — on a phone in landscape, cover the app with a "rotate to portrait" screen instead of showing a flipped layout. max-height gate targets phones only (landscape height ≤560px), so tablets/desktop in landscape are unaffected. */ #orientationLock{display:none} /* Portrait guard — show ONLY on a real phone physically held in landscape. min-width:500px is the key guard: a phone in landscape is ≥568px wide, while a portrait phone whose viewport just got short (on-screen keyboard open → width>height → reads as "landscape") stays ≤430px wide, so the lock no longer pops up over forms. */ @media screen and (orientation:landscape) and (max-height:560px) and (min-width:500px){ html,body{overflow:hidden!important} #orientationLock{ display:flex;position:fixed;inset:0;z-index:2147483600; flex-direction:column;align-items:center;justify-content:center; gap:14px;text-align:center;padding:24px; background:#161619;color:#fff;font-weight:700;font-size:1rem; } #orientationLock svg{width:60px;height:60px;opacity:.9} #orientationLock .ol-sub{font-weight:500;font-size:.84rem;opacity:.6} } /* ═══════════════════════════════════════════════════════════════════════ PREMIUM UX PACKAGING LAYER — 2026-06-11 (additive · reversible · CSS-only) Tasteful, low-risk polish for a calmer / more "expensive" feel. Touches nothing structural and no JS. Delete this whole block to fully revert. ═══════════════════════════════════════════════════════════════════════ */ /* Crisper glyph rendering on dark glass (premium feel, no layout impact) */ html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} /* Brighter secondary/tertiary text for premium legibility — DARK THEME ONLY. Light theme reuses --text2/--text3 on a light bg, so scope this to body:not(.light-theme) to avoid washing out light-mode captions. */ body:not(.light-theme){--text2:#c2c2c6;--text3:#8a8a90} /* Kill stray blue tap-flash everywhere for a native, polished touch feel */ button,a,.quick-chip,.place-card,.cat-hero,.cat-row,.cat-tile,.sec-title{-webkit-tap-highlight-color:transparent} /* Layered, softer card depth (ambient + contact shadow) instead of a single flat drop — reads as "premium". Resting === :active to preserve the 2026-05-27 scroll-flicker fix (no shadow shift when finger grazes a card). */ #exploreContent .place-card, #exploreContent .place-card:active{ box-shadow:0 1px 3px rgba(0,0,0,0.20),0 8px 22px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.05)!important; } /* Unify the cover frame radius with the card's inner corner */ .pc-cover{border-radius:14px} /* ───── VISIBLE TIER — 2026-06-11 — clearly perceptible but still safe ───── Only short-text / spacing / photo-height tweaks (no overflow risk). Revert = delete from this marker down to the closing style tag. */ /* Hero: more generous padding, softer big radius, larger animated greeting */ .home-hero{padding:1.05rem 1.15rem!important;border-radius:22px!important;margin-bottom:.9rem!important} .hh-greeting-text{font-size:1.24rem!important;letter-spacing:-.015em!important} .hh-greeting-sub{font-size:.76rem!important;opacity:.86!important} /* Section headers: bigger, airier — premium editorial rhythm */ .sec-title{font-size:1rem!important;letter-spacing:.01em!important;margin-top:.35rem!important;margin-bottom:.7rem!important} /* More breathing room between category groups on the home screen */ .cat-hero-wrap,.cat-row-wrap{margin-bottom:1.25rem!important} /* Taller, more "magazine" photo covers (2:1 instead of 5:2) — the single most visible upgrade; object-fit:cover keeps photos crisp, just a taller crop */ .pc-cover{aspect-ratio:2/1!important} /* ═══════════════════════════════════════════════════════════════════════ PRIMITIVE UNIFICATION LAYER — 2026-06-12 (additive · reversible · CSS-only) One consistent press-feedback + transition across the tappable chip/pill/row family. The tactile feel had drifted per element (active scale ranged 0.9 → 0.99, and .subcat-chip had no press at all), so taps felt inconsistent. This harmonizes ONLY the press transform and transition timing — no colors, no radii, no layout. Excludes .place-card on purpose (2026-05-27 scroll-flicker lock). Delete this block to revert. ═══════════════════════════════════════════════════════════════════════ */ /* Small interactive primitives: uniform quick press + crisp explicit transition (replaces .pill's wasteful `transition:all`). */ .pill,.quick-chip,.subcat-chip,.pill-home{ transition:transform .12s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease!important; } .pill:active:not(.active), .quick-chip:active, .subcat-chip:active, .pill-home:active{transform:scale(0.96)!important} /* Large tappable surfaces press a touch less — heavier mass reads as calmer */ .cat-hero:active,.cat-row:active{transform:scale(0.98)!important} /* ═══════════════════════════════════════════════════════════════════════ REDUCED-MOTION SAFETY LAYER — 2026-06-12 (additive · reversible · CSS-only) App has 116 @keyframes / 106 animations but ZERO prefers-reduced-motion handling. For users who enable "reduce motion" in their OS, calm all motion (decorative loops, pulses, waves, count-ups, slide-ins). IMPORTANT: uses duration-shortening, NOT `animation:none` — so any animationend/transitionend still fires and nothing can freeze. (Splash is JS-timer based and has no animationend gating — verified 2026-06-12.) Zero effect for everyone else. Delete this block to fully revert. ═══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms!important; animation-delay:0ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; transition-delay:0ms!important; scroll-behavior:auto!important; } } /* 2026-08-16 — transport polish: denser route discovery and clearer controls. */ .transport-section-heading{display:flex;align-items:center;gap:9px;margin:5px 1px 10px;color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:1.02rem;font-weight:760;letter-spacing:-.018em} .transport-section-heading-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:linear-gradient(145deg,rgba(54,215,183,.18),rgba(69,174,245,.08));border:1px solid rgba(83,220,201,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);font-size:.9rem} .transport-channel-cta{display:grid!important;grid-template-columns:32px minmax(0,1fr) auto!important;align-items:center!important;gap:3px 9px!important;margin:.15rem 0 .72rem!important;padding:.62rem .72rem!important;border-radius:15px!important} .transport-channel-cta .csc-icon{grid-column:1!important;grid-row:1 / span 2!important;width:32px!important;height:32px!important;flex-basis:32px!important}.transport-channel-cta .csc-icon svg{width:18px!important;height:18px!important} .transport-channel-cta .csc-copy{grid-column:2!important;grid-row:1 / span 2!important;font-size:.67rem!important;line-height:1.28!important}.transport-channel-cta .csc-copy strong{font-size:.79rem!important}.transport-channel-cta .csc-action{grid-column:3!important;grid-row:1 / span 2!important;align-self:center!important;min-height:30px!important;padding:.38rem .65rem!important} .t-tabs-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:4px;margin:0 0 12px;padding:4px;border-radius:16px;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)} .t-tab-btn{min-width:0;width:100%;min-height:42px;padding:8px 7px;border-radius:12px;color:var(--text2);font-size:.73rem}.t-tab-btn.active{background:linear-gradient(145deg,rgba(54,215,183,.19),rgba(54,215,183,.1));color:color-mix(in srgb,var(--sea) 88%,#fff);border:1px solid rgba(65,219,190,.18);box-shadow:0 5px 15px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08)} .t-map-nearby-btn{min-height:34px;margin:0 0 11px;padding:7px 11px;border-radius:11px;font-size:.68rem} .t-route-grid-wrap{margin:0 0 13px;padding:12px;border-radius:18px;background:linear-gradient(155deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)} .t-route-grid-title{margin:0 1px 10px;font-size:.68rem;letter-spacing:.105em}.t-route-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.t-route-grid .t-num-badge{height:43px;border-width:1px;font-size:.88rem;background:color-mix(in srgb,var(--route-color,#36D7B7) 7%,rgba(255,255,255,.022))!important;box-shadow:0 5px 14px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.055)} #tsRouteList{margin:.75rem 0 1rem;border-radius:17px;background:linear-gradient(155deg,rgba(255,255,255,.048),rgba(255,255,255,.02))}#tsRouteList .t-subsection-header{min-height:48px;padding:11px 13px}#tsRouteList .t-subsection-title{font-size:.84rem!important} .t-route-list-item{min-height:48px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.032);border-color:rgba(255,255,255,.065)}.t-route-list-name{font-size:.75rem;letter-spacing:-.006em}.t-route-list-arrow{font-size:.9rem;opacity:.65} body.light-theme .transport-section-heading-icon{background:linear-gradient(145deg,rgba(24,152,137,.12),rgba(36,128,185,.06));border-color:rgba(22,143,129,.14)}body.light-theme .t-tabs-bar{background:rgba(21,46,52,.035);border-color:rgba(21,46,52,.075)}body.light-theme .t-route-grid-wrap{background:linear-gradient(155deg,rgba(255,255,255,.82),rgba(239,246,246,.7));border-color:rgba(28,70,75,.09);box-shadow:0 8px 24px rgba(30,74,76,.055),inset 0 1px 0 #fff}body.light-theme .t-route-grid .t-num-badge{background:color-mix(in srgb,var(--route-color,#1a9e8e) 6%,#fff)!important} @media(max-width:350px){.transport-channel-cta .csc-copy{font-size:.62rem!important}.transport-channel-cta .csc-action{padding:.36rem .52rem!important;font-size:.65rem!important}.t-route-grid{gap:6px}.t-route-grid .t-num-badge{height:40px;font-size:.82rem}.t-tab-btn{gap:4px;padding-inline:4px;font-size:.68rem}} /* EMIL DESIGN POLISH 2026-08-23 — isolated rollback block. */ :root{--ease-out:cubic-bezier(.23,1,.32,1);--press-duration:140ms} body::before,.topbar::after,.bottomnav::before,.bnav-item.active::before{animation:none!important} .screen.active{animation:softScreenIn 180ms var(--ease-out) both} #scrHome .city-home-hero{border-color:rgba(255,255,255,.17)!important;box-shadow:0 20px 46px rgba(0,0,0,.3),0 7px 20px color-mix(in srgb,var(--theme-accent) 9%,transparent),inset 0 1px 0 rgba(255,255,255,.18)!important} #scrHome .city-home-title,#scrHome .city-home-greeting,#scrHome .city-section-title,#scrHome .city-section-head h2,#scrHome .city-transport-title{color:rgba(255,255,255,.94);letter-spacing:-.018em;text-wrap:balance} #scrHome .city-home-title,#scrHome .city-home-greeting{text-shadow:0 2px 14px rgba(0,0,0,.52)} #scrHome .city-section-subtitle,#scrHome .city-transport-sub,#scrHome .nn-sub{color:rgba(218,226,231,.6)} #scrHome .home-search-pill{border-color:rgba(255,255,255,.13)!important;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045))!important;box-shadow:0 8px 22px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.075)!important} #scrHome .home-search-pill:focus-visible,#scrHome button:focus-visible,#scrHome a:focus-visible,.bottomnav .bnav-item:focus-visible{outline:2px solid color-mix(in srgb,var(--theme-accent) 76%,#fff);outline-offset:3px} #scrHome .city-now-card,#scrHome .city-transport-card,#scrHome .city-action,#scrHome .nn-cta-btn,#scrHome .quick-chip,#scrHome .city-featured-card,#scrHome .city-all-sections-btn,.bottomnav .bnav-item{transition-property:transform,opacity,border-color,background-color,box-shadow;transition-duration:var(--press-duration),160ms,180ms,180ms,180ms;transition-timing-function:var(--ease-out),ease,ease,ease,var(--ease-out)} #scrHome .city-now-card:active,#scrHome .city-transport-card:active,#scrHome .city-action:active,#scrHome .nn-cta-btn:active,#scrHome .quick-chip:active,#scrHome .city-featured-card:active,#scrHome .city-all-sections-btn:active,.bottomnav .bnav-item:active{transform:scale(.97)} @media(hover:hover) and (pointer:fine){#scrHome .home-search-pill:hover,#scrHome .city-all-sections-btn:hover{border-color:color-mix(in srgb,var(--theme-accent) 28%,rgba(255,255,255,.12))!important;box-shadow:0 10px 26px rgba(0,0,0,.17),0 0 0 1px color-mix(in srgb,var(--theme-accent) 8%,transparent)!important}} body.light-theme #scrHome .city-home-title,body.light-theme #scrHome .city-home-greeting,body.light-theme #scrHome .city-section-title,body.light-theme #scrHome .city-section-head h2,body.light-theme #scrHome .city-transport-title{color:rgba(23,42,49,.94)} body.light-theme #scrHome .city-section-subtitle,body.light-theme #scrHome .city-transport-sub,body.light-theme #scrHome .nn-sub{color:rgba(42,67,76,.64)} @media(prefers-reduced-motion:reduce){.screen.active{animation:none!important}#scrHome .city-now-card,#scrHome .city-transport-card,#scrHome .city-action,#scrHome .nn-cta-btn,#scrHome .quick-chip,#scrHome .city-featured-card,#scrHome .city-all-sections-btn,.bottomnav .bnav-item{transition-property:opacity,border-color,background-color!important;transition-duration:120ms!important;transform:none!important}} /* Event links: explicit colors also override browser blue/visited defaults. */ body:not(.light-theme) #exploreContent[data-cat="concerts"] :is(.concert-title,.concert-desc){color:#edf2f7} body:not(.light-theme) #exploreContent[data-cat="sports"] :is(.sport-title,.sport-desc){color:#edf2f7} body:not(.light-theme) #exploreContent :is(a.concert-tix,a.concert-src,a.sport-tix,a.sport-src,a.pc-map), body:not(.light-theme) #exploreContent :is(a.concert-tix,a.concert-src,a.sport-tix,a.sport-src,a.pc-map):visited{color:#b9dbff;opacity:1;text-decoration:none} body.light-theme #exploreContent :is(a.concert-tix,a.concert-src,a.sport-tix,a.sport-src){color:#215681;opacity:1;text-decoration:none}