/* ========================================================================== ZIP Mapper Tool - Tool-Specific Styles ========================================================================== */ /* -------------------------------------------------------------------------- Tool Container Layout !important on display/height/overflow: global.css's shared card-grid ".tool-container { display: grid; ... }" (no max-height, no overflow control) is bundled by Astro into a stylesheet that loads AFTER this file in , so on equal specificity it wins per-property - grid beats this file's flex, and with no definite height for the sidebar to stretch into, .tool-sidebar grew to its full content height (1896px measured with 50 plotted ZIPs) and spilled past this box into the SEO content below, since overflow was never forced to hidden either. Explicit height (not just max-height) plus !important closes all three gaps regardless of Astro's bundle order. -------------------------------------------------------------------------- */ .tool-container { display: flex !important; height: 700px !important; max-height: 700px !important; overflow: hidden !important; background-color: var(--bg); } .tool-sidebar { width: 380px; background-color: var(--card); border-right: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; box-shadow: var(--shadow); } .sidebar-content { padding: 20px; } .sidebar-content label { display: block; font-size: 13px; margin-bottom: 8px; margin-top: 12px; color: var(--text-muted); font-weight: 600; } .tool-section { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .tool-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .tool-section h3 { font-size: 15px; margin-bottom: 16px; color: var(--text); font-weight: 700; display: flex; align-items: center; gap: 8px; } .badge { display: inline-flex; align-items: center; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: auto; } /* -------------------------------------------------------------------------- Info Box -------------------------------------------------------------------------- */ .tool-info { background-color: var(--glass); border-radius: var(--radius-lg); padding: 14px; margin: 12px 0; border: 1px solid var(--border); } .tool-item { font-size: 13px; color: var(--text); padding: 6px 0; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .button-group { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .btn-full { width: 100%; justify-content: center; } .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: var(--primary); color: #fff; } /* -------------------------------------------------------------------------- Results / Status Box -------------------------------------------------------------------------- */ .results-box { background-color: var(--glass); border-radius: var(--radius-lg); padding: 14px; border: 1px solid var(--border); font-size: 13px; line-height: 1.6; } .results-box strong { color: var(--primary); } /* -------------------------------------------------------------------------- ZIP List -------------------------------------------------------------------------- */ .zip-list { list-style: none; padding: 0; margin: 0; max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass); } .zip-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; counter-increment: zm-counter; cursor: pointer; transition: background 0.12s ease; } .zip-list { counter-reset: zm-counter; } .zip-item:last-child { border-bottom: none; } .zip-item:hover { background: var(--hover-bg); } .zip-item.active { background: var(--hover-bg); border-left: 3px solid var(--primary); padding-left: 9px; } .zip-label { display: flex; align-items: center; gap: 8px; flex: 1; color: var(--text); font-weight: 500; } .zip-label::before { content: counter(zm-counter); display: inline-flex; align-items: center; justify-content: center; background: #3b82f6; color: #fff; font-size: 11px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; } .zip-item.active .zip-label::before { background: #f59e0b; } .zip-remove { background: transparent; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius); transition: background 0.12s ease, color 0.12s ease; } .zip-remove:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; } /* -------------------------------------------------------------------------- Related links -------------------------------------------------------------------------- */ .related-links { display: flex; flex-direction: column; gap: 8px; } .related-link { display: block; padding: 10px 12px; background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); transition: background 0.12s ease, border-color 0.12s ease; } .related-link:hover { background: var(--hover-bg); border-color: var(--primary); } .related-link strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; } .related-link span { display: block; font-size: 12px; color: var(--text-muted); } /* -------------------------------------------------------------------------- Map Container -------------------------------------------------------------------------- */ .map-container { max-height: calc(100vh - 120px); flex: 1; position: relative; overflow: hidden; min-height: 500px; max-height: 700px; } .map { width: 100%; height: 100%; min-height: 500px; } #map .leaflet-container { width: 100% !important; height: 100% !important; } /* -------------------------------------------------------------------------- FAB -------------------------------------------------------------------------- */ .fab { display: none; width: 56px; height: 56px; background-color: var(--primary); color: #fff; border: none; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); cursor: pointer; z-index: 9999; } /* -------------------------------------------------------------------------- Toast -------------------------------------------------------------------------- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: #1f2937; color: #fff; font-size: 13px; padding: 10px 18px; border-radius: var(--radius); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 10000; max-width: 90%; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.error { background: #ef4444; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 900px) { .tool-container { flex-direction: column; max-height: calc(100vh - 120px) !important; overflow-y: auto !important; height: auto !important; } .tool-sidebar { width: 100%; max-height: 60vh; overflow-y: auto; border-right: none; border-bottom: 1px solid var(--border); transition: max-height 0.3s ease; } .tool-sidebar.collapsed { max-height: 0; overflow: hidden; } .map-container { flex: none; height: 500px; min-height: 400px; max-height: 500px; } .map { min-height: 400px; height: 500px; } .fab { display: flex; align-items: center; justify-content: center; position: fixed; bottom: 20px; right: 20px; } } @media (max-width: 600px) { .sidebar-content { padding: 16px; } .tool-section { margin-bottom: 20px; padding-bottom: 20px; } .map-container { height: 400px; min-height: 350px; max-height: 450px; } .map { min-height: 350px; height: 400px; } }