scribo-maps/dist/scribo-maps.min.css

Embeddable map widget for store locators

.scribo-map-container{display:flex;height:100%;background-color:#f8fafc}.scribo-map-container *{box-sizing:border-box;padding:0;margin:0}.scribo-map-sidebar{width:380px;background:#f8fafc;display:flex;flex-direction:column;box-shadow:4px 0 20px rgba(0,0,0,.1);position:relative;overflow:hidden;border-right:1px solid #e2e8f0}.search-container{position:relative;display:flex;gap:12px;align-items:flex-start}.search-input-wrapper{position:relative;flex:1}.scribo-map-search{width:100%;padding:16px 20px;padding-right:50px;border:2px solid transparent;border-radius:12px;font-size:16px;font-weight:500;background:#fff;border:2px solid #e2e8f0;transition:all .3s cubic-bezier(.4, 0, .2, 1);outline:0}.scribo-map-search:focus{border-color:#64748b}.scribo-map-search::placeholder{color:#94a3b8;font-weight:400}.clear-search-btn{position:absolute;top:50%;right:12px;transform:translateY(-50%);background:rgba(100,116,139,.1);border:none;width:32px;height:32px;border-radius:6px;font-size:18px;font-weight:700;cursor:pointer;color:#64748b;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.clear-search-btn:hover{background:rgba(100,116,139,.2);color:#475569}.geolocation-btn{background:#fff;border:2px solid #e2e8f0;width:52px;height:52px;border-radius:12px;cursor:pointer;color:#64748b;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.geolocation-btn:hover{background:#000;color:#fff;border-color:#64748b;box-shadow:0 6px 16px rgba(100,116,139,.2)}.geolocation-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(100,116,139,.2)}.geolocation-btn svg{transition:transform .2s ease}.location-count{padding:16px 20px 12px;font-size:14px;font-weight:600;color:#64748b;background:rgba(255,255,255,.8);border-bottom:1px solid rgba(0,0,0,.1);letter-spacing:.5px;text-transform:uppercase}.scribo-map-locations-list{list-style:none;padding:0;margin:0;overflow-y:auto;flex-grow:1;background:#fff}.scribo-map-locations-list::-webkit-scrollbar{width:6px}.scribo-map-locations-list::-webkit-scrollbar-track{background:#f1f5f9}.scribo-map-locations-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.scribo-map-locations-list::-webkit-scrollbar-thumb:hover{background:#94a3b8}.scribo-map-locations-list li{padding:0;cursor:pointer;border-bottom:1px solid #f1f5f9;transition:all .2s ease;position:relative}.scribo-map-locations-list li:hover{background:linear-gradient(135deg,#f8fafc 0,#f1f5f9 100%)}.scribo-map-locations-list li:last-child{border-bottom:none}.location-item-sidebar{display:flex;padding:20px;width:100%;position:relative}.location-image{width:64px;height:64px;object-fit:cover;margin-right:16px;border-radius:12px;box-shadow:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1);transition:none;flex-shrink:0;padding:8px}.location-details{flex-grow:1;min-width:0}.location-details h4{margin:0 0 6px 0;font-size:16px;font-weight:700;color:#1e293b;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.location-details p{margin:0 0 12px 0;font-size:14px;color:#64748b;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.location-item-sidebar a{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:#64748b;text-decoration:none;padding:6px 12px;background:rgba(100,116,139,.1);border-radius:6px;transition:all .2s ease;border:1px solid transparent}.location-item-sidebar a:hover{background:#000;color:#fff;transform:translateY(-1px)}.scribo-map-map{flex-grow:1;height:100%;border-radius:0}.scribo-map-infowindow{padding:0;max-width:320px;min-width:240px;border-radius:12px;overflow:hidden;background:#fff}.infowindow-content{padding:12px 20px 20px 20px}.infowindow-content h4{margin:0 0 8px 0;font-size:18px;font-weight:700;color:#1e293b;line-height:1.3}.infowindow-content p{margin:0 0 16px 0;font-size:14px;color:#64748b;line-height:1.5}.infowindow-actions{display:flex;gap:12px;align-items:center}.infowindow-directions-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;background:#000;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:14px;transition:all .2s ease;flex:1;justify-content:center}.infowindow-directions-btn:hover{background:#000}.infowindow-directions-btn svg{width:16px;height:16px}.gm-style .gm-style-iw-c{border-radius:12px!important;box-shadow:0 10px 25px rgba(0,0,0,.15)!important}.gm-style .gm-style-iw-t::after{display:none!important}.gm-style .gm-style-iw-d{overflow:visible!important;padding:0!important;margin:0!important}.gm-style-iw-c{padding:0!important}.gm-style-iw{padding:0!important}.gm-style-iw-chr{padding:0!important;margin:0!important}.gm-style .gm-style-iw-d>div{margin:0!important;padding:0!important}.no-stores-message{padding:40px 20px;text-align:center;color:#64748b;cursor:default!important;font-size:16px;font-weight:500;background:linear-gradient(135deg,#f8fafc 0,#e2e8f0 100%);margin:20px;border-radius:12px;border:2px dashed #cbd5e1}.no-stores-message:hover{background:linear-gradient(135deg,#f8fafc 0,#e2e8f0 100%)!important;transform:none!important;box-shadow:none!important}.clear-search-btn:focus{outline:2px solid #64748b;outline-offset:2px}.geolocation-btn:focus{outline:2px solid #000;outline-offset:2px}.scribo-map-locations-list li:focus-within{outline:2px solid #64748b;outline-offset:-2px}.loading-state{opacity:.7;pointer-events:none;transition:opacity .2s ease}.success-highlight{background:linear-gradient(135deg,#10b981 0,#059669 100%)!important;color:#fff!important;animation:successPulse .6s ease-out}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}.search-card{padding:20px}.mobile-toggle-btn{display:none;position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:#000;color:#fff;border:none;border-radius:25px;padding:12px 20px;font-size:14px;font-weight:600;cursor:pointer;z-index:1000;box-shadow:0 4px 20px rgba(0,0,0,.3);transition:all .3s ease;align-items:center;gap:8px;min-width:100px}.mobile-toggle-btn:hover{background:#333;transform:translateX(-50%) translateY(-2px);box-shadow:0 6px 25px rgba(0,0,0,.4)}.mobile-toggle-btn:active{transform:translateX(-50%) translateY(0);box-shadow:0 2px 15px rgba(0,0,0,.3)}.toggle-icon{display:inline-flex;align-items:center}.toggle-text{margin-left:4px}@media (max-width:768px){.scribo-map-container{position:relative}.mobile-toggle-btn{display:flex}.scribo-map-sidebar{position:absolute;top:0;left:0;width:100%;height:100%;z-index:999;transform:translateX(-100%);transition:transform .3s ease;box-shadow:none}.scribo-map-map{width:100%;height:100%}.mobile-list-view .scribo-map-sidebar{transform:translateX(0)}.mobile-list-view .scribo-map-map{pointer-events:none}.scribo-map-sidebar{width:100%}.search-container{padding:16px 16px 12px}.location-item-sidebar{padding:16px}.location-image{width:56px;height:56px}.location-details h4{font-size:15px}.location-details p{font-size:13px}}