/* ===== DESIGN TOKENS + DARK MODE ===== Tema: automatico (segue prefers-color-scheme) di default; forzabile a chiaro/scuro da Impostazioni tramite [data-theme] su (localStorage). */ :root{ color-scheme: light dark; --bg:#FFF8F0; /* sfondo app (crema) */ --surface:#ffffff; /* schede, header, pannelli */ --surface-2:#FFF8F0; /* inset chiari / input */ --surface-3:#f0e8df; /* inset piu' profondi / track */ --border:#ede0d4; /* bordi caldi */ --card-bd:#d8c3ad; /* bordo delle SCHEDE tappabili (evento/luogo/centro): piu marcato di --border perche deve delimitare un elemento cliccabile. Sul chiaro resta morbido, li a staccare la scheda ci pensa l'ombra. */ --border-soft:#f0e8df; --warm-soft:#ffe0cc; /* chip pesca / highlight tenue */ --dots:#e8d5c0; /* texture puntini dietro la chat */ --user-1:#FF6B35; --user-2:#ff8c5a; --user-glow:rgba(255,107,53,0.3); /* bolla msg utente */ --brand-fill:#FF6B35; --brand-fill-hi:#ff8c5a; --brand-fill-lo:#EE5019; --brand-glow:rgba(255,107,53,0.35); /* arancio pieni */ /* tinte callout (badge/box colorati) */ --tint-green:#eaf7ef; --tint-green-bd:#c8e6d1; --tint-blue:#eef4fc; --tint-blue-bd:#c6daf1; --tint-yellow:#fff4d0; --tint-yellow-bd:#ffe085; --tint-red:#fff2f2; --tint-red-bd:#ffced3; --tint-purple:#faf6fc; --tint-purple-bd:#e1bfe8; --tint-warm:#fff3e5; --tint-warm-bd:#ffd4b0; --fg-green-dark:#2e7d32; --fg-yellow:#856404; --fg-warm:#7a4f1e; --text:#222; /* testo primario */ --text-soft:#555; /* testo secondario */ --text-muted:#888; /* testo attenuato */ --text-faint:#aaa; /* placeholder / disabilitato */ --brand:#FF6B35; /* arancio: identico nei due temi */ --shadow:rgba(0,0,0,0.07); --shadow-strong:rgba(0,0,0,0.25); } /* Valori scuri: riusati sia in AUTO (sistema scuro, se non forzato chiaro) sia nella forzatura manuale [data-theme="dark"]. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#16120F; /* nero caldo, non freddo */ --surface:#241d17; --surface-2:#201a15; --surface-3:#2e251d; --border:#4f4235; --card-bd:#7d6a57; --border-soft:#332a22; --warm-soft:#3a2a1e; --dots:#2c241d; --user-1:#b5542e; --user-2:#9a4626; --user-glow:rgba(0,0,0,0.35); /* bolla utente: arancio spento su scuro */ --brand-fill:#b5542e; --brand-fill-hi:#c56a44; --brand-fill-lo:#8a3818; --brand-glow:rgba(0,0,0,0.4); /* arancio pieni spenti su scuro */ --tint-green:#18271d; --tint-green-bd:#2f4a38; --tint-blue:#17212e; --tint-blue-bd:#2c4258; --tint-yellow:#2c2611; --tint-yellow-bd:#5a4a1e; --tint-red:#2e1717; --tint-red-bd:#5a2e2e; --tint-purple:#241a2e; --tint-purple-bd:#4a3358; --tint-warm:#2d2013; --tint-warm-bd:#5a3f2a; --fg-green-dark:#6bd18f; --fg-yellow:#e6c766; --fg-warm:#d9a066; --text:#f0e6da; /* crema tenue, non bianco puro */ --text-soft:#c9bcac; --text-muted:#9e8f7d; --text-faint:#786a5b; --shadow:rgba(0,0,0,0.45); --shadow-strong:rgba(0,0,0,0.6); } } :root[data-theme="dark"]{ color-scheme: dark; --bg:#16120F; --surface:#241d17; --surface-2:#201a15; --surface-3:#2e251d; --border:#4f4235; --card-bd:#7d6a57; --border-soft:#332a22; --warm-soft:#3a2a1e; --dots:#2c241d; --user-1:#b5542e; --user-2:#9a4626; --user-glow:rgba(0,0,0,0.35); /* bolla utente: arancio spento su scuro */ --brand-fill:#b5542e; --brand-fill-hi:#c56a44; --brand-fill-lo:#8a3818; --brand-glow:rgba(0,0,0,0.4); /* arancio pieni spenti su scuro */ --tint-green:#18271d; --tint-green-bd:#2f4a38; --tint-blue:#17212e; --tint-blue-bd:#2c4258; --tint-yellow:#2c2611; --tint-yellow-bd:#5a4a1e; --tint-red:#2e1717; --tint-red-bd:#5a2e2e; --tint-purple:#241a2e; --tint-purple-bd:#4a3358; --tint-warm:#2d2013; --tint-warm-bd:#5a3f2a; --fg-green-dark:#6bd18f; --fg-yellow:#e6c766; --fg-warm:#d9a066; --text:#f0e6da; --text-soft:#c9bcac; --text-muted:#9e8f7d; --text-faint:#786a5b; --shadow:rgba(0,0,0,0.45); --shadow-strong:rgba(0,0,0,0.6); } :root[data-theme="light"]{ color-scheme: light; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); overflow: hidden; } /* ── TAB BAR ── */ #tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: calc(50px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); z-index: 300; background: var(--surface); border-top: 1px solid var(--border); display: flex; box-shadow: 0 -2px 10px rgba(0,0,0,0.07); } @media (min-width: 600px) { html { background: #1A1A1A !important; min-height: 100vh; } body { background: #1A1A1A !important; min-height: 100vh; } #chatbot-view { background: #1A1A1A !important; } #tab-bar { left: 50%; right: auto; transform: translateX(-50%); width: 480px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 0 0 18px 18px; } #chatbot-inner { border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 18px 18px 0 0; box-shadow: 0 0 80px rgba(0,0,0,0.25); overflow: hidden; } /* Popup, panel e modali limitati alla larghezza app (480px) — allineati alla chat */ #mobile-popup, #info-panel, #favorites-panel { left: calc(50vw - 240px) !important; right: auto !important; transform: translateY(100%); width: 480px; max-width: 480px; } #mobile-popup.open, #info-panel.open, #favorites-panel.open { transform: translateY(0); } #popup-backdrop, #info-backdrop, #favorites-backdrop, #login-backdrop { left: 0; width: 100%; max-width: 100%; } #info-close-btn, #favorites-close-btn { display: block !important; } #map-view { left: calc(50vw - 240px) !important; right: auto !important; width: 480px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 18px 18px 0 0; overflow: hidden; } #map { height: 100%; } #geo-btn { right: calc(50vw - 226px) !important; top: 16px !important; } } .tab-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; position: relative; color: var(--text-faint); transition: color .2s; -webkit-tap-highlight-color: transparent; /* niente flash grigio nativo: usiamo lo stato attivo */ } .tab-btn.active { color: #FF6B35; } /* Stato selezionato PERSISTENTE: pill arancione sotto la tab attiva. Niente grayscale sulle inattive (confondeva) — le emoji restano sempre a colori, cambia solo la pill. */ .tab-btn .tab-icon:not(.tab-icon--plus) { padding: 4px 16px; border-radius: 15px; transition: background .2s, transform .12s; } .tab-btn.active .tab-icon:not(.tab-icon--plus) { background: var(--surface); } .tab-btn:active .tab-icon:not(.tab-icon--plus) { transform: scale(.9); } /* Tab Risultati: NON presente finché non si fa una ricerca; compare solo con .ready */ .tab-btn--dim { display: none; } .tab-btn--dim.ready { display: flex; opacity: 1; pointer-events: auto; } .tab-btn--new { color: #FF6B35; } .tab-btn--new:active { transform: scale(.9); } .tab-btn .tab-icon { font-size: 26px; line-height: 1; } .tab-icon--plus { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-fill); color: #fff; font-size: 22px; font-weight: 400; line-height: 1; } .tab-badge { position: absolute; top: 8px; right: calc(50% - 22px); background: var(--brand-fill); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; align-items: center; justify-content: center; padding: 0 4px; display: none; } /* ═══════════════════════════════════════════ CHATBOT VIEW — schermata principale ═══════════════════════════════════════════ */ #chatbot-view { position: fixed; top: 0; left: 0; right: 0; bottom: calc(50px + env(safe-area-inset-bottom)); z-index: 100; display: flex; align-items: center; justify-content: center; background: #f0e6d8; transition: bottom .25s ease; } #chatbot-inner { width: 100%; max-width: 480px; height: 100%; display: flex; flex-direction: column; background: var(--bg); box-shadow: 0 0 40px rgba(0,0,0,0.12); } #chatbot-main-header { --hdr-pad-top: calc(12px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; justify-content: center; padding: var(--hdr-pad-top) 16px 12px; background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,0.08); flex-shrink: 0; } /* App nativa: la status bar NON copre la webview (setOverlaysWebView overlay:false), ma env(safe-area-inset-top) resta >0 con edge-to-edge → il padding raddoppierebbe. */ html.native-app #chatbot-main-header { --hdr-pad-top: 12px; } #chatbot-main-header .header-text { text-align: center; } #chatbot-main-header .header-text strong { font-size: 16px; display: block; color: var(--text); } #chatbot-main-header .header-text span { font-size: 12px; color: var(--text-muted); } .chatbot-messages { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); background-image: radial-gradient(circle, var(--dots) 1px, transparent 1px); background-size: 22px 22px; } .chat-bubble { max-width: 88%; padding: 12px 16px; border-radius: 18px; font-size: 15px; line-height: 1.5; } .chat-bubble--user { background: linear-gradient(135deg, var(--user-1), var(--user-2)); color: #fff; align-self: flex-end; border-radius: 18px 18px 4px 18px; box-shadow: 0 3px 10px var(--user-glow); } .chat-bubble--assistant { background: var(--surface); color: var(--text); align-self: flex-start; border-radius: 18px 18px 18px 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); border-left: 3px solid #FF6B35; } .chat-bubble--info { background: var(--tint-warm); color: var(--fg-warm); align-self: flex-start; border-radius: 18px 18px 18px 4px; font-size: 13px; line-height: 1.5; border-left: 3px solid #FF6B35; max-width: 88%; padding: 10px 14px; } /* ── AZIONI BOLLA ASSISTENTE ── */ .bubble-wrap { align-self: flex-start; max-width: 88%; display: flex; flex-direction: row; gap: 8px; align-items: flex-start; } .bubble-wrap-inner { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .bubble-wrap .chat-bubble--assistant { align-self: unset; max-width: 100%; } /* ── FEEDBACK RISPOSTA ── */ .bubble-feedback { display: flex; gap: 6px; align-items: center; margin-top: 4px; } /* margin 0 (era 12px 0 4px): il contenitore .chatbot-messages ha gia gap:12px, quindi il margin si SOMMAVA e fra il disclaimer, "Manca un evento?" e "E' stata utile?" restavano 24-28px — le tre righe sembravano scollegate invece di leggersi come un pie' di pagina unico. Ora la distanza la decide solo il gap del contenitore (12px, come fra le bolle). */ .feedback-standalone { margin: 0; padding-left: 6px; flex-wrap: wrap; } /* --text-soft, NON --text-faint: queste sono scritte VERE (una domanda e un bottone), non placeholder. Con --text-faint il contrasto era 3.56:1 in scuro e 2.21:1 in chiaro, sotto il minimo di 4.5:1 per un testo di 11-12px → si leggevano male (segnalato da Patrick su screenshot in dark mode, 25/07). Con --text-soft: 10:1 in scuro, 7.5:1 in chiaro. */ .feedback-label { font-size: 12px; color: var(--text-soft); margin-right: 2px; } .feedback-btn { background: none; border: 1.5px solid var(--border); border-radius: 20px; padding: 3px 10px; font-size: 14px; cursor: pointer; color: var(--text-soft); transition: all .15s; line-height: 1.6; } .feedback-btn:active { transform: scale(.93); } .feedback-btn.sent { border-color: transparent; color: var(--text-faint); cursor: default; font-size: 12px; } .feedback-neg-options { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; animation: fadeIn .18s ease; } .feedback-neg-opt { background: var(--bg); border: 1.5px solid var(--border); border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-muted); font-family: inherit; transition: all .15s; } .feedback-neg-opt:active { background: var(--surface); border-color: #FF6B35; color: #FF6B35; } .bubble-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; margin-top: 4px; border: 1.5px solid var(--border); background: var(--surface); } .bubble-actions { display: flex; gap: 4px; padding-left: 0; } .bubble-action-btn { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--text-faint); padding: 3px 9px; border-radius: 10px; display: flex; align-items: center; gap: 3px; transition: color .15s, background .15s; } .bubble-action-btn:active { background: var(--surface); color: #FF6B35; } .chat-dots span { display: inline-block; animation: bounce .8s infinite; font-size: 16px; color: var(--text-muted); } .chat-dots span:nth-child(2) { animation-delay: .15s; } .chat-dots span:nth-child(3) { animation-delay: .3s; } @keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} } .show-map-btn { display: block; width: 100%; margin-top: 10px; background: linear-gradient(135deg, #6BA6CF, #8FBDDC); color: #fff; border: none; border-radius: 14px; padding: 14px 20px; font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; box-shadow: 0 6px 16px rgba(91,155,213,0.28); letter-spacing: .3px; } .show-map-btn:active { transform: scale(0.98); } .chatbot-suggestions { display: flex; gap: 8px; padding: 8px 14px 6px; overflow-x: auto; scrollbar-width: none; background: var(--surface); border-top: 1px solid var(--surface-3); flex-shrink: 0; } .chatbot-suggestions::-webkit-scrollbar { display: none; } .chat-chip { white-space: nowrap; background: var(--surface); border: 1.5px solid #FF6B35; color: #FF6B35; border-radius: 20px; padding: 8px 14px; font-size: 13px; cursor: pointer; font-weight: 500; } .chat-chip:active { background: var(--brand-fill); color: #fff; } /* ── SUGGESTIONS DRAWER ── */ #suggestions-drawer { background: var(--surface); border-top: 1.5px solid var(--surface-3); overflow: hidden; max-height: 0; transition: max-height .28s cubic-bezier(.32,1,.4,1), padding .28s; padding: 0 14px; flex-shrink: 0; } #suggestions-drawer.open { max-height: 320px; padding: 12px 14px 8px; } #suggestions-drawer-handle { width: 36px; height: 4px; background: #e0d6ce; border-radius: 2px; margin: 0 auto 12px; } #suggestions-drawer-grid { display: flex; flex-direction: column; gap: 8px; } .drawer-chip { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: var(--bg); border: 1.5px solid var(--surface-3); font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; font-family: inherit; transition: background .15s, border-color .15s; } .drawer-chip:active { background: var(--surface); border-color: #FF6B35; color: #FF6B35; } /* ── SUGGESTIONS TRIGGER BUTTON ── */ .chatbot-suggest-btn { width: 44px; height: 44px; flex-shrink: 0; background: var(--bg); border: 1.5px solid var(--surface-3); border-radius: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; transition: background .15s, border-color .15s; } .chatbot-suggest-btn.active { background: var(--surface); border-color: #FF6B35; } .chatbot-input-row { display: flex; gap: 10px; padding: 10px 14px 22px; background: var(--surface); border-top: 1px solid var(--surface-3); align-items: flex-end; flex-shrink: 0; } .chatbot-input { flex: 1; border: 2px solid var(--border); border-radius: 16px; padding: 12px 14px; font-size: 15px; resize: none; outline: none; font-family: inherit; max-height: 100px; background: var(--bg); line-height: 1.4; } .chatbot-input:focus { border-color: #FF6B35; background: var(--surface); } .chatbot-send { background: var(--brand-fill); border: none; border-radius: 14px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 12px var(--brand-glow); } .chatbot-send:active { transform: scale(0.95); } .chatbot-send svg { fill: #fff; } .chatbot-mic { background: var(--surface-3); border: none; border-radius: 14px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; color: var(--text-faint); transition: background .2s, color .2s; } .chatbot-mic:active { transform: scale(0.95); } .chatbot-mic.listening { background: var(--tint-red); color: #e53e3e; animation: micPulse 1.2s ease-in-out infinite; } @keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,62,62,0.35); } 50% { box-shadow: 0 0 0 8px rgba(229,62,62,0); } } /* ═══════════════════════════════════════════ MAP VIEW — schermata mappa ═══════════════════════════════════════════ */ #map-view { position: fixed; inset: 0; z-index: 50; display: none; } /* ── MAP ── */ #map { width: 100%; height: 100vh; } /* ── TOP BAR ── */ #top-search-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; gap: 8px; background: var(--surface); padding: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } #top-search-bar input { flex: 1; border: none; outline: none; font-size: 15px; padding: 6px 4px; } #logo-daop img { height: 32px; border-radius: 6px; } /* ── MACRO CATEGORIE ── */ #macroCategoryScroll { position: fixed; top: 56px; left: 0; right: 0; z-index: 999; display: flex; gap: 6px; overflow-x: auto; padding: 6px 10px; background: rgba(255,255,255,0.95); backdrop-filter: blur(4px); scrollbar-width: none; } #macroCategoryScroll::-webkit-scrollbar { display: none; } .macro-btn { white-space: nowrap; border: none; background: #f0f0f0; border-radius: 20px; padding: 5px 12px; font-size: 12px; cursor: pointer; transition: all .2s; } .macro-btn.active { background: var(--brand-fill); color: #fff; } /* ── MOBILE RESULTS ── */ #mobileResultsContainer { position: fixed; bottom: 50px; left: 0; right: 0; z-index: 900; background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); height: 45vh; overflow: hidden; display: none; } .drag-handle { padding: 10px 14px 6px; border-bottom: 1px solid var(--border); } .drag-handle__row { display: flex; justify-content: space-between; align-items: center; } .drag-handle__left, .drag-handle__right { display: flex; align-items: center; gap: 8px; } .drag-handle__count { font-size: 12px; color: var(--text-muted); margin-top: 4px; } #dragArrow { font-size: 18px; cursor: pointer; } .result-card { background: var(--surface); border-radius: 10px; padding: 12px; /* --card-bd come .cal-chip: e una scheda TAPPABILE, il suo contorno deve vedersi (stesso difetto dark mode delle schede evento, sistemato insieme il 25/07). */ margin-bottom: 8px; cursor: pointer; border: 1px solid var(--card-bd); transition: all .15s; } .result-card:active { background: var(--surface); border-color: #FF6B35; } .result-card__name { font-weight: 600; font-size: 14px; margin-bottom: 2px; } .result-card__meta { font-size: 12px; color: var(--text-muted); } .result-card__badge { display: inline-block; background: var(--brand-fill); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-left: 4px; } /* ── POPUP BACKDROP ── */ #popup-backdrop { position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,0.52); display: none; } /* ── MOBILE POPUP — bottom sheet ── */ #mobile-popup { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1500; background: var(--surface); border-radius: 22px 22px 0 0; max-height: 85vh; overflow-y: auto; display: none; transform: translateY(100%); transition: transform .34s cubic-bezier(0.32, 0.72, 0, 1); padding-bottom: 28px; } #mobile-popup.open { transform: translateY(0); } .popup-handle { width: 38px; height: 4px; background: var(--surface-3); border-radius: 2px; margin: 12px auto 0; } /* ── POPUP CAROUSEL ── */ .popup-carousel { position: relative; margin-top: 10px; overflow: hidden; } .popup-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .popup-carousel-track::-webkit-scrollbar { display: none; } .popup-carousel-track img { flex-shrink: 0; width: 100%; height: 195px; object-fit: cover; scroll-snap-align: start; } .popup-carousel-dots { display: flex; justify-content: center; gap: 5px; padding: 8px 0 4px; } .popup-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); transition: background .2s, transform .2s; } .popup-carousel-dot.active { background: var(--brand-fill); transform: scale(1.3); } .popup-hero-placeholder { width: 100%; height: 150px; margin-top: 10px; background: linear-gradient(135deg, var(--surface), #FFD9C7); display: flex; align-items: center; justify-content: center; font-size: 62px; border-radius: 0; } .popup-hero-wrap { position: relative; } .popup-content { padding: 14px 18px 6px; } #close-mobile-popup { position: absolute; top: 14px; right: 14px; z-index: 10; background: rgba(255,255,255,0.93); border: none; border-radius: 50%; width: 34px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.18); } .popup-badge { display: inline-block; background: var(--brand-fill); color: #fff; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; margin-bottom: 5px; } .popup-name { font-size: 21px; font-weight: 800; color: var(--text); margin-bottom: 3px; line-height: 1.25; } .popup-cat { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; } .popup-services { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; } .service-tag { background: var(--surface-3); border-radius: 16px; padding: 4px 11px; font-size: 12px; color: var(--text-soft); } .popup-desc { color: var(--text-soft); font-size: 14px; line-height: 1.55; margin-bottom: 10px; } .popup-info-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; color: var(--text); } .popup-info-row a { color: #FF6B35; text-decoration: none; } .popup-maps-btn { display: block; width: 100%; margin-top: 18px; background: var(--brand-fill); color: #fff; border: none; border-radius: 14px; padding: 15px; font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; box-shadow: 0 4px 14px rgba(255,107,53,0.32); } .popup-lock-msg { color: var(--text-faint); font-size: 13px; margin-top: 8px; line-height: 1.4; } /* ── TOAST ── */ .daop-toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 10px 18px; border-radius: 20px; font-size: 13px; z-index: 9999; animation: fadeInOut 3.5s ease forwards; } .daop-toast--error { background: #e74c3c; } @keyframes fadeInOut { 0%{opacity:0;transform:translate(-50%,10px)} 15%{opacity:1;transform:translate(-50%,0)} 80%{opacity:1} 100%{opacity:0} } /* ── LIGHTBOX ── */ .lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; } .lightbox.open { display: flex; } .lightbox img { max-width: 95%; max-height: 80vh; border-radius: 8px; } .lightbox-close { position: absolute; top: 16px; right: 16px; color: #fff; font-size: 28px; cursor: pointer; } .prev-btn, .next-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); border: none; color: #fff; font-size: 28px; padding: 8px 14px; cursor: pointer; border-radius: 8px; } .prev-btn { left: 8px; } .next-btn { right: 8px; } .rcard { background: var(--surface); border-radius: 14px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); cursor: pointer; transition: transform .1s; active-transform: scale(0.98); } .rcard:active { transform: scale(0.98); } .rcard.premium { border-left: 4px solid #FF6B35; background: var(--bg); } .rcard.consigliato { border-left: 4px solid #2E9E5B; background: var(--tint-green); } .rcard-sponsored { font-size: 10px; color: #FF6B35; font-weight: 700; letter-spacing: .3px; margin-bottom: 2px; display: block; } .rcard-consigliato { font-size: 10px; color: #4a9e7a; font-weight: 700; letter-spacing: .3px; margin-bottom: 2px; display: block; } .rcard-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; } .rcard-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; } .rcard-dist { font-size: 12px; color: #FF6B35; font-weight: 600; } .rcard-badge { display: inline-block; background: var(--brand-fill); color: #fff; font-size: 10px; padding: 1px 7px; border-radius: 8px; margin-right: 4px; vertical-align: middle; } /* ── Selettore tema (Impostazioni → Aspetto) ── */ .theme-seg { display: flex; gap: 6px; margin: 10px 0 4px; } .theme-seg-btn { flex: 1; padding: 9px 6px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text-soft); font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .theme-seg-btn:active { transform: scale(0.97); } .theme-seg-btn.active { background: var(--brand-fill); color: #fff; border-color: #FF6B35; box-shadow: 0 2px 8px rgba(255,107,53,0.3); } /* Toggle consenso statistiche (Impostazioni) — stesso look del segmented tema, classe separata per non intrecciarsi con syncThemeButtons. */ .stats-seg { display: flex; gap: 6px; margin: 10px 0 4px; } .stats-seg-btn { flex: 1; padding: 9px 6px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text-soft); font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .stats-seg-btn:active { transform: scale(0.97); } .stats-seg-btn.active { background: var(--brand-fill); color: #fff; border-color: #FF6B35; box-shadow: 0 2px 8px rgba(255,107,53,0.3); } /* ── SALVATI VIEW (Agenda + Preferiti unificati) ── */ #salvati-view { position: fixed; top: 0; left: 0; right: 0; bottom: calc(50px + env(safe-area-inset-bottom)); z-index: 110; display: none; flex-direction: column; background: var(--bg); overflow: hidden; } #salvati-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } #salvati-title { flex: 1; font-weight: 700; font-size: 15px; color: var(--text); } #salvati-segments { display: flex; gap: 6px; padding: 12px 12px 4px; flex-shrink: 0; } .salv-seg-btn { position: relative; flex: 1; padding: 10px 6px; border: none; border-radius: 12px; background: var(--surface-3); color: var(--text-muted); font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } .salv-seg-btn.active { background: var(--brand-fill); color: #fff; box-shadow: 0 2px 8px rgba(255,107,53,0.3); } .salv-seg-btn:active { transform: scale(0.97); } .salv-seg-badge { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; margin-left: 4px; padding: 0 4px; border-radius: 8px; box-sizing: border-box; background: #e53935; color: #fff; font-size: 10px; font-weight: 800; vertical-align: middle; } .salv-seg-btn.active .salv-seg-badge { background: var(--surface); color: #FF6B35; } #salvati-body { flex: 1; overflow-y: auto; } .salv-list { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; } /* ── GEO BTN OVERLAY ── */ #geo-btn { position: fixed; right: 14px; z-index: 1100; top: 16px; background: var(--brand-fill); border: none; color: #fff; border-radius: 24px; padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 14px rgba(255,107,53,0.45); display: none; align-items: center; gap: 5px; } #geo-btn:active { background: #e85a28; transform: scale(.96); } /* ── PLACES BOTTOM SHEET ── */ #places-sheet { position: fixed; left: 0; right: 0; max-width: 480px; margin: 0 auto; bottom: calc(50px + env(safe-area-inset-bottom)); z-index: 800; background: var(--bg); border-radius: 20px 20px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); display: flex; flex-direction: column; height: 0; overflow: hidden; transition: height .3s cubic-bezier(.32,1,.4,1); } #psheet-handle-area { display: flex; justify-content: center; align-items: center; padding: 10px 0 4px; flex-shrink: 0; touch-action: none; cursor: ns-resize; user-select: none; -webkit-user-select: none; } #psheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--surface-3); } #psheet-header { display: flex; align-items: center; padding: 2px 16px 10px; flex-shrink: 0; } #psheet-title { flex: 1; font-weight: 700; font-size: 15px; color: var(--text); } #psheet-expand { background: none; border: none; font-size: 18px; color: #FF6B35; cursor: pointer; padding: 4px 8px; line-height: 1; font-weight: 700; } #psheet-close { background: none; border: none; font-size: 18px; color: var(--text-faint); cursor: pointer; padding: 4px 8px; line-height: 1; } #psheet-filters { padding: 0 12px 8px; display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; } #psheet-list { flex: 1; overflow-y: auto; padding: 4px 12px 16px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; } /* ── PLACES SHEET — stato selezionato ── */ #psheet-selected { display: none; flex-direction: column; padding: 0 14px 14px; gap: 10px; } #psel-back { background: none; border: none; color: #FF6B35; font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; text-align: left; font-family: inherit; } #psel-card { background: var(--surface); border-radius: 14px; padding: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.09); display: flex; align-items: center; gap: 12px; } #psel-avatar { font-size: 28px; line-height: 1; flex-shrink: 0; } #psel-info { flex: 1; min-width: 0; } #psel-name { font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #psel-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #psel-dist { font-size: 12px; color: #FF6B35; margin-top: 3px; } #psel-detail-btn { background: var(--brand-fill); color: #fff; border: none; border-radius: 12px; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0; } /* ── EVENTS BOTTOM SHEET ── */ #events-sheet { position: fixed; left: 0; right: 0; max-width: 480px; margin: 0 auto; bottom: calc(50px + env(safe-area-inset-bottom)); z-index: 800; background: var(--bg); border-radius: 20px 20px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); display: flex; flex-direction: column; height: 0; overflow: hidden; transition: height .3s cubic-bezier(.32,1,.4,1); } #esheet-handle-area { display: flex; justify-content: center; align-items: center; padding: 10px 0 4px; flex-shrink: 0; touch-action: none; cursor: ns-resize; user-select: none; -webkit-user-select: none; } #esheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--surface-3); } #esheet-header { display: flex; align-items: center; padding: 2px 16px 10px; flex-shrink: 0; } #esheet-title { flex: 1; font-weight: 700; font-size: 15px; color: var(--text); } #esheet-expand { background: none; border: none; font-size: 18px; color: #FF6B35; cursor: pointer; padding: 4px 8px; line-height: 1; font-weight: 700; } #esheet-close { background: none; border: none; font-size: 18px; color: var(--text-faint); cursor: pointer; padding: 4px 8px; line-height: 1; } #esheet-showall { display: none; width: calc(100% - 24px); margin: 0 12px 8px; background: var(--surface); color: #993C1D; border: 1px solid var(--warm-soft); border-radius: 12px; padding: 9px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; text-align: center; flex-shrink: 0; } #esheet-showall:active { background: var(--tint-warm-bd); } #esheet-time-row { display: flex; gap: 4px; padding: 0 12px 8px; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } #esheet-time-row::-webkit-scrollbar { display: none; } .esheet-time-btn { border: none; background: var(--surface-3); color: var(--text-muted); font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 16px; cursor: pointer; white-space: nowrap; font-family: inherit; flex-shrink: 0; } .esheet-time-btn.active { background: var(--brand-fill); color: #fff; } #esheet-cat-bar { display: none; gap: 4px; padding: 0 12px 8px; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } #esheet-cat-bar::-webkit-scrollbar { display: none; } #esheet-list { flex: 1; overflow-y: auto; padding: 4px 12px 16px; display: flex; flex-direction: column; gap: 10px; } .evcard { background: var(--surface); border-radius: 14px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); cursor: pointer; display: flex; align-items: center; gap: 12px; transition: transform .1s; } .evcard:active { transform: scale(0.98); } .evcard.premium { border-left: 4px solid #FF6B35; background: var(--bg); } .evcard-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--warm-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; flex-shrink: 0; } .evcard-body { flex: 1; min-width: 0; } .evcard-name { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .evcard-date { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .evcard-dist { font-size: 12px; color: #FF6B35; margin-top: 2px; } .evcard-arrow { font-size: 20px; color: #ddd; flex-shrink: 0; } #esheet-selected { display: none; flex-direction: column; padding: 0 14px 14px; gap: 10px; } #esel-back { background: none; border: none; color: #FF6B35; font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; text-align: left; font-family: inherit; } #esel-card { background: var(--surface); border-radius: 14px; padding: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.09); display: flex; align-items: center; gap: 12px; } #esel-avatar { font-size: 28px; line-height: 1; flex-shrink: 0; } #esel-name { font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #esel-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #esel-dist { font-size: 12px; color: #FF6B35; margin-top: 3px; } #esel-detail-btn { background: var(--brand-fill); color: #fff; border: none; border-radius: 12px; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0; } /* quando lo sheet eventi è aperto, nasconde gli overlay mappa duplicati */ .ev-sheet-active #ev-time-bar, .ev-sheet-active #ev-cat-bar, .ev-sheet-active #ev-show-all-btn, .ev-sheet-active #ev-map-title { display: none !important; } /* ── FRECCIA INDIETRO MAPPA (torna a risultati / salvati / passaporto) ── */ #map-back-to-results { position: absolute; top: 12px; left: 12px; z-index: 1200; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: none; color: #FF6B35; padding: 0; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.18); transition: transform .1s; } #map-back-to-results:active { transform: scale(.92); } /* ── TITOLO MAPPA EVENTI (📅 Eventi · N) — in cima, col contatore separato ── */ #ev-map-title { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1100; display: none; align-items: center; gap: 5px; background: var(--surface); border-radius: 20px; padding: 6px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); font-size: 14px; font-weight: 800; color: #FF6B35; white-space: nowrap; max-width: calc(100vw - 24px); box-sizing: border-box; } /* Il titolo può diventare lungo ("entro 30 km da Castelnuovo Scrivia") → tronca con ellissi ma tieni sempre visibile il contatore "· N" a destra (che non si stringe). */ #map-title-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Stato "filtrato" (risultato di una ricerca): cue visivo caldo che lo distingue a colpo d'occhio dal browse "📅 Eventi" / "📍 Luoghi" — non basta il testo, serve un segnale (best practice filtri). */ #ev-map-title.filtered { background: var(--surface); box-shadow: 0 0 0 1.5px var(--warm-soft), 0 2px 8px rgba(0,0,0,0.18); } #ev-count-badge { flex: 0 0 auto; font-weight: 700; color: #993C1D; } #ev-count-badge:not(:empty)::before { content: '· '; color: #d8c4b8; } /* ── BARRA TEMPORALE EVENTI (Oggi / Domani / Weekend / Tutti) — riga sotto il titolo ── */ #ev-time-bar { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); z-index: 1100; display: none; align-items: center; gap: 4px; background: var(--surface); border-radius: 20px; padding: 4px 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); max-width: calc(100vw - 24px); } .ev-time-btn { border: none; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 16px; cursor: pointer; white-space: nowrap; font-family: inherit; } .ev-time-btn.active { background: var(--brand-fill); color: #fff; } /* ── "MOSTRA TUTTI GLI EVENTI" — pill che compare al posto della barra tempo quando la mappa mostra il SOTTOINSIEME di una ricerca (bottone "Vedi questi eventi sulla mappa"): allarga al browse completo, così la vista filtrata e quella del tab tornano coerenti. ── */ #ev-show-all-btn { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); z-index: 1100; display: none; border: none; cursor: pointer; font-family: inherit; background: var(--surface); color: #FF6B35; font-size: 12px; font-weight: 700; padding: 7px 15px; border-radius: 20px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.18); } #ev-show-all-btn:active { background: var(--surface); } /* ── BARRA CATEGORIE EVENTI (Sagre / Spettacoli / … ) — riga sotto la time bar, scrollabile ── */ #ev-cat-bar { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); z-index: 1100; display: none; align-items: center; gap: 4px; background: var(--surface); border-radius: 20px; padding: 4px 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); max-width: calc(100vw - 24px); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #ev-cat-bar::-webkit-scrollbar { display: none; } .ev-cat-btn { border: none; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 16px; cursor: pointer; white-space: nowrap; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; } .ev-cat-btn.active { background: var(--brand-fill); color: #fff; } .ev-cat-n { font-weight: 700; opacity: .6; font-size: 11px; } .ev-cat-btn.active .ev-cat-n { opacity: .9; } /* Marker evento: pin ARANCIONE pieno (identità "evento", ≠ luoghi che sono cerchi bianchi), con l'emoji-categoria (🎭🎪🎬…) dentro un dischetto BIANCO al centro → resta leggibile (le emoji sono multicolore: su arancione pieno perdevano contrasto). */ .event-div-icon { width: 38px; height: 38px; background: var(--brand-fill); border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 2px 7px rgba(0,0,0,0.32); box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .event-div-icon .ev-glyph { width: 25px; height: 25px; background: var(--surface); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; } .event-div-icon.premium { background: #F5A623; border-color: var(--bg); box-shadow: 0 0 0 2px rgba(245,166,35,.30), 0 2px 7px rgba(0,0,0,0.32); } .event-div-icon.premium .ev-glyph { background: var(--bg); } /* ── GEO BUTTON ── */ .leaflet-control-custom { background: var(--surface); border-radius: 8px; padding: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); cursor: pointer; font-size: 13px; font-weight: 600; } .custom-div-icon { font-size: 20px; text-align: center; line-height: 36px; width: 40px; height: 40px; background: var(--surface); border: 2.5px solid #FF6B35; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.28); box-sizing: border-box; } .custom-div-icon.premium { width: 50px; height: 50px; line-height: 44px; font-size: 25px; border: 3px solid #F5A623; background: var(--bg); box-shadow: 0 0 0 3px rgba(245,166,35,.28), 0 0 12px rgba(245,166,35,.55), 0 3px 8px rgba(0,0,0,0.30); } /* badge stella in alto a destra — segnale premium/B2B */ .custom-div-icon.premium::after { content: '🌟'; position: absolute; top: -7px; right: -7px; font-size: 17px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); } /* ── ZOOM CONTROL MAPPA (bottom-left, sopra la tab bar) ── */ .leaflet-control-zoom { border: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.22) !important; border-radius: 22px !important; overflow: hidden; margin-bottom: calc(62px + env(safe-area-inset-bottom)) !important; margin-left: 12px !important; } .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; color: #FF6B35 !important; font-size: 20px; font-weight: 700; background: var(--surface) !important; border: none !important; } .leaflet-control-zoom a:hover { background: var(--surface) !important; } .leaflet-control-zoom a.leaflet-disabled { color: #ddd !important; background: var(--surface) !important; } /* ── GEO WARNING ── */ #geoWarning { position: fixed; top: 100px; left: 50%; transform: translateX(-50%); background: var(--tint-yellow); border: 1px solid var(--tint-yellow-bd); border-radius: 10px; padding: 8px 14px; font-size: 13px; z-index: 900; display: none; align-items: center; gap: 8px; max-width: 90%; } /* ── RADIUS SLIDER ── */ #radiusSelectorVertical { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 900; background: var(--surface); border-radius: 20px; padding: 10px 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.15); display: none; flex-direction: column; align-items: center; gap: 6px; } #radiusRange { writing-mode: vertical-lr; direction: rtl; height: 120px; } #radiusValue { font-size: 11px; color: var(--text-soft); font-weight: 600; } @keyframes splashPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes appFadeIn { from { opacity: 0; } to { opacity: 1; } } #chatbot-container { animation: appFadeIn .5s ease both; } /* ── GDPR BANNER ── */ #gdpr-banner { position: fixed; inset: 0; z-index: 6000; background: rgba(0,0,0,0.6); display: none; align-items: flex-end; justify-content: center; transition: opacity .4s; } #gdpr-box { background: var(--surface); border-radius: 22px 22px 0 0; padding: 28px 22px 36px; max-width: 480px; width: 100%; box-shadow: 0 -4px 30px rgba(0,0,0,0.18); } #gdpr-box h3 { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 10px; } #gdpr-box p { font-size: 14px; color: var(--text-soft); line-height: 1.55; margin-bottom: 8px; } #gdpr-box ul { padding-left: 18px; margin-bottom: 14px; } #gdpr-box ul li { font-size: 13px; color: var(--text-muted); margin-bottom: 5px; } #gdpr-accept { width: 100%; background: var(--brand-fill); color: #fff; border: none; border-radius: 14px; padding: 15px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(255,107,53,0.3); margin-bottom: 10px; } #gdpr-reject { width: 100%; background: var(--surface); color: var(--text-soft); border: 1.5px solid var(--border); border-radius: 14px; padding: 13px; font-size: 15px; font-weight: 600; cursor: pointer; margin-bottom: 10px; } #gdpr-reject:active { background: var(--surface-3); } #gdpr-privacy { display: block; text-align: center; font-size: 12px; color: var(--text-faint); text-decoration: underline; cursor: pointer; } /* ── GINETTO HEADER ── */ .ginetto-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; overflow: hidden; box-shadow: 0 2px 10px rgba(255,107,53,0.22); background: linear-gradient(135deg, var(--brand-fill), var(--brand-fill-hi)); display: flex; align-items: center; justify-content: center; font-size: 26px; } .ginetto-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } #chatbot-main-header { justify-content: flex-start; } #chatbot-main-header .header-text { text-align: left; margin-left: 12px; } #chatbot-main-header .header-text strong { font-size: 17px; } #chatbot-main-header .header-text span { font-size: 12px; } /* ── RESULT CARDS migliorati ── */ .rcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; } .rcard-avatar { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 22px; } .rcard.premium .rcard-avatar { background: var(--surface); border: 1.5px solid var(--warm-soft); } .rcard-body { flex: 1; min-width: 0; } .rcard-arrow { font-size: 20px; color: #ddd; flex-shrink: 0; } .km-chip, .age-chip, .free-chip { padding: 5px 13px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: all .15s; font-family: inherit; } .km-chip.active { background: var(--brand-fill); color: #fff; border-color: #FF6B35; } .age-chip.active { background: #5B9BD5; color: #fff; border-color: #5B9BD5; } .free-chip.active { background: #4a9e7a; color: #fff; border-color: #4a9e7a; } /* ── filtro età a età singola (slider) ── */ .age-slider { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .age-range { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 3px; background: var(--border); width: 116px; outline: none; cursor: pointer; margin: 0 2px; } .age-range.age-range--active { background: #cfe0f1; } .age-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #5B9BD5; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .age-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #5B9BD5; border: 2px solid #fff; cursor: pointer; } .age-range-val { font-size: 12px; font-weight: 700; color: #5B9BD5; min-width: 52px; } /* ── LOADING ── */ #loadingOverlay { position: fixed; inset: 0; z-index: 5000; background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; } .loading-box { text-align: center; } .loading-spinner { width: 40px; height: 40px; border: 4px solid var(--border); border-top-color: #FF6B35; border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 12px; } @keyframes spin { to { transform: rotate(360deg); } } #toggleListShow { position: fixed; bottom: 78px; left: 16px; z-index: 900; background: var(--surface); border: none; border-radius: 10px; padding: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); font-size: 18px; cursor: pointer; display: none; } /* ── INFO BUTTON ── */ #info-btn { /* Centrato sulla RIGA contenuto (avatar 48px), non sul 50% dell'header padding incluso: col safe-area top il 50% finiva più in alto dell'avatar. 24px = metà avatar. */ position: absolute; right: 14px; top: calc(var(--hdr-pad-top, 12px) + 24px); transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 22px; color: var(--text-faint); padding: 6px; line-height: 1; transition: color .2s; } #info-btn:active { color: #FF6B35; } #bell-btn { position: absolute; right: 52px; top: calc(var(--hdr-pad-top, 12px) + 24px); transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 20px; color: var(--text-faint); padding: 6px; line-height: 1; transition: color .2s; } #bell-btn:active { color: #FF6B35; } #bell-btn .bell-wrap { display: inline-block; } #passport-hdr-btn { position: absolute; right: 90px; top: calc(var(--hdr-pad-top, 12px) + 24px); transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 20px; color: var(--text-faint); padding: 6px; line-height: 1; transition: color .2s; } #passport-hdr-btn:active { color: #FF6B35; } /* ── HEADER ACTIONS riutilizzabili (Salvati / Risultati / Mappa) ── */ .hdr-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .hdr-icon-btn { position: relative; background: none; border: none; cursor: pointer; font-size: 20px; color: var(--text-faint); padding: 6px; line-height: 1; transition: color .2s; } .hdr-icon-btn:active { color: #FF6B35; } .hdr-badge { display: none; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: var(--brand-fill); border-radius: 50%; border: 1.5px solid #fff; } .hdr-admin-badge { display: none; position: absolute; top: 1px; right: 0; background: #e53935; color: #fff; font-size: 9px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; line-height: 16px; text-align: center; pointer-events: none; } /* ── INFO PANEL (bottom sheet) ── */ #info-backdrop { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.45); display: none; opacity: 0; transition: opacity .25s; } #info-backdrop.open { opacity: 1; } #info-panel { position: fixed; bottom: 0; left: 0; right: 0; z-index: 4100; background: var(--surface); border-radius: 22px 22px 0 0; max-height: 85vh; overflow-y: auto; transform: translateY(100%); transition: transform .32s cubic-bezier(0.32,0.72,0,1); padding: 0 0 40px; } #info-panel.open { transform: translateY(0); } .info-handle { width: 38px; height: 4px; background: var(--surface-3); border-radius: 2px; margin: 12px auto 0; } .info-header { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--surface-3); } .info-header-avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface); } .info-header-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .info-header-text strong { font-size: 17px; display: block; color: var(--text); } .info-header-text span { font-size: 12px; color: var(--text-faint); } /* ── ACCORDION ── */ .info-section { border-bottom: 1px solid var(--surface); } .info-section-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; cursor: pointer; user-select: none; } .info-section-header h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-faint); font-weight: 700; margin: 0; } .info-section-chevron { font-size: 16px; color: #ddd; line-height: 1; transition: transform .28s cubic-bezier(0.32,0.72,0,1); display: inline-block; } .info-section.open .info-section-chevron { transform: rotate(180deg); } /* Il Pannello Admin si distingue col colore brand (niente emoji nei titoli sezione) */ #sec-admin-panel .info-section-header { background: var(--bg); } #sec-admin-panel .info-section-header h4 { color: #FF6B35; } #sec-admin-panel .info-section-chevron { color: #FF6B35; } .info-section-body { max-height: 0; overflow: hidden; transition: max-height .32s cubic-bezier(0.32,0.72,0,1); padding: 0 20px; } /* max-height alta: è solo il tetto dell'animazione della fisarmonica, NON un layout. Con 900px il Pannello Admin (cresciuto con l'Area Aziende B2B) veniva TAGLIATO da overflow:hidden e i blocchi in fondo sparivano senza errori (bug del 05/07). */ .info-section.open .info-section-body { max-height: 6000px; padding: 0 20px 8px; } /* Chip-etichette a schede: usate dal Pannello Admin e dalla sezione Social */ .admin-tab-chip { flex-shrink: 0; padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .admin-tab-chip.active { background: var(--brand-fill); border-color: #FF6B35; color: #fff; } .info-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--surface); cursor: pointer; text-decoration: none; color: inherit; } .info-row:last-child { border-bottom: none; } .info-row-icon { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; } .info-row-body { flex: 1; } .info-row-body strong { font-size: 14px; display: block; color: var(--text); } .info-row-body span { font-size: 12px; color: var(--text-muted); } .info-row-arrow { font-size: 18px; color: #ddd; } .info-install-box { background: var(--surface); border-radius: 14px; padding: 14px 16px; margin-top: 4px; border: 1.5px solid var(--tint-warm-bd); } .info-install-box h5 { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; } .info-install-step { font-size: 13px; color: var(--text-soft); line-height: 1.6; margin-bottom: 6px; display: flex; gap: 8px; } .info-install-step span { flex-shrink: 0; font-weight: 700; color: #FF6B35; } .info-install-sep { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-faint); letter-spacing: 1px; margin: 10px 0; } #pwa-install-btn { width: 100%; background: var(--brand-fill); color: #fff; border: none; border-radius: 12px; padding: 13px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 12px; box-shadow: 0 4px 12px rgba(255,107,53,0.3); display: none; } .info-version { text-align: center; font-size: 11px; color: var(--text-faint); padding: 18px 0 0; } /* ── RATING POPUP ── */ #rating-backdrop { position: fixed; inset: 0; z-index: 5500; background: rgba(0,0,0,0.5); display: none; align-items: flex-end; justify-content: center; transition: opacity .25s; } #rating-backdrop.open { display: flex; } #rating-box { background: var(--surface); border-radius: 22px 22px 0 0; padding: 28px 24px 40px; max-width: 480px; width: 100%; text-align: center; animation: slideUpRating .32s cubic-bezier(0.32,0.72,0,1) both; } @keyframes slideUpRating { from { transform: translateY(100%); } to { transform: translateY(0); } } #rating-box h3 { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 6px; } #rating-box p { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; } .rating-stars { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; } .rating-star { font-size: 38px; cursor: pointer; line-height: 1; transition: transform .15s; filter: grayscale(1) opacity(.4); } .rating-star.active { filter: none; transform: scale(1.15); } #rating-submit { width: 100%; background: var(--brand-fill); color: #fff; border: none; border-radius: 14px; padding: 15px; font-size: 16px; font-weight: 700; cursor: pointer; margin-bottom: 10px; box-shadow: 0 4px 14px rgba(255,107,53,0.3); opacity: .5; pointer-events: none; transition: opacity .2s; } #rating-submit.ready { opacity: 1; pointer-events: auto; } #rating-later { background: none; border: none; color: var(--text-faint); font-size: 13px; cursor: pointer; padding: 6px; } /* ── LOGIN MODAL ── */ #login-backdrop { position: fixed; inset: 0; z-index: 7000; background: rgba(0,0,0,0.62); display: none; align-items: flex-end; justify-content: center; transition: opacity .3s; } #login-box { background: var(--surface); border-radius: 22px 22px 0 0; padding: 28px 22px 44px; max-width: 480px; width: 100%; box-shadow: 0 -4px 30px rgba(0,0,0,0.18); } #login-box h3 { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 8px; } #login-box p { font-size: 14px; color: var(--text-muted); line-height: 1.55; margin-bottom: 18px; } #login-email { width: 100%; border: 2px solid var(--border); border-radius: 14px; padding: 14px 16px; font-size: 16px; font-family: inherit; outline: none; margin-bottom: 12px; background: var(--bg); box-sizing: border-box; } #login-email:focus { border-color: #FF6B35; background: var(--surface); } #login-submit { width: 100%; background: var(--brand-fill); color: #fff; border: none; border-radius: 14px; padding: 15px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(255,107,53,0.3); margin-bottom: 10px; transition: opacity .2s; } #login-submit:disabled { opacity: .6; cursor: default; } #login-status { font-size: 14px; color: var(--text-soft); text-align: center; min-height: 20px; margin-bottom: 8px; } #login-code { width: 100%; border: 2px solid var(--border); border-radius: 14px; padding: 14px 16px; font-size: 20px; font-family: inherit; letter-spacing: 6px; text-align: center; outline: none; margin-bottom: 12px; background: var(--bg); box-sizing: border-box; } #login-code:focus { border-color: #FF6B35; background: var(--surface); } #login-code-submit { width: 100%; background: var(--brand-fill); color: #fff; border: none; border-radius: 14px; padding: 15px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(255,107,53,0.3); margin-bottom: 10px; transition: opacity .2s; } #login-code-submit:disabled { opacity: .6; cursor: default; } #login-cancel { display: block; width: 100%; text-align: center; background: none; border: none; color: var(--text-faint); font-size: 14px; cursor: pointer; padding: 6px; font-family: inherit; } .login-sep { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; color: var(--text-faint); font-size: 13px; } .login-sep::before, .login-sep::after { content: ''; flex: 1; height: 1px; background: var(--surface-3); } #login-google { width: 100%; background: var(--surface); color: var(--text); border: 2px solid var(--border); border-radius: 14px; padding: 13px; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; margin-bottom: 12px; transition: border-color .2s; } #login-google:hover { border-color: #FF6B35; } /* ── POPUP WHATSAPP BTN ── */ .popup-action-row { display: flex; gap: 10px; margin-top: 14px; } .popup-maps-btn { flex: 1; margin-top: 0 !important; } .popup-wa-btn { flex-shrink: 0; background: #25D366; color: #fff; border: none; border-radius: 14px; padding: 15px 18px; font-size: 20px; cursor: pointer; box-shadow: 0 4px 14px rgba(37,211,102,0.32); display: flex; align-items: center; justify-content: center; } .popup-wa-btn:active { transform: scale(0.96); } /* ── STELLINE POPUP ── */ .popup-rating-section { border-top: 1px solid var(--surface-3); padding: 14px 0 10px; margin-top: 8px; } .popup-rating-avg-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .popup-avg-num { font-size: 22px; font-weight: 800; color: var(--text); } .popup-avg-count { font-size: 12px; color: var(--text-faint); } .popup-user-stars-label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .popup-user-stars-row { display: flex; gap: 6px; } .popup-user-star { font-size: 32px; cursor: pointer; color: #e0e0e0; line-height: 1; transition: color .12s, transform .12s; user-select: none; } .popup-user-star.active { color: #FF6B35; } .popup-user-star:active { transform: scale(1.2); } /* ── PREFERITI — heart button nel popup ── */ #fav-popup-btn { position: absolute; top: 14px; right: 54px; z-index: 10; background: rgba(255,255,255,0.93); border: none; border-radius: 50%; width: 34px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.18); font-size: 18px; line-height: 1; transition: transform .15s; } #fav-popup-btn:active { transform: scale(1.2); } /* Dark mode: i pulsanti sopra la foto (cuore 🤍 e ✕) sono bianco-su-bianco e si distinguono male. Sfondo scuro traslucido + bordino chiaro così risaltano. */ :root[data-theme="dark"] #close-mobile-popup, :root[data-theme="dark"] #fav-popup-btn { background: rgba(20,15,12,0.62); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 2px 8px rgba(0,0,0,0.5); } :root[data-theme="dark"] #close-mobile-popup { color: #f0e6da; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #close-mobile-popup, :root:not([data-theme="light"]) #fav-popup-btn { background: rgba(20,15,12,0.62); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 2px 8px rgba(0,0,0,0.5); } :root:not([data-theme="light"]) #close-mobile-popup { color: #f0e6da; } } /* ── TOGGLE SWITCH ── */ .info-toggle-wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; } .toggle-switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--surface-3); border-radius: 26px; cursor: pointer; transition: background .2s; } .toggle-slider:before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); left: 3px; top: 3px; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); } .toggle-switch input:checked + .toggle-slider { background: var(--brand-fill); } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); } /* ── INFO PANEL TABS ── */ .info-tabs { display: flex; border-bottom: 2px solid var(--surface-3); margin: 0; } .info-tab-btn { flex: 1; padding: 8px 4px 6px; text-align: center; color: var(--text-faint); cursor: pointer; border: none; background: none; border-bottom: 3px solid transparent; margin-bottom: -2px; font-family: inherit; transition: color .15s, border-color .15s; display: flex; flex-direction: column; align-items: center; gap: 3px; } .info-tab-btn.active { color: #FF6B35; border-bottom-color: #FF6B35; } .info-tab-icon { font-size: 20px; line-height: 1; } .info-tab-label { font-size: 10px; font-weight: 700; line-height: 1.2; } .info-tab-badge { background: var(--brand-fill); color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; } /* ── PREFERITI PANEL ── */ #favorites-backdrop { position: fixed; inset: 0; z-index: 4400; background: rgba(0,0,0,0.45); display: none; opacity: 0; transition: opacity .25s; } #favorites-panel { position: fixed; bottom: 0; left: 0; right: 0; z-index: 4500; background: var(--surface); border-radius: 22px 22px 0 0; max-height: 85vh; overflow-y: auto; transform: translateY(100%); transition: transform .32s cubic-bezier(0.32,0.72,0,1); padding: 0 0 48px; } #favorites-panel.open { transform: translateY(0); } #favorites-backdrop.open { opacity: 1; } .fav-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px; border-bottom: 1px solid var(--surface); } .fav-panel-header h3 { font-size: 17px; font-weight: 800; color: var(--text); margin: 0; } .fav-panel-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-faint); padding: 4px; } #favorites-list { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; } .fav-empty { text-align: center; padding: 40px 20px; color: var(--text-faint); font-size: 14px; line-height: 1.6; } /* ── LOCATION PILL ── */ #location-pill { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; flex-shrink: 0; cursor: pointer; background: var(--surface); border-bottom: 1px solid var(--border); transition: background .2s; } #location-pill:active { background: var(--warm-soft); } #location-pill-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); flex-shrink: 0; transition: background .3s; } #location-pill.detected #location-pill-dot { background: #4CAF50; } #location-pill.detecting #location-pill-dot { background: var(--brand-fill); animation: pulse-dot .9s infinite; } #location-pill-text { font-size: 13.5px; color: var(--text-muted); font-weight: 700; } #location-pill.detected #location-pill-text { color: var(--text); } /* Fuori zona DAOP: ti ho TROVATO (pallino ambra, non verde) ma i contenuti restano su AL/AT. */ #location-pill.outzone #location-pill-dot { background: #F5A623; } #location-pill.outzone #location-pill-text { color: var(--text-soft); } /* Entro 150km ma FUORI dalle province AL/AT (es. Milano): sei trovato e i contenuti restano ancorati a te (raggio gita), ma il pallino ambra segnala che DAOP cura gli eventi per AL/AT. */ #location-pill.outprov #location-pill-dot { background: #F5A623; } #location-pill.outprov #location-pill-text { color: var(--text); } @keyframes pulse-dot { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.6); opacity:.5; } } /* ── CALENDAR CHIPS ── */ .cal-chips-wrap { align-self: stretch; width: 94%; max-width: 94%; display: flex; flex-direction: column; gap: 6px; padding-left: 4px; } .cal-chip { display: flex; align-items: center; gap: 8px; /* --card-bd, non --border: in dark mode il bordo faceva 1.28:1 sullo sfondo della scheda e la scheda stessa 1.12:1 sulla pagina → il riquadro non si vedeva (segnalato da Patrick, 25/07). Sul chiaro a staccare la scheda ci pensa l'ombra, ma un'ombra nera su fondo nero non stacca niente: per questo in scuro il lavoro lo deve fare il bordo (3.2:1). */ background: var(--surface); border: 1.5px solid var(--card-bd); border-radius: 14px; padding: 10px 12px; box-shadow: 0 2px 6px var(--shadow); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; } .cal-chip:active { background: var(--surface); border-color: #FF6B35; box-shadow: 0 1px 3px rgba(255,107,53,0.2); } .cal-chip.premium { border-color: #5B9BD5; background: var(--tint-blue); } .cal-chip.premium .cal-chip-name::before { content: '🌟 '; } .cal-chip.consigliato { border-color: #2E9E5B; background: var(--tint-green); } .cal-chip.saved-intent { border-left: 4px solid #4CAF50; } .cal-chip-saved-mark { flex-shrink: 0; font-size: 14px; line-height: 1; margin-right: 2px; } .cal-chip-info { flex: 1; min-width: 0; } .cal-chip-name { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-chip-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .cal-chip-dist { font-size: 11px; color: #FF6B35; font-weight: 600; margin-top: 2px; } .cal-chip-meteo { font-size: 11px; color: #5b8db8; font-weight: 600; margin-top: 2px; } .chip-hidden { display: none !important; } .chip-show-all { background: var(--surface); border: 1.5px dashed #FF6B35; border-radius: 14px; padding: 10px 12px; font-size: 13px; font-weight: 700; color: #FF6B35; cursor: pointer; font-family: inherit; text-align: center; box-shadow: 0 2px 6px rgba(255,107,53,0.08); transition: background .15s, transform .08s; } .chip-show-all:active { background: var(--tint-warm-bd); transform: scale(.98); } /* Bottone "vedi sulla mappa" degli eventi: stesso look del bottone luoghi (.show-map-btn) così l'affordance "vai alla mappa" è identica ovunque. Prima era inline e slavato. */ .cal-map-btn { display: block; width: 100%; margin: 12px 0 2px; background: linear-gradient(135deg, #6BA6CF, #8FBDDC); color: #fff; border: none; border-radius: 14px; padding: 14px 20px; font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; font-family: inherit; letter-spacing: .3px; box-shadow: 0 6px 16px rgba(91,155,213,0.28); transition: transform .08s; } .cal-map-btn:active { transform: scale(0.98); } /* Iconcina "copia" discreta IN FONDO a ogni risposta di Ginetto (intro + eventuali chip). Grigia, defilata. */ .bubble-copy-ic { align-self: flex-end; margin: 4px 2px 0 0; padding: 2px 3px; background: none; border: none; cursor: pointer; color: #c2b8ae; line-height: 0; opacity: .8; transition: color .15s, transform .08s; } .bubble-copy-ic:hover { color: #FF6B35; } .bubble-copy-ic:active { transform: scale(.88); color: #FF6B35; } /* ── EVENT DETAIL OVERLAY ── */ #event-detail-overlay { position: fixed; inset: 0; z-index: 8000; background: rgba(0,0,0,0.45); display: none; align-items: flex-end; } #event-detail-overlay.open { display: flex; } #event-detail-sheet { background: var(--surface); border-radius: 22px 22px 0 0; width: 100%; max-height: 75vh; overflow-y: auto; padding: 20px 20px 36px; box-sizing: border-box; animation: sheetUp .28s cubic-bezier(0.34,1.1,0.64,1) both; } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } #event-detail-sheet h2 { font-size: 17px; font-weight: 800; color: var(--text); margin: 0 0 14px; line-height: 1.3; } .ev-detail-row { display: flex; gap: 8px; margin-bottom: 8px; font-size: 13.5px; color: var(--text-soft); align-items: flex-start; } .ev-detail-row span:first-child { flex-shrink: 0; } .ev-detail-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--surface-3); } /* Locandina evento: sono tutte STORIE IG (9:16, verticali). Le mostro in formato storia — strette e alte — intere e centrate, con altezza capata così restano leggibili senza spingere tutti i dettagli sotto la piega. */ .ev-detail-locandina { margin: 0 0 12px; text-align: center; } .ev-detail-locandina img { max-width: 130px; max-height: 200px; width: auto; height: auto; border-radius: 10px; background: var(--surface-3, rgba(0,0,0,.04)); display: inline-block; cursor: zoom-in; } .ev-loc-hint { font-size: 11px; color: var(--text-muted); margin-top: 5px; } /* Lightbox locandina a tutto schermo */ #locandina-lightbox { display: none; position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.9); align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; } #locandina-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; } #locandina-close { position: absolute; top: calc(14px + env(safe-area-inset-top,0px)); right: 16px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 20px; cursor: pointer; font-family: inherit; line-height: 1; } #event-detail-agenda-btn { margin-top: 10px; width: 100%; padding: 13px; background: var(--brand-fill); color: #fff; border: none; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; } #event-detail-interest-btn { margin-top: 16px; width: 100%; padding: 13px; background: var(--surface); color: var(--fg-green-dark); border: 1.5px solid #4CAF50; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s, color .15s, transform .08s; } #event-detail-interest-btn:active { transform: scale(.98); } #event-detail-interest-btn.saved { background: #4CAF50; color: #fff; border-color: #4CAF50; } #event-detail-close { position: absolute; top: 14px; right: 16px; background: var(--surface); border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); } #event-detail-sheet { position: relative; } /* ── QUICK START CHIPS ── */ #quick-chips { display: flex; flex-direction: column; gap: 8px; align-self: flex-start; width: 100%; max-width: 88%; animation: splashPop .4s .1s cubic-bezier(0.34,1.1,0.64,1) both; } .quick-chip { background: var(--surface); border: 1.5px solid var(--border); border-radius: 22px; padding: 11px 18px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; font-family: inherit; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: border-color .15s, background .15s, transform .1s; } .quick-chip:active { background: var(--surface); border-color: #FF6B35; transform: scale(.98); } /* ── PASSAPORTO ── */ #passport-sheet { position:relative; } @media (min-width: 640px) { /* Salvati view — limitata alla colonna chat */ #salvati-view { left: calc(50vw - 240px) !important; right: auto !important; width: 480px !important; border-left: 1px solid var(--border); border-right: 1px solid var(--border); } /* Passport — modal centrato */ #passport-overlay { align-items: center !important; justify-content: center; } #passport-sheet { width: 480px !important; max-width: 94vw !important; max-height: 82vh !important; border-radius: 22px !important; animation: none !important; } /* Event detail — modal centrato */ #event-detail-overlay { align-items: center !important; justify-content: center; } #event-detail-sheet { width: 480px !important; max-width: 94vw !important; max-height: 82vh !important; border-radius: 22px !important; animation: none !important; } /* Privacy panel — modal centrato */ #privacy-panel { top: 50% !important; bottom: auto !important; left: 50% !important; right: auto !important; width: 560px !important; max-width: 94vw !important; max-height: 82vh !important; border-radius: 22px !important; transform: translate(-50%, -50%) scale(.96) !important; transition: transform .25s cubic-bezier(0.34,1.1,0.64,1), opacity .2s !important; opacity: 0; pointer-events: none; } #privacy-panel.open { transform: translate(-50%, -50%) scale(1) !important; opacity: 1 !important; pointer-events: auto; } } /* ── PASSAPORTO — HERO (progress-ring stile Apple Watch) ── */ .passport-hero { position:relative; overflow:hidden; background: radial-gradient(130% 120% at 50% -10%, var(--brand-fill-hi) 0%, var(--brand-fill) 52%, var(--brand-fill-lo) 100%); border-radius:26px; padding:28px 20px 24px; text-align:center; margin-bottom:20px; box-shadow:0 16px 34px -12px rgba(238,80,25,.6); } /* alone luminoso dietro al badge */ .passport-hero::before { content:''; position:absolute; top:-46%; left:50%; transform:translateX(-50%); width:340px; height:340px; pointer-events:none; background: radial-gradient(circle, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 60%); } .passport-ring-wrap { position:relative; width:188px; height:188px; margin:0 auto 4px; } .passport-ring-wrap svg { transform:rotate(-90deg); display:block; } .passport-ring-bg { fill:none; stroke:rgba(255,255,255,.28); stroke-width:9; } .passport-ring-fill { fill:none; stroke:#fff; stroke-width:9; stroke-linecap:round; filter:drop-shadow(0 0 5px rgba(255,255,255,.7)); transition:stroke-dashoffset 1.1s cubic-bezier(.34,1.1,.64,1); } .passport-badge-big { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:92px; line-height:1; animation:badgePop .5s cubic-bezier(.34,1.56,.64,1) both; } .passport-badge-big img { width:162px; height:162px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,.18)); } @keyframes badgePop { 0%{transform:scale(.5);opacity:0} 100%{transform:scale(1);opacity:1} } .passport-level-name { font-size:23px; font-weight:900; color:#fff; margin:10px 0 2px; letter-spacing:-.4px; text-shadow:0 1px 3px rgba(0,0,0,.14); } .passport-level-sub { font-size:13px; color:rgba(255,255,255,.92); font-weight:600; } /* icona condividi piccola, angolo alto-destra dell'hero */ .passport-share-icon { position:absolute; top:14px; right:14px; z-index:2; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); border:1.5px solid rgba(255,255,255,.5); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background .15s, transform .1s; } .passport-share-icon:active { background:rgba(255,255,255,.4); transform:scale(.92); } .passport-progress-caption { margin-top:14px; display:inline-flex; align-items:center; gap:6px; justify-content:center; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); border-radius:20px; padding:6px 15px; font-size:12px; font-weight:800; color:#fff; } .passport-progress-caption img { width:20px; height:20px; object-fit:contain; } /* ── Intestazioni sezione ── */ .passport-sec-head { width:100%; background:none; border:none; display:flex; align-items:center; justify-content:space-between; padding:12px 0 8px; cursor:pointer; font-family:inherit; } .passport-sec-head h4 { font-size:13px; font-weight:800; color:#a06844; text-transform:uppercase; letter-spacing:.6px; margin:0; } .passport-sec-arrow { color:#d3a684; font-size:18px; transition:transform .2s; } /* ── Timbri: album da collezione ── */ .passport-stamps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:4px 0 6px; } .passport-stamp { position:relative; background:var(--surface); border:2px dashed var(--tint-warm-bd); border-radius:16px; padding:12px 6px 10px; text-align:center; box-shadow:0 4px 12px -7px rgba(238,80,25,.5); animation:stampIn .35s ease both; } @keyframes stampIn { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} } .passport-stamp img { width:46px; height:46px; object-fit:contain; margin:0 auto 6px; display:block; } .passport-stamp-name { font-size:11px; font-weight:800; color:var(--text); line-height:1.25; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .passport-stamp-date { font-size:9.5px; color:#c9ab97; margin-top:3px; font-weight:600; } .passport-stamp--empty { border:2px dashed var(--surface-3); background:var(--bg); box-shadow:none; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:98px; animation:none; } .passport-stamp--empty .lock { color:#d8c4b2; opacity:.85; } .passport-stamp--empty small { font-size:9px; color:#c9ab97; font-weight:700; margin-top:4px; } .passport-empty { text-align:center; padding:24px 0; color:var(--text-faint); font-size:14px; } /* In dark mode Ginetto galleggiava sul nero (occhi "inquietanti"): alone morbido dietro */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .passport-empty img { border-radius:50%; background:radial-gradient(circle at 50% 45%, rgba(255,247,238,.16) 0%, rgba(255,247,238,.06) 55%, transparent 72%); } } :root[data-theme="dark"] .passport-empty img { border-radius:50%; background:radial-gradient(circle at 50% 45%, rgba(255,247,238,.16) 0%, rgba(255,247,238,.06) 55%, transparent 72%); } /* ── Roadmap livelli (percorso verticale) ── */ .passport-next-levels { margin-top:8px; } .passport-levels-path { position:relative; padding:2px 0; } .passport-lv { position:relative; display:flex; align-items:center; gap:14px; padding:9px 0; } .passport-lv::before { content:''; position:absolute; left:25px; top:-9px; bottom:-9px; width:3px; background:var(--surface-3); z-index:0; } .passport-lv:first-child::before { top:50%; } .passport-lv:last-child::before { bottom:50%; } .passport-lv--done::before { background:var(--warm-soft); } .passport-lv-badge { position:relative; z-index:1; width:52px; height:52px; flex-shrink:0; border-radius:50%; background:var(--surface); border:2.5px solid var(--surface-3); display:flex; align-items:center; justify-content:center; transition:box-shadow .2s; } .passport-lv-badge img { width:38px; height:38px; object-fit:contain; } .passport-lv--done .passport-lv-badge { border-color:#FF6B35; } .passport-lv--current .passport-lv-badge { border-color:#FF6B35; box-shadow:0 0 0 6px rgba(255,107,53,.18); animation:lvPulse 2.2s ease-in-out infinite; } @keyframes lvPulse { 0%,100%{box-shadow:0 0 0 6px rgba(255,107,53,.18)} 50%{box-shadow:0 0 0 10px rgba(255,107,53,.06)} } .passport-lv--locked { opacity:.5; } .passport-lv--locked .passport-lv-badge img { filter:grayscale(.7); } .passport-lv-info { line-height:1.3; } .passport-lv-info strong { font-size:14.5px; color:var(--text); font-weight:800; } .passport-lv-info span { font-size:11.5px; color:#a08a78; } .passport-lv-chip { margin-left:auto; font-size:10px; font-weight:800; padding:3px 9px; border-radius:20px; background:var(--warm-soft); color:#FF6B35; letter-spacing:.3px; } .passport-lv--done .passport-lv-chip { background:#E6F6E9; color:#3E9B4F; } /* ── CIRCUITI PASSAPORTO ── */ .passport-circuit-card { background:var(--surface);border:1.5px solid var(--surface-3);border-radius:16px; padding:13px 15px;margin-bottom:10px;cursor:pointer; box-shadow:0 4px 12px -8px rgba(238,80,25,.35); transition:border-color .15s, transform .1s; } .passport-circuit-card:active { border-color:#FF6B35; transform:scale(.99); } .passport-circuit-card.circuit-done { border-color:#4CAF50;background:var(--tint-green); } .passport-circuit-bar { height:7px;background:var(--surface-3);border-radius:4px;overflow:hidden;margin:9px 0 0; } .passport-circuit-fill { height:100%;border-radius:4px; background:linear-gradient(90deg,var(--brand-fill-hi),var(--brand-fill));transition:width .8s cubic-bezier(.34,1.1,.64,1); } .passport-circuit-fill.done { background:linear-gradient(90deg,#66BB6A,#4CAF50); } /* ── AZIONI: riquadri in riga (Scansiona / Codice / Esplora) ── */ .passport-tiles { display:flex; gap:9px; } .passport-tile { flex:1; min-width:0; background:var(--surface); border:1.5px solid #ece0d4; border-radius:16px; padding:13px 6px 11px; display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; font-family:inherit; box-shadow:0 3px 10px -7px rgba(0,0,0,.25); transition:transform .1s, border-color .15s; } .passport-tile:active { transform:scale(.96); } .passport-tile .ic { width:42px; height:42px; border-radius:13px; background:var(--surface); color:#FF6B35; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .passport-tile .t { font-size:11.5px; font-weight:800; color:#4a4038; } .passport-tile.primary { background:var(--brand-fill); border-color:#FF6B35; } .passport-tile.primary .ic { background:rgba(255,255,255,.22); color:#fff; } .passport-tile.primary .t { color:#fff; } .passport-tile.active { border-color:#FF6B35; box-shadow:0 0 0 3px rgba(255,107,53,.12); } /* ── GRADI: percorso orizzontale sempre visibile ── */ .passport-stepper { display:flex; align-items:flex-start; padding:8px 2px 2px; } .passport-step { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; position:relative; } .passport-step::before { content:''; position:absolute; top:23px; left:-50%; width:100%; height:3px; background:var(--surface-3); z-index:0; } .passport-step:first-child::before { display:none; } .passport-step.done::before { background:var(--warm-soft); } .passport-step-dot { width:46px; height:46px; border-radius:50%; background:var(--surface); border:2.5px solid var(--surface-3); display:flex; align-items:center; justify-content:center; position:relative; z-index:1; font-size:22px; } .passport-step-dot img { width:34px; height:34px; object-fit:contain; } .passport-step.done .passport-step-dot { border-color:#FF6B35; } .passport-step.current .passport-step-dot { border-color:#FF6B35; box-shadow:0 0 0 5px rgba(255,107,53,.18); } .passport-step.locked .passport-step-dot img { filter:grayscale(.7); opacity:.55; } .passport-step-nm { font-size:9.5px; font-weight:700; color:#8a7d72; text-align:center; line-height:1.15; } .passport-step.current .passport-step-nm { color:#FF6B35; } .passport-step { cursor:pointer; } /* Dark: le label dei tile azione (Scansiona/Codice/Esplora) erano #4a4038 (marrone scuro) → sul tile scuro quasi invisibili. In scuro le portiamo a testo crema. */ :root[data-theme="dark"] .passport-tile .t { color:var(--text); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .passport-tile .t { color:var(--text); } } /* Mappa: anche in dark restano i colori del tema CHIARO (nessun filtro) — scelta di Patrick 07/07: la mappa la teniamo coi colori chiari, solo il pannello è nero. Di conseguenza i MARKER restano chiari anche in dark (niente sfondo nero): la mappa è chiara, i pin non devono diventare neri. */ :root[data-theme="dark"] .custom-div-icon, :root[data-theme="dark"] .event-div-icon .ev-glyph { background:#fff; } :root[data-theme="dark"] .custom-div-icon.premium, :root[data-theme="dark"] .event-div-icon.premium .ev-glyph { background:#FFF8F0; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .custom-div-icon, :root:not([data-theme="light"]) .event-div-icon .ev-glyph { background:#fff; } :root:not([data-theme="light"]) .custom-div-icon.premium, :root:not([data-theme="light"]) .event-div-icon.premium .ev-glyph { background:#FFF8F0; } } /* ── PASSPORT CODE INPUT ── */ .passport-code-wrap { margin: 12px 0 4px; display: flex; gap: 8px; } .passport-code-wrap input { flex:1; padding:12px 14px; border:2px solid var(--border); border-radius:12px; font-size:16px; font-weight:700; letter-spacing:2px; font-family:inherit; color:var(--text); background:var(--surface); outline:none; text-transform:uppercase; transition: border-color .2s; } .passport-code-wrap input:focus { border-color:#FF6B35; } .passport-code-wrap input.shake { animation: shakeInput .35s ease; border-color:#e53935; } @keyframes shakeInput { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 60%{transform:translateX(6px)} 80%{transform:translateX(-4px)} } #passport-code-redeem { padding:12px 18px; background:var(--brand-fill); color:#fff; border:none; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; transition:opacity .15s; } #passport-code-redeem:disabled { opacity:.6; cursor:default; } #passport-code-status { font-size:12px; color:var(--text-muted); margin-top:6px; min-height:16px; } /* #passport-code-toggle e #passport-explore-btn ora sono .passport-tile (vedi sopra) */ #passport-qrgen-btn { width:100%; padding:12px; background:#2f2a26; color:#fff; border:none; border-radius:14px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; margin-bottom:10px; } /* ── STAMP CELEBRATION ── */ #stamp-celebration { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; animation:fadeIn .3s ease; } @keyframes fadeIn { from{opacity:0} to{opacity:1} } .stamp-cel-box { position:relative; overflow:hidden; background:radial-gradient(120% 90% at 50% 0%, var(--tint-warm) 0%, #fff 55%); border-radius:26px; padding:34px 28px 30px; text-align:center; max-width:310px; width:90%; box-shadow:0 24px 60px -18px rgba(238,80,25,.5); animation:splashPop .4s cubic-bezier(0.34,1.56,0.64,1) both; } .stamp-cel-box::before { content:''; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg,var(--brand-fill-hi),var(--brand-fill),var(--brand-fill-lo)); } .stamp-cel-emoji { font-size:64px; line-height:1; margin-bottom:12px; } .stamp-cel-title { font-size:22px; font-weight:800; color:var(--text); margin-bottom:6px; } .stamp-cel-sub { font-size:14px; color:var(--text-muted); line-height:1.5; margin-bottom:20px; } .stamp-cel-btn { background:var(--brand-fill); color:#fff; border:none; border-radius:14px; padding:13px 28px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; } /* ── DANGER ZONE ── */ .danger-btn { width: 100%; background: none; border: 1.5px solid var(--tint-red-bd); color: #e53935; border-radius: 12px; padding: 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: 6px; transition: background .2s; } .danger-btn:active { background: var(--tint-red); }