@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); .poi-action-icons.svelte-10larau { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; width: 100%; box-sizing: border-box; } .action-row.svelte-10larau { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 4px 12px; background-color: transparent; color: var(--color-text); cursor: pointer; transition: background-color 0.2s ease-in-out; border: 0; margin: 0; text-align: left; width: 100%; } .action-row.svelte-10larau:hover { background-color: var(--color-background-mute); } .icon-wrapper.svelte-10larau { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; } .action-title.svelte-10larau { font-size: 14px; color: var(--color-indigo-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &:hover { text-decoration: underline; } } .action-row.svelte-10larau .logo:where(.svelte-10larau) { width: 32px; height: 32px; background-size: contain; background-repeat: no-repeat; background-position: center; } .action-row.youtube.svelte-10larau .logo:where(.svelte-10larau) { background-image: url('../../../map-graphics/youtube.png'); background-size: 28px; } .action-row.navily.svelte-10larau .logo:where(.svelte-10larau) { background-image: url('../../../map-graphics/navily.png'); background-size: 160px; background-position: -14px -6px; } .action-row.google-maps.svelte-10larau .logo:where(.svelte-10larau) { background-image: url('../../../map-graphics/maps.png'); background-size: 58px; } .action-row.external.svelte-10larau .logo:where(.svelte-10larau) { background-image: url('../../../map-graphics/external.png'); background-size: 22px; } @media (max-width: 600px) { } /* Dark mode (class-based — html.dark) */ html.dark .action-row.svelte-10larau { color: #f3f4f6; } html.dark .action-row.svelte-10larau:hover { background-color: #374151; } html.dark .action-title.svelte-10larau { color: #93c5fd; } /* The external-link logo is a single-colour black PNG that vanishes on the dark panel; invert it to white. The Navily/YouTube/Google-Maps logos are full-colour bitmaps and stay untouched. */ html.dark .action-row.external.svelte-10larau .logo:where(.svelte-10larau) { filter: invert(1); } .button-container.svelte-6v9ve9 { display: flex; justify-content: center; width: 100%; margin: 8px 0; } .google-place-button.svelte-6v9ve9 { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px 16px; background-color: #e8f0fe; color: #1a73e8; border: none; border-radius: 20px; cursor: pointer; font-family: 'Google Sans', Roboto, Arial, sans-serif; font-size: 14px; font-weight: 400; transition: background-color 0.2s ease-in-out; } .google-place-button.svelte-6v9ve9:hover { background-color: #d2e3fc; } .google-place-button.svelte-6v9ve9:active { background-color: #c4d7f5; } .google-maps-logo.svelte-6v9ve9 { width: 20px; height: 20px; background-image: url('../../../map-graphics/maps.png'); background-size: 52px; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } .button-text.svelte-6v9ve9 { white-space: nowrap; } .button-text.svelte-6v9ve9 strong:where(.svelte-6v9ve9) { font-weight: 600; } /* Class-based dark mode toggled by $lib/utils/theme.ts on . */ html.dark .google-place-button.svelte-6v9ve9 { background-color: #1e3a8a; color: #93c5fd; } html.dark .google-place-button.svelte-6v9ve9:hover { background-color: #1e40af; } html.dark .google-place-button.svelte-6v9ve9:active { background-color: #2563eb; } .contact-details.svelte-d5o650 { padding: 4px 10px; display: flex; flex-direction: column; row-gap: 12px; .contact-item:where(.svelte-d5o650) { display: flex; align-items: center; column-gap: 12px; font-size: 14px; color: var(--color-text); a:where(.svelte-d5o650), a:where(.svelte-d5o650):visited, a:where(.svelte-d5o650):link, a:where(.svelte-d5o650):hover { text-decoration: none; color: #0b57d0; } } } /* Dark mode (class-based — html.dark) */ html.dark .contact-details.svelte-d5o650 .contact-item:where(.svelte-d5o650) { color: #f3f4f6; } html.dark .contact-details.svelte-d5o650 .contact-item:where(.svelte-d5o650) a:where(.svelte-d5o650), html.dark .contact-details.svelte-d5o650 .contact-item:where(.svelte-d5o650) a:where(.svelte-d5o650):visited, html.dark .contact-details.svelte-d5o650 .contact-item:where(.svelte-d5o650) a:where(.svelte-d5o650):link, html.dark .contact-details.svelte-d5o650 .contact-item:where(.svelte-d5o650) a:where(.svelte-d5o650):hover { color: #93c5fd; } html.dark .contact-details.svelte-d5o650 .material-symbols-outlined:where(.svelte-d5o650) { color: #d1d5db; } .poi-facilities-container.svelte-1l73rip { width:100%; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--text-color); padding: 4px 0; box-sizing: border-box; max-height: 140px; overflow: hidden; .more:where(.svelte-1l73rip) { position:absolute; right: 12px; top: 50%; transform: translateY(-50%); display:flex; align-items: center; justify-content: flex-end; button:where(.svelte-1l73rip) { height: 36px; width: 36px; border:0; background-color: var(--color-gray-200); border-radius: 9999px; display:flex; align-items: center; justify-content: center; cursor: pointer; .material-symbols-outlined:where(.svelte-1l73rip) { font-size: 24px; color: var(--icon-color); } } } .poi-facilities:where(.svelte-1l73rip) { border:0; background:transparent; width: 100%; text-align: left; line-height: 0; padding-right: 40px; &::-webkit-scrollbar { display: none; } .facility-item:where(.svelte-1l73rip) { display: inline-flex; vertical-align: middle; align-items: center; gap: 4px; background-color: var(--card-background); padding: 4px 8px; border-radius: 4px; .material-symbols-outlined:where(.svelte-1l73rip) { padding:2px 0; } .facility-icon:where(.svelte-1l73rip) { width: 28px; height: 28px; min-width: 28px; min-height: 28px; fill: var(--icon-color); } } } &.is-open { max-height: none; align-items: flex-start; column-gap: 0; padding: 11px 3px; .more:where(.svelte-1l73rip) { top: 10px; transform: none; } .more-info:where(.svelte-1l73rip) { width:100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 8px; } .facilities-column:where(.svelte-1l73rip) { display: flex; flex-direction: column; flex: 1; min-width: 0; } .poi-facilities:where(.svelte-1l73rip) { display: flex; text-align: initial; line-height: normal; padding-right: 0; width: auto; flex-shrink: 0; flex-direction: column; align-items: flex-start; row-gap:8px; .facility-item:where(.svelte-1l73rip) { column-gap:12px; } } .weather-wind-section:where(.svelte-1l73rip) { display: flex; flex-direction: row; align-items: center; gap: 35px; /* 40px to account for wind rose arrow length */ flex-shrink: 0; /* When facilities list is too long, stack vertically */ &.stacked { flex-direction: column; gap: 8px; /* Smaller gap for vertical layout (no arrow overlap) */ } } .weather-column:where(.svelte-1l73rip) { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; /* Render above wind rose arrows */ } .weather-column-stacked:where(.svelte-1l73rip) { /* Match wind rose width so weather is centered above it */ width: 200px; /* Offset to align with wind rose compass center (SVG viewBox -65,-75,150,150 puts center at ~87px not 100px) */ transform: translateX(-13px); } .wind-rose-column:where(.svelte-1l73rip) { flex-shrink: 0; } } } .time-slider-container.svelte-1l73rip { width: 100%; } .weather-loading.svelte-1l73rip, .weather-error.svelte-1l73rip { display: flex; align-items: center; gap: 8px; padding: 16px; color: #666; font-size: 13px; } .weather-error.svelte-1l73rip { color: #999; } .spinning.svelte-1l73rip { animation: svelte-1l73rip-spin 1s linear infinite; } @keyframes svelte-1l73rip-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .weather-compact.svelte-1l73rip { display: inline-flex; vertical-align: middle; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; } .inline-windrose.svelte-1l73rip { display: inline-flex; vertical-align: middle; } .weather-compact-icon.svelte-1l73rip { width: 22px; height: 22px; } .temp-compact.svelte-1l73rip { color: #333; } .wind-compact.svelte-1l73rip { color: #1976d2; } /* Dark mode (class-based — html.dark) */ html.dark .facility-icon.svelte-1l73rip { /* Facility SVGs ship as black-on-transparent — invert to white-on- transparent for dark mode rather than rebuilding the assets. */ filter: invert(1); } html.dark .material-symbols-outlined.svelte-1l73rip, html.dark .temp-compact.svelte-1l73rip { color: #f3f4f6; } html.dark .wind-compact.svelte-1l73rip { color: #60a5fa; } html.dark .weather-compact.svelte-1l73rip .text-gray-400:where(.svelte-1l73rip) { color: #9ca3af; } /* Round chevron-up "collapse facilities" button uses --color-gray-200 which the theme system doesn't remap; force a dark surface so it doesn't read as a flashlight on the dark panel. */ html.dark .poi-facilities-container.svelte-1l73rip .more:where(.svelte-1l73rip) button:where(.svelte-1l73rip) { background-color: #374151; } html.dark .poi-facilities-container.svelte-1l73rip .more:where(.svelte-1l73rip) button:where(.svelte-1l73rip) .material-symbols-outlined:where(.svelte-1l73rip) { color: #f3f4f6; } .icon.share.svelte-1hj3f1v { border: 0; background: transparent; cursor: pointer; span:where(.svelte-1hj3f1v) { font-size: 28px; } } .report-form { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; font-family: "Open Sans", sans-serif; } .report-header { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; h3 { flex: 1; margin: 0; font-size: 18px; font-weight: 600; } .back-arrow, .close-x { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; cursor: pointer; background: #f0f0f0; border: none; border-radius: 50%; } } .report-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px; overflow-y: auto; } .section-label { margin-top: 8px; font-size: 14px; font-weight: 600; color: #374151; } /* Severity cards */ .severity-cards { display: flex; flex-direction: column; gap: 8px; } .severity-card { display: grid; grid-template-rows: auto auto; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; text-align: left; cursor: pointer; background: white; border: 2px solid #e5e7eb; border-radius: 10px; transition: border-color 0.15s, background-color 0.15s; &:hover { background: #f9fafb; } &.selected { background: color-mix(in srgb, var(--card-color) 6%, white); border-color: var(--card-color); } } .severity-emoji { grid-row: 1 / -1; align-self: center; font-size: 22px; } .severity-label { font-size: 14px; font-weight: 600; color: #1f2937; } .severity-sublabel { font-size: 12px; color: #6b7280; } /* Description textarea */ textarea#report-description { box-sizing: border-box; width: 100%; min-height: 80px; padding: 10px 12px; font-family: "Open Sans", sans-serif; font-size: 14px; resize: vertical; border: 1px solid #d1d5db; border-radius: 8px; &:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 2px rgb(59 130 246 / 20%); } } /* Photo upload */ .photo-buttons { display: flex; gap: 8px; } .upload-btn { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 8px; transition: background 0.15s; &:hover { background: #e5e7eb; } .material-symbols-outlined { font-size: 18px; } } .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } @media (width <= 400px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } } .photo-preview { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; img { width: 100%; height: 100%; object-fit: cover; } .remove-photo { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; color: white; cursor: pointer; background: rgb(239 68 68 / 90%); border: none; border-radius: 50%; .material-symbols-outlined { font-size: 16px; } } } /* Email field */ .email-subtitle { margin: 0; font-size: 12px; color: #6b7280; } .report-form input[type="text"], .report-form input[type="email"] { box-sizing: border-box; width: 100%; padding: 10px 12px; font-family: "Open Sans", sans-serif; font-size: 14px; border: 1px solid #d1d5db; border-radius: 8px; &:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 2px rgb(59 130 246 / 20%); } } /* Error message */ .error-message { margin: 0; font-size: 13px; color: #ef4444; } /* Submit button */ .submit-button { display: flex; gap: 8px; align-items: center; justify-content: center; width: 100%; padding: 12px 16px; margin-top: 8px; font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 600; color: white; cursor: pointer; background: #3b82f6; border: none; border-radius: 10px; transition: background 0.15s; &:hover:not(:disabled) { background: #2563eb; } &:disabled { cursor: not-allowed; background: #9ca3af; } .spinning { font-size: 18px; animation: spin 1s linear infinite; } } /* Success view */ .success-view { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; .success-icon { font-size: 48px; } h3 { margin: 0; font-size: 20px; font-weight: 600; color: #1f2937; } p { margin: 0; font-size: 14px; color: #6b7280; } .email-note { font-size: 13px; font-style: italic; color: #3b82f6; } } .back-button-full { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 240px; padding: 10px 20px; margin-top: 16px; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 600; color: #3b82f6; cursor: pointer; background: white; border: 2px solid #3b82f6; border-radius: 10px; transition: background 0.15s; &:hover { background: #eff6ff; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Dark mode (class-based — html.dark) lives here so :global() compiles. */ html.dark .report-form, html.dark .severity-label { color: #f3f4f6; } html.dark .report-header { border-bottom-color: rgb(255 255 255 / 10%); } html.dark .report-header .back-arrow, html.dark .report-header .close-x { color: #f3f4f6; background: #374151; } html.dark .section-label { color: #e5e7eb; } html.dark .severity-card { color: #f3f4f6; background: #374151; border-color: #4b5563; } html.dark .severity-card:hover { background: #4b5563; } html.dark .severity-card.selected { background: color-mix(in srgb, var(--card-color) 18%, #374151); border-color: var(--card-color); } html.dark .severity-sublabel, html.dark .email-subtitle, html.dark .success-view p { color: #9ca3af; } html.dark .report-form textarea#report-description, html.dark .report-form input[type="text"], html.dark .report-form input[type="email"] { color: #f3f4f6; background: #374151; border-color: #4b5563; } html.dark .report-form textarea#report-description::placeholder, html.dark .report-form input[type="text"]::placeholder, html.dark .report-form input[type="email"]::placeholder { color: #9ca3af; } html.dark .report-form textarea#report-description:focus, html.dark .report-form input[type="text"]:focus, html.dark .report-form input[type="email"]:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgb(59 130 246 / 35%); } html.dark .upload-btn { color: #f3f4f6; background: #374151; border-color: #4b5563; } html.dark .upload-btn:hover { background: #4b5563; } html.dark .error-message { color: #f87171; } html.dark .submit-button:disabled { background: #4b5563; } html.dark .success-view h3 { color: #f3f4f6; } html.dark .success-view .email-note, html.dark .back-button-full { color: #60a5fa; } html.dark .back-button-full { background: transparent; border-color: #60a5fa; } html.dark .back-button-full:hover { background: rgb(96 165 250 / 12%); } .slide-panel { overflow: hidden; background-color: white; box-shadow: 0 -2px 10px rgb(0 0 0 / 10%); will-change: transform; } .slide-panel.portrait { border-radius: 20px 20px 0 0; } .slide-panel.landscape { border-radius: 0; box-shadow: -2px 0 10px rgb(0 0 0 / 10%); } /* Drag handle areas */ .drag-handle-area { flex-shrink: 0; touch-action: none; cursor: grab; user-select: none; } .drag-handle-area:active { cursor: grabbing; } /* Portrait: horizontal pill at top */ .portrait-handle { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 28px; } .portrait-collapse-btn { position: absolute; top: 50%; right: 12px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: #5f6368; touch-action: manipulation; cursor: pointer; background: transparent; border: none; border-radius: 50%; transform: translateY(-50%); } .portrait-collapse-btn:active { background-color: rgb(0 0 0 / 8%); } .portrait-collapse-btn .material-symbols-outlined { font-size: 22px; } .drag-pill { width: 36px; height: 4px; background-color: #dadce0; border-radius: 2px; } /* Landscape: vertical bar on left edge */ .landscape-handle { position: absolute; top: 0; left: -12px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 100%; } .drag-bar { width: 4px; height: 48px; background-color: #dadce0; border-radius: 2px; } .landscape-handle:hover .drag-bar { background-color: #bbb; } .landscape-collapse-btn { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: #5f6368; touch-action: manipulation; cursor: pointer; background: transparent; border: none; border-radius: 50%; transform: translate(-50%, -50%); } .landscape-collapse-btn:active { background-color: rgb(0 0 0 / 8%); } .landscape-collapse-btn .material-symbols-outlined { font-size: 20px; } /* Inner layout */ .slide-panel-inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .slide-panel.portrait .slide-panel-inner { height: calc(100% - 28px); /* subtract handle height */ } .slide-panel-header { flex-shrink: 0; } .slide-panel-content { flex: 1; overflow: hidden auto; -webkit-overflow-scrolling: touch; } /* Smooth max-height transition during snap animation */ .slide-panel.portrait.is-animating .slide-panel-inner { transition: max-height 0.3s cubic-bezier(0.77, 0, 0.175, 1); } /* Disable scrollbar flicker during drag */ .slide-panel.is-dragging .slide-panel-content { overflow: hidden; } /* Dark-mode rules live inside SlidePanel.svelte's \3c style> block so :global() compiles correctly. */ /* Dark mode lives here in the Svelte \3c style> block (not the imported CSS file) so :global() reliably reaches the compiler. Selectors use the class-based dark mode set up by $lib/utils/theme.ts on . */ html.dark .slide-panel { background-color: #1f2937; color: #f3f4f6; box-shadow: 0 -2px 10px rgb(0 0 0 / 50%); } html.dark .slide-panel.landscape { box-shadow: -2px 0 10px rgb(0 0 0 / 50%); } html.dark .drag-pill, html.dark .drag-bar { background-color: #4b5563; } html.dark .landscape-handle:hover .drag-bar { background-color: #6b7280; } html.dark .portrait-collapse-btn, html.dark .landscape-collapse-btn { color: #d1d5db; } html.dark .portrait-collapse-btn:active, html.dark .landscape-collapse-btn:active { background-color: rgb(255 255 255 / 8%); } /* InfoPanel content styles - positioning handled by SlidePanel */ .poi-header { position: relative; display: flex; flex-flow: column wrap; gap: 10px; row-gap: 2px; align-items: flex-start; font-family: "Open Sans", sans-serif; .back-button { position: absolute; top: 6px; left: 0; } .poi-title-row { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 12px 16px 0; } .poi-header-actions { display: flex; flex-shrink: 0; gap: 8px; align-items: center; } .close-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: pointer; background: #f0f0f0; border: none; border-radius: 50%; } .draft-tag { padding: 2px 8px; font-size: 12px; font-weight: 600; color: #b45309; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 4px; } .edit-location-button { cursor: pointer; background: transparent; border: 0; } .edit-location-button .material-symbols-outlined { font-size: 28px; } .report-button { cursor: pointer; background: transparent; border: 0; } .report-button .material-symbols-outlined { font-size: 28px; } .add-to-itinerary-button { display: flex; gap: 6px; align-items: center; justify-content: center; width: calc(100% - 32px); padding: 8px 16px; margin: 0 16px; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 500; color: white; cursor: pointer; background: #4caf50; border: none; border-radius: 8px; transition: background-color 0.2s ease, opacity 0.2s ease; } .add-to-itinerary-button:hover { background: #388e3c; } .add-to-itinerary-button .material-symbols-outlined { font-size: 20px; } .add-to-itinerary-button .button-text { white-space: nowrap; } .add-to-itinerary-button.add-again { background: #1976d2; } .add-to-itinerary-button.add-again:hover { background: #1565c0; } .back-button .material-symbols-outlined { font-size: 28px; } .poi-title { flex: 1; min-width: 0; margin: 0; font-size: 24px; font-weight: 500; &.no-subtitle { padding-bottom: 12px; } } .poi-type { display: flex; gap: 8px; align-items: center; width: 100%; padding: 0 16px 8px; font-size: 14px; color: rgb(1 1 1 / 60%); text-transform: capitalize; border-bottom: 1px solid rgb(0 0 0 / 8%); } .poi-tags-row { width: 100%; padding: 8px 16px; } .location-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; } .location-tag { display: inline-flex; padding: 3px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #fff; text-transform: none; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border: 1px solid #b45309; border-radius: 10px; } } .panel-body { flex-grow: 1; overflow: auto; .poi-additional-info { position: relative; font-family: "Open Sans", sans-serif; } .poi-about { box-sizing: border-box; width: 100%; padding: 12px 16px; font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 1.5; color: #333; background: white; img { max-width: 100%; height: auto; } :global(img) { max-width: 100%; height: auto; } iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; } :global(iframe) { width: 100%; height: auto; aspect-ratio: 16 / 9; } .google-place-loading { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; height: 200px; font-family: "Open Sans", sans-serif; color: #666; .spinning { font-size: 32px; animation: spin 1s linear infinite; } } } .google-place-inline { flex: 1; overflow: auto; background: white; gmp-place-details { display: block; width: 100%; min-height: 400px; } .google-place-loading { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; height: 200px; font-family: "Open Sans", sans-serif; color: #666; .spinning { font-size: 32px; animation: spin 1s linear infinite; } } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } } .google-place-view { position: relative; display: flex; flex-direction: column; height: 100%; } .google-place-floating-buttons { position: absolute; top: 12px; right: 12px; z-index: 10; display: flex; gap: 8px; .back-button, .close-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; cursor: pointer; background: #f0f0f0; border: none; border-radius: 50%; } .add-location-button, .copy-url-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; cursor: pointer; background: #f0f0f0; border: none; border-radius: 50%; } } .google-place-body { flex: 1; height: 100%; overflow: auto; background: white; gmp-place-details { display: block; width: 100%; height: 100%; } .google-place-loading { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; height: 200px; font-family: "Open Sans", sans-serif; color: #666; .spinning { font-size: 32px; animation: spin 1s linear infinite; } } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Dark-mode rules live inside InfoPanel.svelte's \3c style> block (:global() fully reaches the Svelte compiler there). */ /* Dark mode (class-based — :global(html.dark) ...) lives in the Svelte \3c style> block so the compiler processes :global() reliably. */ html.dark .poi-header, html.dark .poi-header .close-button, html.dark .poi-header .edit-location-button, html.dark .poi-header .report-button { color: #f3f4f6; } html.dark .poi-header .close-button { background: #374151; } html.dark .poi-header .draft-tag { color: #fbbf24; background: #422006; border-color: #b45309; } html.dark .poi-header .poi-type { color: rgb(243 244 246 / 75%); border-bottom-color: rgb(255 255 255 / 10%); } html.dark .panel-body .poi-about { color: #f3f4f6; background: #1f2937; } /* Per-line white backgrounds and per-span black text colours occasionally creep into POI descriptions (e.g. the Salamis Battle entry stored HTML where the editor pinned `color: #000` and a white background on each line). Force every descendant to honour the panel's dark surface so the text doesn't end up as black on white ribbons. */ html.dark .panel-body .poi-about * { background-color: transparent !important; color: #f3f4f6 !important; } html.dark .panel-body .poi-about a, html.dark .panel-body .poi-about a:visited { color: #93c5fd !important; } html.dark .panel-body .poi-about .google-place-loading, html.dark .panel-body .google-place-inline .google-place-loading { color: #9ca3af; } html.dark .panel-body .google-place-inline { background: #1f2937; } /* The Google web component renders inside its own shadow DOM and ships a light-only stylesheet, so it punches a white rectangle into the otherwise-dark panel. CSS-invert the embed (and re-rotate the hue) so it reads as dark while keeping its colours roughly the same. Photos rendered inside the embed get their hue inverted too — acceptable trade-off until Google ships a dark theme for the component. */ html.dark .google-place-inline gmp-place-details, html.dark .google-place-body gmp-place-details { filter: invert(1) hue-rotate(180deg); background: transparent; } html.dark .google-place-inline gmp-place-details img, html.dark .google-place-body gmp-place-details img { /* Cancel out the parent invert/hue-rotate on photos so they render with their original colours. */ filter: invert(1) hue-rotate(180deg); } html.dark .google-place-floating-buttons .back-button, html.dark .google-place-floating-buttons .close-button, html.dark .google-place-floating-buttons .add-location-button, html.dark .google-place-floating-buttons .copy-url-button { color: #f3f4f6; background: #374151; } html.dark .google-place-body { background: #1f2937; } html.dark .google-place-body .google-place-loading { color: #9ca3af; } .shimmer-wrapper.svelte-1tm4o7z { position: relative; overflow: hidden; background-color: #e0e0e0; height:150px; } .shimmer.svelte-1tm4o7z { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to right, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100% ); animation: svelte-1tm4o7z-shimmer 1.5s infinite; } @keyframes svelte-1tm4o7z-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } html.dark .shimmer-wrapper.svelte-1tm4o7z { background-color: #374151; } html.dark .shimmer.svelte-1tm4o7z { background: linear-gradient( to right, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100% ); } .itineraries-grid.svelte-1444lfa { display: grid; grid-template-columns: 1fr; grid-template-rows: 150px; gap: 16px; } .itinerary-item-shimmer.svelte-1444lfa { width: 100%; height: 150px; position: relative; } .itinerary-item-shimmer.svelte-1444lfa .shimmer-wrapper { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 8px; } .details-header.svelte-tarnde { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; gap: 16px; } .itinerary-title-container.svelte-tarnde { flex: 1; min-width: 0; } .itinerary-actions.svelte-tarnde { display: flex; gap: 8px; } .itinerary-separator.svelte-tarnde { height: 1px; background-color: #cacaca; } .itinerary-panel-body.svelte-tarnde { padding: 20px; } .itinerary-steps.svelte-tarnde { padding: 0 24px; } .step-shimmer.svelte-tarnde { display: flex; min-height: 120px; padding: 12px 0; } .step-shimmer.svelte-tarnde:last-child .step-line:where(.svelte-tarnde) { display: none; } .step-icon-container.svelte-tarnde { display: flex; flex-direction: column; align-items: center; margin-right: 8px; } .step-line.svelte-tarnde { width: 2px; background-color: #e0e0e0; flex-grow: 1; margin-top: 8px; } .step-content.svelte-tarnde { flex-grow: 1; padding-top: 12px; } .shimmer.svelte-tarnde { background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%); background-size: 200% 100%; animation: svelte-tarnde-shimmer 1.5s infinite; border-radius: 4px; } .shimmer.title.svelte-tarnde { height: 24px; width: 60%; margin-bottom: 8px; } .shimmer.subtitle.svelte-tarnde { height: 14px; width: 80px; } .shimmer.icon-button.svelte-tarnde { width: 32px; height: 32px; border-radius: 50%; } .shimmer.step-icon.svelte-tarnde { width: 48px; height: 48px; border-radius: 50%; } .shimmer.step-title.svelte-tarnde { height: 18px; width: 50%; margin-bottom: 12px; } .shimmer.step-text.svelte-tarnde { height: 14px; width: 100%; margin-bottom: 8px; } .shimmer.step-text.short.svelte-tarnde { width: 70%; } @keyframes svelte-tarnde-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } html.dark .itinerary-separator.svelte-tarnde { background-color: #374151; } html.dark .step-line.svelte-tarnde { background-color: #374151; } html.dark .shimmer.svelte-tarnde { background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%); background-size: 200% 100%; } /* Inherits styles from ItineraryPanel.css */ .proposal-alert.svelte-1nwng5r { display: flex; gap: 12px; align-items: flex-start; padding: 16px; margin: 12px 0; border-radius: 12px; animation: svelte-1nwng5r-slideDown 0.3s ease-out; } .proposal-alert.svelte-1nwng5r .material-symbols-outlined:where(.svelte-1nwng5r) { font-size: 24px; color: #2196f3; } .proposal-content.svelte-1nwng5r { flex: 1; } .proposal-card-content.svelte-1nwng5r { margin-bottom: 8px; font-size: 14px; color: #333; } .proposal-actions.svelte-1nwng5r { display: flex; gap: 8px; } .proposal-actions.svelte-1nwng5r button:where(.svelte-1nwng5r) { padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 6px; transition: opacity 0.2s; } .proposal-actions.svelte-1nwng5r button:where(.svelte-1nwng5r):hover { opacity: 0.8; } .accept-button.svelte-1nwng5r { color: white; background-color: #2196f3; border: none; } .ignore-button.svelte-1nwng5r { color: #666; background-color: transparent; border: 1px solid #ccc; } .extra-button.svelte-1nwng5r { color: #999; background-color: transparent; border: 1px solid #ddd; } .reorder-proposal.svelte-1nwng5r { border: 1px solid #2196f3; } .warning-proposal.svelte-1nwng5r { border: 1px solid #ff9800; } .warning-proposal.svelte-1nwng5r .material-symbols-outlined:where(.svelte-1nwng5r) { color: #ff9800; } .warning-proposal.svelte-1nwng5r .accept-button:where(.svelte-1nwng5r) { background-color: #ff9800; } .proposal-alert.compact.svelte-1nwng5r { padding: 8px 12px; margin: 4px 0 4px 42px; font-size: 13px; background-color: rgb(33 150 243 / 5%); border-style: dashed; box-shadow: none; .material-symbols-outlined:where(.svelte-1nwng5r) { font-size: 20px; } .proposal-card-content:where(.svelte-1nwng5r) { margin-bottom: 4px; } .proposal-actions:where(.svelte-1nwng5r) button:where(.svelte-1nwng5r) { padding: 4px 8px; font-size: 12px; } } .proposal-alert.compact.warning-proposal.svelte-1nwng5r { background-color: rgb(255 152 0 / 5%); } .insert-proposal.svelte-1nwng5r { background-color: rgb(255 183 77 / 20%); border: 1px solid #ffb74d; } .insert-proposal.svelte-1nwng5r .material-symbols-outlined:where(.svelte-1nwng5r) { color: #f57c00; } .insert-proposal.svelte-1nwng5r .accept-button:where(.svelte-1nwng5r) { background-color: #f57c00; } .proposal-alert.compact.insert-proposal.svelte-1nwng5r { background-color: rgb(255 183 77 / 15%); } @keyframes svelte-1nwng5r-slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Class-based dark mode (html.dark). The proposal alert lives inside the InfoPanel/ItineraryPanel surface, so all the dim grays here need light replacements. The brand blue / amber accents stay. */ html.dark .proposal-card-content.svelte-1nwng5r { color: #f3f4f6; } html.dark .ignore-button.svelte-1nwng5r { color: #d1d5db; border-color: #4b5563; } html.dark .extra-button.svelte-1nwng5r { color: #9ca3af; border-color: #4b5563; } .itinerary-panel-inner { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background-color: white; } .itinerary-panel-header { display: flex; flex-shrink: 0; gap: 6px; align-items: center; justify-content: space-between; padding: 10px; } .itinerary-title { min-width: 0; overflow: hidden; font-size: 18px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .itinerary-actions-wrapper { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .itinerary-actions { display: flex; gap: 8px; } .itinerary-undo-redo { display: flex; gap: 8px; } .itinerary-button { padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; background-color: #f0f0f0; border: none; border-radius: 20px; transition: background-color 0.2s; } .itinerary-button:hover { background-color: #e0e0e0; } .itinerary-icon-button { display: flex; align-items: center; justify-content: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; cursor: pointer; background-color: #f0f0f0; border: none; border-radius: 50%; transition: background-color 0.2s; } .itinerary-icon-button:hover:not(:disabled) { background-color: #e0e0e0; } .itinerary-icon-button:disabled { cursor: default; opacity: 0.4; } .itinerary-icon-button.save-button { color: white; background-color: #4caf50; } .itinerary-icon-button.save-button:hover { background-color: #45a049; } .itinerary-icon-button.cancel-button { color: white; background-color: #f44336; } .itinerary-icon-button.cancel-button:hover { background-color: #da190b; } .itinerary-icon-button .material-symbols-outlined { font-size: 20px; } .itinerary-title-container { flex: 1; min-width: 0; } .itinerary-total-distance { display: flex; gap: 4px; align-items: center; font-size: 14px; color: rgb(1 1 1 / 60%); } .itinerary-close-button { display: flex; align-items: center; justify-content: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; cursor: pointer; background: #f0f0f0; border: none; border-radius: 50%; } .create-itinerary-btn { padding: 4px 10px; font-size: 12px; font-weight: 500; color: white; white-space: nowrap; cursor: pointer; background-color: #0369a1; border: none; border-radius: 9999px; transition: background-color 0.15s, transform 0.15s; } .create-itinerary-btn:hover { background-color: #075985; transform: scale(1.05); } .itinerary-separator { height: 1px; background-color: #cacaca; } .itinerary-panel-body { flex-grow: 1; height: 100%; padding: 12px; padding-bottom: 80px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .itineraries-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .itinerary-item { position: relative; height: 150px; overflow: hidden; cursor: pointer; border: 2px solid transparent; border-radius: 15px; } /* U3 (pre-launch fixes) — like button overlay on each My-tab tile. Sits in the top-right corner over the cover photo; the wrapper stops click propagation so the underlying tile's "open details" handler doesn't fire. */ .itinerary-item-like { position: absolute; top: 6px; right: 6px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; cursor: pointer; background: rgb(255 255 255 / 75%); backdrop-filter: blur(2px); border-radius: 999px; box-shadow: 0 1px 3px rgb(0 0 0 / 15%); } .itinerary-item-like :global(.like-itinerary-button) { padding: 0; } .itinerary-item-like :global(.like-itinerary-button .material-symbols-outlined) { font-size: 22px; } .itinerary-item.selected { border-color: #007bff; &::before { position: absolute; inset: -2px; pointer-events: none; content: ""; background: rgb(255 255 255 / 50%); } .itinerary-view-on-map { } .itinerary-item-title { color: black; text-shadow: none; .arrow-icon { /* visibility: visible; */ } .itinerary-pill { color: white; } } } .itinerary-item.selected::after { position: absolute; inset: 0; pointer-events: none; content: ""; background-color: rgb(0 123 255 / 10%); border-radius: 13px; } .itinerary-item.previewing { border-color: #7c7cbb; &::before { position: absolute; inset: -2px; pointer-events: none; content: ""; background: rgb(255 255 255 / 50%); } .itinerary-item-title { color: black; text-shadow: none; .itinerary-pill { color: white; } } } .itinerary-item.previewing::after { position: absolute; inset: 0; pointer-events: none; content: ""; background-color: rgb(124 124 187 / 10%); border-radius: 13px; } .itinerary-item.deselecting { animation: deselect 1.5s ease-out forwards; } .itinerary-item.deselecting::before { position: absolute; inset: -2px; pointer-events: none; content: ""; animation: deselect-before 1.5s ease-out forwards; } .itinerary-item.deselecting::after { position: absolute; inset: 0; pointer-events: none; content: ""; border-radius: 13px; animation: deselect-overlay 1.5s ease-out forwards; } @keyframes deselect { 0% { border-color: #007bff; transform: scale(1.02); } 10% { border-color: #007bff; transform: scale(1); } 100% { border-color: transparent; transform: scale(1); } } @keyframes deselect-before { 0%, 10% { background: rgb(255 255 255 / 50%); } 100% { background: transparent; } } @keyframes deselect-overlay { 0%, 10% { background-color: rgb(0 123 255 / 10%); } 100% { background-color: transparent; } } .itinerary-item img { display: block; width: 100%; height: 100%; object-fit: cover; } .itinerary-item-title { position: absolute; top: 10px; right: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 5px 40px 5px 5px; font-size: 1.2em; font-weight: bold; color: white; text-shadow: 1px 1px 7px rgb(0 0 0 / 90%); border-radius: 5px; /* background: rgba(0, 0, 0, 0.5); */ /* width: calc(100%); */ } .itinerary-meta-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .itinerary-pill { display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; font-size: 12px; font-weight: 500; text-shadow: none; background: rgb(0 0 0 / 50%); border-radius: 9999px; } .itinerary-pill .material-symbols-outlined { font-size: 14px; } .itinerary-view-on-map { position: absolute; bottom: 10px; left: 10px; display: flex; gap: 4px; align-items: center; padding: 8px; font-size: 14px; font-weight: 400; color: white; background: rgb(0 0 0 / 50%); border-radius: 5px; } .itinerary-view-on-map span { font-size: 18px; } .itinerary-card-actions { position: absolute; bottom: 10px; left: 10px; display: flex; gap: 6px; } .itinerary-preview-btn, .itinerary-add-btn { display: flex; gap: 4px; align-items: center; padding: 6px 10px; font-size: 13px; font-weight: 400; color: white; cursor: pointer; background: rgb(0 0 0 / 50%); border: none; border-radius: 5px; } .itinerary-preview-btn span, .itinerary-add-btn span { font-size: 16px; } .itinerary-item.previewing .itinerary-preview-btn { background: rgb(124 124 187 / 80%); } .arrow-icon { position: absolute; top: 18px; right: 10px; font-size: 1em; font-size: 24px; font-weight: 400; color: white; visibility: hidden; } .itinerary-panel-inner { overflow: hidden; /* To contain the sliding panel */ } .itinerary-list-view { height: 100%; transition: transform 0.1s ease-in-out; transform: translateX(0); &.hide { transition: transform 0.3s ease-in-out; transform: translateX(-20px); } } .itinerary-details-view { position: absolute; top: 0; left: 0; z-index: 10; display: flex; flex-direction: column; width: 100%; height: 100%; overflow-y: auto; background-color: white; transition: transform 0.3s ease-in-out; transform: translateX(100%); } .itinerary-details-view.show { transform: translateX(0); } .itinerary-details-view .itinerary-panel-body { padding-top: 0; } .details-header { position: sticky; top: 0; z-index: 100; /* Override .itinerary-panel-header's flex layout in favor of grid so we can place A/B/C into named areas (Panel A = title-and-like, Panel B = total-distance, Panel C = actions-wrapper). */ display: grid; grid-template-areas: "title actions" "stats actions"; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; background-color: white; /* Container-query basis for the narrow-layout switch below. CSS cannot detect "exactly when A would wrap/clip" without JS — we approximate with a width threshold tuned to typical title widths. */ container-type: inline-size; } /* The title-container is a structural wrapper around A+B in the markup. To let A and B participate in the .details-header grid as siblings of C (instead of being nested under a single grid cell), unwrap it via display: contents. The .itinerary-title-container rule at the top of this file (line 106) still applies in non-details-header contexts (e.g. ItineraryDetailsShimmer.svelte has its own scoped rule). */ .details-header .itinerary-title-container { display: contents; } .details-header .itinerary-title-and-like { grid-area: title; align-self: end; } /* Editing mode renders a contenteditable div directly inside the display:contents wrapper. Give it an explicit grid-area so it doesn't rely on auto-placement. */ .details-header .itinerary-title-input { grid-area: title; align-self: end; } .details-header .itinerary-total-distance { grid-area: stats; align-self: start; } .details-header .itinerary-actions-wrapper { grid-area: actions; align-self: center; } /* Narrow panel: switch to Option 2 — A spans the full first row, B and C share the second row (B left, C right). Threshold is empirical, not tied to A's actual clip; if titles regularly clip above this width, raise the threshold. */ @container (max-width: 380px) { .details-header { grid-template-areas: "title title" "stats actions"; } .details-header .itinerary-actions-wrapper { place-self: start end; } } /* Fallback for browsers without @container support (Safari <16, Firefox <110). Use a viewport-width proxy (480px > 380px container to account for panel being narrower than the viewport). */ @supports not (container-type: inline-size) { @media (width <= 480px) { .details-header { grid-template-areas: "title title" "stats actions"; } .details-header .itinerary-actions-wrapper { place-self: start end; } } } .details-header .itinerary-title { overflow: visible; text-overflow: unset; white-space: normal; } .itinerary-title-and-like { display: flex; gap: 4px; align-items: flex-start; } .itinerary-title-like { flex-shrink: 0; padding: 0; } .itinerary-title-like .material-symbols-outlined { font-size: 18px; } .itinerary-steps { padding: 0; } .step { position: relative; display: flex; align-items: flex-start; padding: 8px 8px 8px 0; margin: 0; cursor: pointer; user-select: none; border-radius: 12px; } .step.selected { background-color: transparent; .step-title-container { button { visibility: visible; } } .step-detail-indicator { pointer-events: auto; opacity: 1; } } .step:hover .step-detail-indicator { pointer-events: auto; opacity: 1; } .step.last-haven.selected .step-detail-indicator { pointer-events: none; opacity: 0; } .step.last-haven:hover .step-detail-indicator, .step.last-haven.selected:hover .step-detail-indicator { pointer-events: auto; opacity: 1; } .step-detail-indicator { display: flex; gap: 2px; align-items: center; margin-left: auto; color: #666; pointer-events: none; cursor: pointer; opacity: 0; transition: opacity 0.2s ease-in-out; .material-symbols-outlined { font-size: 18px; } &:hover { color: #333; } } .step-icon-container { position: relative; display: flex; flex-direction: column; flex-shrink: 0; align-items: center; align-self: stretch; min-width: 36px; margin-right: 6px; } .step-poi-name { padding-top: 4px; padding-bottom: 6px; font-size: 14px; font-weight: 500; color: #333; } .step-line { position: relative; flex-grow: 1; width: 3px; border-radius: 2px; .step-distance { position: absolute; top: 50%; left: 50%; padding: 2px 6px; font-size: 10px; color: #9e9e9e; background: white; transform: translate(-50%, -50%); } } .step-icon { position: relative; display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border-radius: 50%; .material-symbols-outlined { font-size: 22px; color: inherit; } img.poi-icon { width: 28px; height: 28px; } } .step-content { display: flex; flex-direction: column; flex-grow: 1; gap: 6px; justify-content: center; min-height: 32px; } .step-title-container { display: flex; flex: 1; align-items: center; justify-content: space-between; .step-title { font-weight: bold; } button { visibility: hidden; background: transparent; } } .itinerary-details-view.is-editing .step-title-container span button.delete-button, .itinerary-details-view.is-editing .step-title-container span button.edit-button { visibility: visible; } .step-poi-row { display: flex; gap: 10px; align-items: center; width: 100%; } .step-poi-name { flex: 1; font-size: 14px; font-weight: 500; color: #333; } .step-actions { display: flex; gap: 4px; margin-left: auto; } .step-text { min-height: 18px; padding: 6px 10px; font-size: 13px; color: #333; user-select: text; border: 1px dashed #ccc; border-radius: 6px; } .step-text-placeholder:empty::before { font-style: italic; color: #aaa; content: attr(data-placeholder); } /* Mobile landscape - reduce bottom padding to allow scrolling to last item */ @media (height <= 500px) and (orientation: landscape) { .itinerary-panel-body { padding-bottom: 20px; } } /* In-place editor styles */ .step-text[contenteditable="true"] { min-height: 1.2em; padding: 4px; cursor: text; border: 1px dashed #ccc; border-radius: 4px; outline: none; transition: border-color 0.2s, background-color 0.2s; } .step-text[contenteditable="true"]:hover { background-color: #fafafa; border-color: #bbb; } .step-text[contenteditable="true"]:focus { background-color: white; border-color: #2196f3; box-shadow: 0 0 0 2px rgb(33 150 243 / 10%); } .itinerary-title-input { width: 100%; min-height: 1.2em; padding: 4px; margin: -4px; font-family: inherit; color: inherit; word-break: break-word; background: transparent; border: 1px dashed #ccc; border-radius: 4px; outline: none; } .itinerary-title-input:focus { background: white; border-color: #2196f3; } .drag-handle { display: flex; align-items: center; justify-content: center; margin-bottom: 4px; color: #bdbdbd; cursor: grab; } .drag-handle .material-symbols-outlined { font-size: 20px; } .drop-indicator { position: relative; z-index: 10; height: 2px; margin: -1px 0; pointer-events: none; background-color: #2196f3; } .drop-indicator::before { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; content: ''; background-color: #2196f3; border-radius: 50%; transform: translateY(-50%); } .proposal-alert { display: flex; gap: 12px; align-items: flex-start; padding: 16px; margin: 12px 0; border-radius: 12px; animation: slideDown 0.3s ease-out; } .proposal-alert .material-symbols-outlined { font-size: 24px; color: #2196f3; } .proposal-content { flex: 1; } .proposal-text { margin-bottom: 8px; font-size: 14px; color: #333; } .proposal-actions { display: flex; gap: 8px; } .proposal-actions button { padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 6px; transition: opacity 0.2s; } .proposal-actions button:hover { opacity: 0.8; } .accept-button { color: white; background-color: #2196f3; border: none; } .ignore-button { color: #666; background-color: transparent; border: 1px solid #ccc; } .reorder-proposal { border: 1px solid #2196f3; } .proposal-alert.compact { padding: 8px 12px; margin: 4px 0 4px 42px; font-size: 13px; background-color: rgb(33 150 243 / 5%); border-style: dashed; box-shadow: none; .material-symbols-outlined { font-size: 20px; } .proposal-card-content { margin-bottom: 4px; } .proposal-actions button { padding: 4px 8px; font-size: 12px; } } .step.suggested-source { border: 1px dashed #2196f3; animation: pulseSubtle 2s infinite ease-in-out; } .step.suggestion-highlight { background-color: rgb(33 150 243 / 10%); border: 2px dashed #2196f3; animation: pulseHighlight 1.5s infinite ease-in-out; } @keyframes pulseHighlight { 0% { background-color: rgb(33 150 243 / 10%); } 50% { background-color: rgb(33 150 243 / 20%); } 100% { background-color: rgb(33 150 243 / 10%); } } .poi-move-suggestion-wrapper { margin: 4px 0 4px 42px; } .poi-delete-suggestion-wrapper { margin: 4px 0 4px 42px; } @keyframes pulseSubtle { 0% { background-color: transparent; } 50% { background-color: rgb(33 150 243 / 5%); } 100% { background-color: transparent; } } .search-start-point-message { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 24px 16px; margin: 16px; font-size: 16px; color: #666; background-color: #f5f5f5; border: 2px dashed #ccc; border-radius: 12px; } .search-start-point-message .material-symbols-outlined { font-size: 28px; color: #2196f3; } .change-start-button { padding: 6px 16px; font-size: 14px; color: #fff; cursor: pointer; background-color: #2196f3; border: none; border-radius: 20px; transition: background-color 0.2s; } .change-start-button:hover { background-color: #1976d2; } button.search-mode-active { color: white !important; background-color: #1565c0 !important; box-shadow: inset 0 2px 4px rgb(0 0 0 / 40%) !important; transform: scale(0.95) !important; } button.search-mode-active:hover { background-color: #1565c0 !important; transform: scale(0.95) !important; } .itinerary-day-group { margin: 6px 0; overflow: hidden; border: 1px solid; border-radius: 12px; box-shadow: 0 1px 3px rgb(0 0 0 / 4%); } .itinerary-day-header { display: flex; gap: 8px; align-items: flex-start; padding: 12px; list-style: none; cursor: pointer; user-select: none; background-color: transparent; } .itinerary-day-header::-webkit-details-marker { display: none; } .itinerary-day-header .material-symbols-outlined { margin-top: 2px; font-size: 24px; color: #9e9e9e; transition: transform 0.2s ease; } .itinerary-day-group[open] > .itinerary-day-header .material-symbols-outlined { transform: rotate(90deg); } .itinerary-day-title { display: flex; flex: 1; flex-direction: column; gap: 2px; overflow: hidden; } .day-number { font-size: 14px; font-weight: 600; white-space: nowrap; } .day-label { font-size: 14px; font-weight: 500; color: #333; } .day-label-input { min-width: 100px; padding: 2px 4px; margin: -2px -4px; cursor: text; border: 1px dashed transparent; border-radius: 4px; outline: none; } .day-label-input:hover { border-color: #ccc; } .day-label-input:focus { background: white; border-color: #666; border-style: solid; } .day-label-input:empty::before { color: #999; pointer-events: none; content: attr(data-placeholder); } .day-sail-length { margin-top: 2px; font-size: 13px; font-weight: 400; color: #757575; white-space: nowrap; } .day-delete-button { display: flex; align-items: center; justify-content: center; padding: 4px; color: #9e9e9e; cursor: pointer; background: none; border: none; border-radius: 4px; transition: background-color 0.2s ease; } .day-delete-button:hover { color: #f44336; background-color: rgb(244 67 54 / 10%); } .day-delete-button .material-symbols-outlined { font-size: 20px; transform: none !important; } .itinerary-day-content { padding: 4px 8px 12px; } .day-dragging { border: 1px dashed #2196f3; opacity: 0.5; } .itinerary-days-controls { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; justify-content: flex-end; padding: 4px 0; margin-bottom: 8px; background: white; } .days-toggle-button { display: flex; gap: 4px; align-items: center; padding: 4px 10px; font-size: 12px; font-weight: 500; color: #666; cursor: pointer; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 16px; transition: background-color 0.2s, border-color 0.2s; } .days-toggle-button:hover { color: #333; background: #ebebeb; border-color: #ccc; } .days-toggle-button .material-symbols-outlined { font-size: 16px; } .step-description { margin-top: 2px; font-size: 12px; line-height: 1.4; color: #757575; } .step-actions { display: flex; gap: 8px; margin-top: 8px; } .step-action-button { display: flex; align-items: center; justify-content: center; padding: 4px; color: #999; cursor: pointer; background: transparent; border: none; border-radius: 4px; transition: background-color 0.2s, color 0.2s; } .step-action-button:hover { color: #666; background-color: #f5f5f5; } .step-action-button.delete:hover { color: #f44336; background-color: #feebeb; } .step-action-button.split-day { gap: 2px; padding: 2px 6px 2px 4px; } .split-day-label { font-size: 11px; white-space: nowrap; } /* This section intentionally left empty - styles consolidated above */ /* Drag and drop for day groups */ .itinerary-day-group.day-dragging { opacity: 0.5; } /* Insertion line between days during drag */ .day-drop-indicator { position: relative; z-index: 10; height: 2px; margin: -1px 0; pointer-events: none; background-color: #2196f3; } .day-drop-indicator::before { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; content: ''; background-color: #2196f3; border-radius: 50%; transform: translateY(-50%); } /* Visual feedback when day is about to expand on drag hover */ .itinerary-day-group.day-expand-pending > .itinerary-day-header { background-color: rgb(33 150 243 / 8%); transition: background-color 0.2s ease; } /* Diagonal cross over icon (for remove day break button) */ .icon-crossed { position: relative; } .icon-crossed::after { position: absolute; top: 50%; left: 50%; width: 120%; height: 2px; content: ''; background-color: currentcolor; border-radius: 1px; transform: translate(-50%, -50%) rotate(-45deg); } /* Start point styling (previous day's end point shown at day start) */ .step.start-point { opacity: 0.6; } .step.start-point .step-icon-container { flex-direction: column-reverse; } .step.start-point .step-line { flex-grow: 0; height: 16px; } .start-point-label { padding: 2px 6px; font-size: 11px; color: #9e9e9e; text-transform: uppercase; letter-spacing: 0.5px; background: #f5f5f5; border-radius: 4px; } /* Toggle between Suggested and My Itineraries */ .itinerary-mode-toggle { display: flex; gap: 2px; padding: 3px; background-color: #f0f0f0; border-radius: 20px; } .toggle-btn { padding: 4px 8px; font-size: 11px; font-weight: 500; color: #666; cursor: pointer; background-color: transparent; border: none; border-radius: 16px; transition: all 0.2s ease; } .toggle-btn:hover { color: #333; } .toggle-btn.active { color: white; background-color: #2196f3; } /* Share Modal */ .share-modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background-color: rgb(0 0 0 / 50%); } .share-modal { width: 90%; max-width: 480px; background: white; border-radius: 16px; box-shadow: 0 4px 24px rgb(0 0 0 / 20%); } .share-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e0e0e0; } .share-modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; } .share-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: pointer; background: none; border: none; border-radius: 50%; transition: background-color 0.2s; } .share-modal-close:hover { background-color: #f0f0f0; } .share-modal-body { padding: 20px; } .share-modal-body p { margin: 0 0 16px; font-size: 14px; color: #666; } .share-url-container { display: flex; gap: 8px; } .share-url-input { flex: 1; padding: 10px 12px; font-size: 14px; color: #333; background-color: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; outline: none; } .share-url-input:focus { border-color: #2196f3; } .share-copy-button { display: flex; gap: 4px; align-items: center; padding: 10px 16px; font-size: 14px; font-weight: 500; color: white; cursor: pointer; background-color: #2196f3; border: none; border-radius: 8px; transition: background-color 0.2s; } .share-copy-button:hover { background-color: #1976d2; } .share-copy-button .material-symbols-outlined { font-size: 18px; } /* Share Menu Dropdown */ .share-menu-container { position: relative; } .share-menu-dropdown { position: absolute; top: 100%; right: 0; z-index: 100; min-width: 220px; margin-top: 8px; overflow: hidden; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgb(0 0 0 / 15%); } .share-menu-item { display: flex; gap: 12px; align-items: center; width: 100%; padding: 14px 16px; font-size: 14px; font-weight: 500; color: #333; text-align: left; cursor: pointer; background: none; border: none; transition: background-color 0.2s; } .share-menu-item:hover { background-color: #f5f5f5; } .share-menu-item:not(:last-child) { border-bottom: 1px solid #e8e8e8; } .share-menu-item .material-symbols-outlined { font-size: 20px; color: #666; } .share-menu-backdrop { position: fixed; inset: 0; z-index: 99; cursor: default; background: transparent; border: none; } .share-menu-item:disabled { cursor: default; opacity: 0.7; } .share-menu-item:disabled:hover { background-color: transparent; } /* U2 (pre-launch fixes) — visible help text under the "Add to plan" label when the user is signed in but not authorized (not the Skipper and not TEAM/ADMIN). The hint sits in a column with the label. */ .share-menu-item-text { display: flex; flex: 1; flex-direction: column; gap: 2px; } .share-menu-item-label { line-height: 1.3; } .share-menu-item-hint { font-size: 12px; font-weight: 400; line-height: 1.3; color: #777; } /* U2 — "blocked" disabled state (vs. the neutral in-flight disabled). Used when the user lacks permission to add the itinerary to the plan. */ .share-menu-item-blocked, .share-menu-item-blocked:hover { color: #777; cursor: not-allowed; background-color: transparent; } .share-menu-item-blocked .material-symbols-outlined { color: #999; } .share-menu-section { padding: 12px 16px; } .share-menu-section-title { margin-bottom: 4px; font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.5px; } .share-menu-section-subtitle { margin-bottom: 12px; font-size: 12px; line-height: 1.4; color: #888; } .share-menu-loading, .share-menu-empty { padding: 8px 0; font-size: 13px; color: #888; } .share-menu-bookings { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; } .share-menu-booking-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px; cursor: pointer; border-radius: 8px; transition: background-color 0.15s; } .share-menu-booking-item:hover { background-color: #f5f5f5; } .share-menu-booking-item input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: #4caf50; cursor: pointer; } .share-menu-booking-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .share-menu-booking-yacht { overflow: hidden; font-size: 14px; font-weight: 500; color: #333; text-overflow: ellipsis; white-space: nowrap; } .share-menu-booking-dates { font-size: 12px; color: #666; } .share-menu-divider { height: 1px; margin: 0; background-color: #e8e8e8; } /* Share menu toggle item (for isDemo toggle) */ .share-menu-toggle-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px; cursor: pointer; border-radius: 8px; transition: background-color 0.15s; } .share-menu-toggle-item:hover { background-color: #f5f5f5; } .share-menu-toggle-item input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: #2196f3; cursor: pointer; } .share-menu-toggle-item input[type="checkbox"]:disabled { cursor: wait; opacity: 0.5; } .share-menu-toggle-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .share-menu-toggle-label { font-size: 14px; font-weight: 500; color: #333; } .share-menu-toggle-description { font-size: 12px; line-height: 1.4; color: #666; } /* Itinerary item info line with source tags */ .itinerary-item-info { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .source-tag { display: inline-flex; gap: 3px; align-items: center; padding: 2px 6px; font-size: 10px; font-weight: 600; text-shadow: none; border-radius: 10px; } .source-tag .material-symbols-outlined { font-size: 12px; } .source-tag.shared { color: white; background-color: rgb(33 150 243 / 90%); } .source-tag.booking { color: white; background-color: rgb(76 175 80 / 90%); } .source-tag.local { color: white; background-color: rgb(158 158 158 / 90%); } /* Delete button for local itineraries */ .itinerary-delete-local { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: white; cursor: pointer; background: rgb(244 67 54 / 80%); border: none; border-radius: 50%; opacity: 0; transition: opacity 0.2s, background-color 0.2s; } .itinerary-item:hover .itinerary-delete-local { opacity: 1; } .itinerary-delete-local:hover { background: rgb(244 67 54); } .itinerary-delete-local .material-symbols-outlined { font-size: 18px; } /* Mobile screens: panel is full-width, use larger header fonts */ @media (width <= 768px) { .itinerary-panel-header { padding: 12px 16px; } .itinerary-panel-header > .itinerary-title { font-size: 16px; } .toggle-btn { padding: 6px 12px; font-size: 10px; } .create-itinerary-btn { padding: 6px 12px; font-size: 10px; } .details-header .itinerary-title { font-size: 24px; } } .sailing-leg-indicator { display: flex; gap: 4px; align-items: center; padding: 0; margin-bottom: -12px; font-size: 11px; color: #888; } .sailing-leg-indicator .material-symbols-outlined { font-size: 14px; } /* Narrow portrait screens: shrink header elements further so close button stays visible */ @media (width <= 400px) and (orientation: portrait) { .itinerary-panel-header { padding: 3px 16px; } .itinerary-panel-header > .itinerary-title { font-size: 20px; } .toggle-btn { padding: 6px; font-size: 15px; } .create-itinerary-btn { padding: 3px 8px; font-size: 15px; } .details-header { gap: 6px; } .details-header .itinerary-title { font-size: 15px; } } .new-day-divider { display: flex; align-items: center; padding: 4px 16px; } .new-day-divider::before, .new-day-divider::after { flex: 1; height: 1px; content: ''; background-color: #ccc; } .new-day-button { display: flex; gap: 3px; align-items: center; padding: 2px 12px; margin: 0 8px; font-size: 12px; font-weight: 500; color: #666; white-space: nowrap; cursor: pointer; background: white; border: 1px solid #ccc; border-radius: 999px; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .new-day-button:hover { color: #333; background-color: #f5f5f5; border-color: #999; } .new-day-button .material-symbols-outlined { font-size: 14px; } /* My-tab tile like button — scaled to 70% so it sits unobtrusively on the small tile thumbnail. The wrapper still occupies its layout slot; only the button visual shrinks. transform-origin centers the scale on the wrapper's centroid. */ .itinerary-item-like.svelte-8ugp5f .like-itinerary-button { transform: scale(0.7); transform-origin: center; } /* Dark mode (class-based — html.dark) lives here so :global() compiles. */ html.dark .itinerary-panel-inner, html.dark .itinerary-panel-header, html.dark .itinerary-panel-body, html.dark .itinerary-list-view, html.dark .itinerary-details-view, html.dark .itinerary-title, html.dark .itinerary-item-title, html.dark .step-poi-name, html.dark .step-text, html.dark .details-header h2, html.dark .details-header h3, html.dark .step, html.dark .step-content { color: #f3f4f6; } /* The inner / list / body / details containers ship with hard-coded white backgrounds in the CSS file — override them here so the gaps between itinerary cards read as the dark surface, not flashes of white. */ html.dark .itinerary-panel-inner, html.dark .itinerary-panel-body, html.dark .itinerary-list-view, html.dark .itinerary-details-view { background-color: #1f2937; } html.dark .itinerary-total-distance, html.dark .step-detail-indicator { color: #d1d5db; } html.dark .itinerary-close-button, html.dark .itinerary-icon-button, html.dark .itinerary-button { color: #f3f4f6; background-color: #374151; border-color: #4b5563; } html.dark .itinerary-close-button:hover, html.dark .itinerary-icon-button:hover, html.dark .itinerary-button:hover { background-color: #4b5563; } html.dark .itinerary-separator { background-color: rgb(255 255 255 / 10%); } html.dark .itinerary-item { color: #f3f4f6; background: #1f2937; border-color: #4b5563; } html.dark .itinerary-item:hover { background: #273342; border-color: #6b7280; } html.dark .itinerary-item.selected { border-color: #3b82f6; } html.dark .itinerary-pill { color: #d1d5db; background: #374151; } html.dark .itinerary-view-on-map, html.dark .itinerary-add-btn { color: #f3f4f6; background: #374151; border-color: #4b5563; } html.dark .itinerary-view-on-map:hover, html.dark .itinerary-add-btn:hover { background: #4b5563; } html.dark .step-line { background: rgb(255 255 255 / 18%); } html.dark .itinerary-title-input { color: #f3f4f6; background: #1f2937; border-color: #4b5563; } html.dark .itinerary-title-input:focus { border-color: #3b82f6; } html.dark .new-day-button { color: #d1d5db; background: #374151; border-color: #4b5563; } html.dark .new-day-button:hover { color: #f3f4f6; background-color: #4b5563; border-color: #6b7280; } html.dark .proposal-alert, html.dark .reorder-proposal { color: #f3f4f6; background: #1f2937; border-color: #4b5563; } html.dark .ignore-button { color: #d1d5db; background: transparent; border-color: #4b5563; } html.dark .ignore-button:hover { background: #374151; } /* Suggested/My segmented toggle */ html.dark .itinerary-mode-toggle { background-color: #374151; } html.dark .toggle-btn { color: #d1d5db; } html.dark .toggle-btn:hover { color: #f3f4f6; } /* .toggle-btn.active keeps its blue accent — already legible. */ /* "Starting from / Ending at" banners and inline change/select-point buttons live behind the depth-layer-fm-sky-* utilities (defined in packages/ui/src/app.css) which only generate a single light-mode background-color. Override the surfaces under html.dark so the banner and the in-banner pill button no longer flash bright sky-blue. */ html.dark .depth-layer-no-hover-fm-sky-200 { background-color: oklch(36.59% 0.091 244.66) !important; color: #f3f4f6; } html.dark .depth-layer-fm-sky-100 { background-color: oklch(47.81% 0.124 246.36) !important; color: #f3f4f6; } /* Editing-view chrome */ html.dark .details-header { background-color: #1f2937; } html.dark .search-start-point-message { color: #d1d5db; background-color: #374151; border-color: #6b7280; } html.dark .search-start-point-message .material-symbols-outlined { color: #60a5fa; } html.dark .itinerary-days-controls { background: #1f2937; } html.dark .days-toggle-button { color: #d1d5db; background: #374151; border-color: #4b5563; } html.dark .days-toggle-button:hover { color: #f3f4f6; background: #4b5563; border-color: #6b7280; } /* U4 — in-panel "Add to plan" / "Added to plan" button. Inherits .days-toggle-button base; the .added modifier gives it a greenish accent so attached vs not-attached is visually distinct. Disabled state (HTML disabled + opacity-60 + cursor-not-allowed) applies to both the canEdit=false viewer ("Added to plan" tooltip explains why) and the in-flight state. */ .add-to-plan-button.added.svelte-8ugp5f { color: #065f46; border-color: #6ee7b7; background: #ecfdf5; } .add-to-plan-button.added.svelte-8ugp5f .material-symbols-outlined:where(.svelte-8ugp5f) { color: #047857; } .add-to-plan-button[disabled].svelte-8ugp5f { opacity: 0.6; cursor: not-allowed; } html.dark .add-to-plan-button.added { color: #6ee7b7; border-color: #065f46; background: #064e3b; } html.dark .add-to-plan-button.added .material-symbols-outlined { color: #6ee7b7; } html.dark .step-description { color: #d1d5db; } /* Day-row labels in the editing view: ".day-label" carries the auto "Relaxing at sea" / custom day title and was #333 — disappears on the dark blue day card. The contenteditable variants need the same treatment, plus a sane focus surface. */ html.dark .day-label { color: #f3f4f6; } html.dark .day-label-input:hover { border-color: #4b5563; } html.dark .day-label-input:focus { color: #f3f4f6; background: #1f2937; border-color: #6b7280; } html.dark .day-label-input:empty::before { color: #6b7280; } /* Share menu dropdown: hardcoded white background is invisible / unreadable in dark mode. Override with a dark surface that matches the panel palette. */ html.dark .share-menu-dropdown { background-color: #374151; color: #f3f4f6; } html.dark .share-menu-item { color: #f3f4f6; } html.dark .share-menu-item:hover { background-color: #4b5563; } /* * Sticky info banner pinned to the top of the map editor. Tailwind toast * conventions don't quite fit (toasts auto-dismiss; this is persistent * until the user reconciles), so the styling is local — neutral info * palette, soft shadow, generous padding so the lines read as * informational rather than alarming. */ .map-disagreement-banner.svelte-1mgirea { position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%); z-index: 30; max-width: min(90vw, 36rem); padding: 0.5rem 0.875rem; border-radius: 0.5rem; background-color: rgb(254 249 195); /* amber-100 */ color: rgb(120 53 15); /* amber-900 */ border: 1px solid rgb(252 211 77); /* amber-300 */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); font-size: 0.875rem; line-height: 1.4; pointer-events: none; } .map-disagreement-banner__line.svelte-1mgirea + .map-disagreement-banner__line:where(.svelte-1mgirea) { margin-top: 0.25rem; } .unit-selector.svelte-1bu9hkj { display: flex; color: white; margin-left: 5px; font-family: 'Open Sans', sans-serif; font-size: 14px; gap: 3px; } .unit-selector.svelte-1bu9hkj span:where(.svelte-1bu9hkj) { padding: 2px 5px; cursor: pointer; border-radius: 3px; opacity: 0.8; background: #a9a9a9; color: black; } .unit-selector.svelte-1bu9hkj span.selected:where(.svelte-1bu9hkj) { background-color: #007cbf; color: white; } .distance-display-container.svelte-1bu9hkj { position: absolute; transform: translateX(-50%); z-index: 1001; pointer-events: auto; transition: top 0.2s ease; } .distance-input-wrapper.svelte-1bu9hkj { display: flex; align-items: center; background-color: rgba(0, 0, 0, 0.7); border-radius: 5px; padding: 5px 10px; } .distance-display.svelte-1bu9hkj { background-color: transparent; color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; border: none; text-align: right; } /* Hide arrows from number input */ .distance-display.svelte-1bu9hkj::-webkit-inner-spin-button, .distance-display.svelte-1bu9hkj::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .distance-display.svelte-1bu9hkj { -moz-appearance: textfield; } @keyframes svelte-7ooc5l-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin.svelte-7ooc5l { animation: svelte-7ooc5l-spin 1s linear infinite; } .map-control-button.svelte-7ooc5l { position: relative; padding: 10px; background-color: #fff; color: rgba(0, 0, 0, 0.7); border: 0; border-radius: 50%; cursor: pointer; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: background-color 0.3s ease; } .map-control-button.is-on.svelte-7ooc5l { background-color: #e0e0e0; } .map-control-button.svelte-7ooc5l:hover { background-color: #f5f5f5; } .map-control-button.is-on.svelte-7ooc5l:hover { background-color: #d0d0d0; } .badge.svelte-7ooc5l { position: absolute; left: 28px; bottom: 28px; width: 12px; height: 12px; background-color: #d32f2f; border-radius: 50%; } /* "Ring + glow" accent — itinerary entry-point button. Default fills the pill with the same brand green as the ring (the glyph is white). When pressed (`:active`) or while the panel is open (`.is-on`), the pill flips to a white background with the green ring preserved and the glyph in brand green. */ .map-control-button.accent-ring-glow.svelte-7ooc5l { background-color: #2bbe4a; color: #fff; box-shadow: 0 0 0 2.5px #2bbe4a, 0 0 0 6px rgba(43, 190, 74, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12); transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.2s ease, transform 0.1s ease; } .map-control-button.accent-ring-glow.svelte-7ooc5l:hover { background-color: #2bbe4a; color: #fff; box-shadow: 0 0 0 2.5px #2bbe4a, 0 0 0 6px rgba(43, 190, 74, 0.30), 0 2px 6px rgba(0, 0, 0, 0.12); } .map-control-button.accent-ring-glow.svelte-7ooc5l:active, .map-control-button.accent-ring-glow.is-on.svelte-7ooc5l, .map-control-button.accent-ring-glow.is-on.svelte-7ooc5l:hover { background-color: #fff; color: #18a33a; box-shadow: 0 0 0 2.5px #2bbe4a, 0 0 0 6px rgba(43, 190, 74, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12); } .map-control-button.accent-ring-glow.svelte-7ooc5l:active { transform: scale(0.96); } html.dark { .map-control-button.svelte-7ooc5l { background-color: #1f2937; color: #f3f4f6; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); } .map-control-button.is-on.svelte-7ooc5l { background-color: #4b5563; } .map-control-button.svelte-7ooc5l:hover { background-color: #374151; } .map-control-button.is-on.svelte-7ooc5l:hover { background-color: #6b7280; } /* Dark basemaps need a slightly stronger glow alpha for legibility, per the spec's "Edge Cases" note. Default keeps the green fill so the button reads as a primary action; pressed/open flips to white with the green ring still doing the work. */ .map-control-button.accent-ring-glow.svelte-7ooc5l { background-color: #2bbe4a; color: #fff; box-shadow: 0 0 0 2.5px #2bbe4a, 0 0 0 6px rgba(43, 190, 74, 0.28), 0 2px 6px rgba(0, 0, 0, 0.4); } .map-control-button.accent-ring-glow.svelte-7ooc5l:hover { background-color: #2bbe4a; color: #fff; box-shadow: 0 0 0 2.5px #2bbe4a, 0 0 0 6px rgba(43, 190, 74, 0.38), 0 2px 6px rgba(0, 0, 0, 0.4); } .map-control-button.accent-ring-glow.svelte-7ooc5l:active, .map-control-button.accent-ring-glow.is-on.svelte-7ooc5l, .map-control-button.accent-ring-glow.is-on.svelte-7ooc5l:hover { background-color: #fff; color: #18a33a; box-shadow: 0 0 0 2.5px #2bbe4a, 0 0 0 6px rgba(43, 190, 74, 0.28), 0 2px 6px rgba(0, 0, 0, 0.4); } } .map-controls-container.svelte-1p5tydi { position: absolute; left: 10px; bottom: 180px; z-index: 1; display: flex; flex-direction: column; gap: 33px; transition: transform 0.3s ease-in-out, bottom 0.3s ease-in-out; } .filter-button-wrapper.svelte-1p5tydi { position: relative; } .edit-locations-wrapper.svelte-1p5tydi { position: relative; } .edit-locations-menu.svelte-1p5tydi { position: absolute; left: 50px; top: 0; background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); min-width: 180px; overflow: hidden; z-index: 10; } .edit-locations-menu-item.svelte-1p5tydi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: none; background: white; cursor: pointer; font-size: 14px; color: #333; text-align: left; transition: background-color 0.15s; } .edit-locations-menu-item.svelte-1p5tydi:hover:not(:disabled) { background: #f5f5f5; } .edit-locations-menu-item.svelte-1p5tydi:disabled { opacity: 0.6; cursor: not-allowed; } .edit-locations-menu-item.svelte-1p5tydi:not(:last-child) { border-bottom: 1px solid #eee; } .edit-locations-menu-item.svelte-1p5tydi .material-symbols-outlined:where(.svelte-1p5tydi) { font-size: 20px; color: #666; } /* Dynamic panel-aware positioning is handled via inline style. The transition ensures smooth movement when panel resizes. */ /* Short screen adjustments */ .map-controls-container.compact.svelte-1p5tydi { bottom: 35px; left: 10px; gap: 20px; flex-direction: row-reverse; } .map-controls-container.compact.svelte-1p5tydi .filter-button-wrapper:where(.svelte-1p5tydi) .filter-menu { left: auto; right: 0; bottom: 50px; } .map-controls-container.compact.svelte-1p5tydi .edit-locations-menu:where(.svelte-1p5tydi) { left: auto; right: 0; top: auto; bottom: 50px; } /* Class-based dark mode toggled by $lib/utils/theme.ts on . */ html.dark .edit-locations-menu.svelte-1p5tydi { background: #1f2937; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); } html.dark .edit-locations-menu-item.svelte-1p5tydi { background: #1f2937; color: #f3f4f6; } html.dark .edit-locations-menu-item.svelte-1p5tydi:hover:not(:disabled) { background: #374151; } html.dark .edit-locations-menu-item.svelte-1p5tydi:not(:last-child) { border-bottom-color: #374151; } html.dark .edit-locations-menu-item.svelte-1p5tydi .material-symbols-outlined:where(.svelte-1p5tydi) { color: #d1d5db; } /*! * Quill Editor v2.0.3 * https://quilljs.com * Copyright (c) 2017-2024, Slab * Copyright (c) 2014, Jason Chen * Copyright (c) 2013, salesforce.com */ .ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc} /*# sourceMappingURL=quill.snow.css.map*/ .quill-wrapper.svelte-10unq2k { background: white; position: relative; } .editor-header.svelte-10unq2k { position: absolute; top: 8px; right: 8px; z-index: 10; } .expand-btn.svelte-10unq2k { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #e5e7eb; border-radius: 4px; background: white; cursor: pointer; color: #6b7280; transition: all 0.15s; } .expand-btn.svelte-10unq2k:hover { background: #f3f4f6; color: #374151; } .expand-btn.svelte-10unq2k .material-symbols-outlined:where(.svelte-10unq2k) { font-size: 18px; } .quill-wrapper.svelte-10unq2k .ql-container { min-height: 150px; font-size: 14px; } .quill-wrapper.svelte-10unq2k .ql-editor { min-height: 150px; } .quill-wrapper.svelte-10unq2k .ql-toolbar { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background: #f9fafb; } .quill-wrapper.svelte-10unq2k .ql-container { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } /* Modal styles */ .modal-backdrop.svelte-10unq2k { position: fixed; inset: 0; background: rgba(55, 65, 81, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 16px; } @media (min-width: 640px) { .modal-backdrop.svelte-10unq2k { padding: 24px; } } @media (min-width: 1024px) { .modal-backdrop.svelte-10unq2k { padding-left: 288px; padding-top: 80px; } } .modal-content.svelte-10unq2k { background: white; border-radius: 12px; width: 100%; max-width: 42rem; /* max-w-2xl */ height: 85vh; display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } @media (min-width: 1024px) { .modal-content.svelte-10unq2k { max-width: 64rem; /* max-w-5xl */ } } .modal-header.svelte-10unq2k { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; } .modal-header.svelte-10unq2k h3:where(.svelte-10unq2k) { margin: 0; font-size: 18px; font-weight: 600; color: #111827; } .close-btn.svelte-10unq2k { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 6px; background: transparent; cursor: pointer; color: #6b7280; font-size: 24px; line-height: 1; transition: all 0.15s; } .close-btn.svelte-10unq2k:hover { background: #f3f4f6; color: #374151; } .modal-editor.svelte-10unq2k { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .modal-editor.svelte-10unq2k .ql-toolbar { border-left: none; border-right: none; border-top: none; background: #f9fafb; } .modal-editor.svelte-10unq2k .ql-container { flex: 1; border: none; font-size: 16px; overflow-y: auto; } .modal-editor.svelte-10unq2k .ql-editor { padding: 20px 24px; min-height: 100%; } .fullscreen-overlay.svelte-y0h6bt { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; } .fullscreen-content.svelte-y0h6bt { position: relative; padding: 0; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width:100%; height: 100%; } .close-button.svelte-y0h6bt { position: fixed; top: 0; right: 12px; background: none; border: none; font-size: 48px; color: white; cursor: pointer; border-radius: 50%; } .fullscreen-content.svelte-y0h6bt img:where(.svelte-y0h6bt) { width: 100%; height: 100%; object-fit: contain; } .nav-button.svelte-y0h6bt { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px 15px; cursor: pointer; font-size: 2em; border-radius: 5px; z-index: 1201; } .nav-button.left.svelte-y0h6bt { left: 10px; } .nav-button.right.svelte-y0h6bt { right: 10px; } .source-details.svelte-y0h6bt { position:fixed; bottom:12px; left:6px; background:rgba(255, 255, 255, 0.8); padding: 4px 8px; border-radius: 4px; font-size: 12px; color: #555; font-family: "Open Sans", sans-serif; } .source-details.svelte-y0h6bt a:where(.svelte-y0h6bt) { color: #007bff; text-decoration: none; } .source-details.svelte-y0h6bt a:where(.svelte-y0h6bt):hover { text-decoration: underline; } .scrollbar-thin.svelte-1fq5gm6::-webkit-scrollbar { height: 6px; } .scrollbar-thin.svelte-1fq5gm6::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .scrollbar-thin.svelte-1fq5gm6::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; } .scrollbar-thin.svelte-1fq5gm6::-webkit-scrollbar-thumb:hover { background: #aaa; } @media (hover: none) { .hover-fallback.svelte-1fq5gm6 { opacity: 1 !important; } } .place-details-container.svelte-alp3zm { min-height: 60px; } .place-details-container.svelte-alp3zm gmp-place-details-compact { width: 100%; --gmp-place-details-compact-background: white; } gmp-advanced-marker:has(> .selected-marker) { z-index: 1000; } .custom-advanced-marker { position: relative; transition: transform 0.1s ease-in-out; transform:translateY(20px); transform-origin: center; user-select: none; } .draft-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background-color: #ef4444; border-radius: 50%; border: 1.5px solid white; pointer-events: none; } .recommended-crown { position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 22px; height: 10px; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); } /* Unverified pin: render the dedicated _unverified.svg sprite at the same 28 × 24 (40 × 34 when full-size) box used by verified markers so the dashed disc matches their outer radius — see icon CSS above for the defaults that this rule deliberately leaves untouched. The dashed stroke and shaded fill live in the SVG itself; no extra masks here. */ .custom-advanced-marker.selected-marker { transform:translateY(20px) scale(1.5); } .plus-icon-overlay { position: absolute; background-color: white; border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); user-select: none; } .plus-icon-overlay .material-symbols-outlined { font-size: 24px; color: #1a73e8; } .navigational-point-overlay { position: absolute; width: 18px; height: 18px; background-color: #6666cc; border: 2px solid white; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); cursor: grab; transition: transform 0.1s ease-in-out; user-select: none; } .navigational-point-overlay:hover { transform: translate(-50%, -50%) scale(1.2); } .navigational-point-overlay.selected-nav-point { transform: translate(-50%, -50%) scale(1.5); z-index: 1000; } .nav-point-delete-button { position: absolute; width: 20px; height: 20px; background-color: #d32f2f; border: 2px solid white; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1001; transition: background-color 0.15s ease; user-select: none; } .nav-point-delete-button:hover { background-color: #b71c1c; } .nav-point-delete-button .material-symbols-outlined { font-size: 14px; color: white; } .clicked-location-marker { width: 14px; height: 14px; background-color: #4285F4; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,0.4); cursor: grab; user-select: none; } .distance-label { position: absolute; background: rgba(255, 255, 255, 0.8); padding: 2px 5px; border-radius: 3px; font-size: 12px; font-weight: 500; transform: translate(-50%, -50%); white-space: nowrap; } .custom-advanced-marker img.advanced-marker-icon { display: block; width: 28px; height: 24px; } /* Full-size markers for POI types (zoom 12-16) when zoomed to 17+ */ .custom-advanced-marker.marker-full-size img.advanced-marker-icon { width: 40px; height: 34px; } .mapWrapper.svelte-7sr3kz { width: 100%; height: 100%; position: relative; /* Use `clip` (not `hidden`) so the hidden ItineraryPanel — which lives off-screen at translateX(panelWidth) and extends the wrapper's scrollWidth — cannot be scrolled into view by the browser's focus-into-view heuristic. Without this, opening the InfoPanel can shift the whole map left by panelWidth, leaving a panel-sized whitespace strip on the right of the viewport. */ overflow: clip; } .mapContainerStack.svelte-7sr3kz { position: absolute; inset: 0; transition: width 0.3s ease, height 0.3s ease; } .mapContainer.svelte-7sr3kz { width: 100%; height: 100%; transition: width 0.3s ease, height 0.3s ease; /* Smooth transition */ } .mapContainerLayer.svelte-7sr3kz { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0s linear; } .mapContainerLayer.is-active.svelte-7sr3kz { opacity: 1; pointer-events: auto; } /* Map sizing is now handled dynamically via inline styles on .mapContainerStack */ .toggle-map-id { position: absolute; bottom: 165px; right: 10px; z-index: 1000; padding: 10px; background-color: #fff; color:rgba(0, 0, 0, 0.7); border:0; border-radius: 50%; cursor: pointer; width:40px; height:40px; display:flex; justify-content: center; align-items: center; } .divider { border-top: 1px solid #cacaca; width: 100%; } .lat-lng-display-container.svelte-7sr3kz { position: absolute; bottom: 10px; transform: translateX(-50%); z-index: 1; background-color: rgba(0, 0, 0, 0.7); border-radius: 5px; padding: 5px 10px; display: flex; align-items: center; font-family: 'Roboto', sans-serif; /* Use a standard font */ font-size: 0.8em; color: #333; /* Darker text for readability */ transition: bottom 0.3s ease; } @keyframes svelte-7sr3kz-pulse-glow { 0%, 100% { box-shadow: 0 0 4px 2px rgba(33, 150, 243, 0.6), 0 0 8px 4px rgba(33, 150, 243, 0.2); border-color: rgba(33, 150, 243, 0.7); } 50% { box-shadow: 0 0 16px 8px rgba(33, 150, 243, 0.9), 0 0 30px 15px rgba(33, 150, 243, 0.4); border-color: rgba(33, 150, 243, 1); } } .change-point.svelte-7sr3kz { position: absolute; top: 10px; transform: translateX(-50%); z-index: 1; background-color: rgba(0, 0, 0, 0.9); border: 2px solid rgba(33, 150, 243, 0.7); border-radius: 5px; padding: 5px 10px; display: flex; align-items: center; font-family: 'Roboto', sans-serif; /* Use a standard font */ font-size: 1em; color: white; transition: top 0.3s ease; animation: svelte-7sr3kz-pulse-glow 1.2s ease-in-out infinite; } .lat-lng-display.svelte-7sr3kz { display: flex; align-items: center; white-space: nowrap; /* Prevent wrapping */ border:0px; color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; background:transparent; display: flex; gap: 5px; } .chatbot-result-marker { position: relative; } .chatbot-result-marker img.advanced-marker-icon { width: 40px; height: 34px; } .chatbot-result-number { position: absolute; top: -5px; right: -3px; width: 18px; height: 18px; border-radius: 50%; background: #3B82F6; color: white; font-size: 10px; font-weight: 700; line-height: 1; border: 1.5px solid white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; pointer-events: none; } .featured-marker img.advanced-marker-icon { filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.8)) drop-shadow(0 0 8px rgba(245, 158, 11, 0.5)); } .mapWrapper.ai-build-hiding-pois.svelte-7sr3kz .custom-advanced-marker:not([data-ai-build-marker='true']) { opacity: 0; transform: translateY(20px) scale(0.75); transition: opacity 0.24s ease, transform 0.24s ease; pointer-events: none; } .ai-build-icon-marker { position: relative; transform: translateY(20px) scale(0); transform-origin: center bottom; animation: svelte-7sr3kz-ai-build-pop-in 0.46s cubic-bezier(0.2, 0.9, 0.24, 1.18) forwards; filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.24)); user-select: none; } .ai-build-icon-marker__icon { display: block; width: 46px; height: 40px; } .ai-build-icon-marker__fallback { width: 46px; height: 46px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: white; color: #0f172a; font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: 700; border: 3px solid rgba(255, 255, 255, 0.96); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.22); } .ai-build-icon-marker::after { content: ''; position: absolute; left: 50%; top: 38%; width: 34px; height: 34px; border-radius: 999px; transform: translate(-50%, -50%); background: rgba(59, 130, 246, 0.12); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.18); animation: svelte-7sr3kz-ai-build-ring 1.7s ease-out infinite; z-index: -1; } .ai-build-icon-marker--start .ai-build-icon-marker__icon { width: 58px; height: 50px; } .ai-build-icon-marker--winner .ai-build-icon-marker__icon { width: 54px; height: 46px; } .ai-build-icon-marker--day .ai-build-icon-marker__icon { width: 62px; height: 54px; } .ai-build-icon-marker--stop .ai-build-icon-marker__icon { width: 38px; height: 32px; } .ai-build-icon-marker--start::after { background: rgba(13, 148, 136, 0.14); box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.18); } .ai-build-icon-marker--winner::after, .ai-build-icon-marker--day::after { background: rgba(37, 99, 235, 0.14); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.18); } .ai-build-icon-marker__label { position: absolute; top: -9px; right: -8px; min-width: 24px; height: 24px; border-radius: 999px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: #0f172a; color: white; border: 2px solid rgba(255, 255, 255, 0.96); box-shadow: 0 8px 16px rgba(15, 23, 42, 0.2); font-family: 'Open Sans', sans-serif; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.03em; } .ai-build-icon-marker__score { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); min-width: 20px; height: 16px; border-radius: 8px; padding: 0 4px; display: flex; align-items: center; justify-content: center; background: #3b82f6; color: white; border: 1.5px solid rgba(255, 255, 255, 0.96); box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); font-family: 'Open Sans', sans-serif; font-size: 7.5px; font-weight: 700; line-height: 1; } @keyframes svelte-7sr3kz-ai-build-pop-in { 0% { transform: translateY(20px) scale(0); opacity: 0; } 65% { transform: translateY(20px) scale(1.22); opacity: 1; } 100% { transform: translateY(20px) scale(1); opacity: 1; } } @keyframes svelte-7sr3kz-ai-build-ring { 0% { transform: translate(-50%, -50%) scale(0.78); opacity: 0.7; } 75% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; } }