.surf-spots-modal .modal-dialog{width:100%;max-width:100%;margin-bottom:0;transition:transform .3s ease-out;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.surf-spots-modal.show .modal-dialog{transform:translate(0)}.surf-spots-modal .modal-content{border-radius:10px 10px 0 0;box-shadow:0 -5px 15px #0000004d}.surf-spots-modal .modal-header{color:#fff;background-color:#000000b3;border-top-left-radius:10px;border-top-right-radius:10px;padding:15px 20px}.surf-spots-modal .modal-body{padding:0}.surf-spots-map-container{width:100%;height:500px}.surf-spots-modal .modal-header:before{content:"";background-color:#ffffff80;border-radius:3px;width:40px;height:5px;margin:0 auto 10px;display:block;position:absolute;top:10px;left:50%;transform:translate(-50%)}.surf-spots-button-container{z-index:1000;pointer-events:none;width:60px;height:60px;margin-left:auto;margin-right:0;position:fixed;bottom:20px;left:auto!important;right:20px!important}.surf-spots-button{z-index:1000;color:#fff;cursor:pointer;pointer-events:auto;text-align:center;box-sizing:border-box;float:right;background-color:#007bff;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;width:60px;min-width:60px;max-width:60px;height:60px;min-height:60px;max-height:60px;margin:0;padding:0;line-height:normal;transition:all .3s;display:flex;position:relative;bottom:0;left:auto;right:0;overflow:hidden;box-shadow:0 2px 10px #0000004d}.surf-spots-button:hover{background-color:#0056b3;transform:scale(1.05)}.surf-spots-button svg{width:24px;height:24px;font-size:24px}.surf-spots-button:before,.surf-spots-button:after{display:none}@media (width>=768px){.surf-spots-modal .modal-dialog{max-width:90%;margin:0 auto}}@media (width>=992px){.surf-spots-modal .modal-dialog{max-width:80%}}.surf-spot-popup h3{color:#007bff;margin-top:0;margin-bottom:8px;font-size:18px;font-weight:600}.surf-spot-header{align-items:center;gap:8px;margin-bottom:5px;display:flex}.surf-spot-header svg{flex-shrink:0}.surf-spot-popup p{margin-bottom:8px;font-size:14px;line-height:1.4}.surf-spot-popup p strong{color:#555;font-weight:600}.maplibregl-popup-content{border-radius:8px;min-width:200px;padding:12px 16px;box-shadow:0 3px 14px #0003}.maplibregl-popup-tip{box-shadow:0 3px 14px #0003}.maplibregl-popup-close-button{color:#999;padding:0 8px;font-size:18px}.maplibregl-popup-close-button:hover{color:#333;background-color:#0000}.surf-marker{background:0 0;border:none}.maplibregl-marker{cursor:pointer}.surf-marker-icon{background-color:#fff;border:2px solid #06c;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:transform .2s;display:flex;box-shadow:0 2px 5px #0000004d}.surf-marker-icon:hover{transform:scale(1.1)}.clickable-title{cursor:pointer;text-decoration:none;transition:color .2s;position:relative}.clickable-title:hover{color:#0056b3}.clickable-title:after{content:"";transform-origin:100% 100%;background-color:#06c;width:100%;height:2px;transition:transform .3s;position:absolute;bottom:-2px;left:0;transform:scaleX(0)}.clickable-title:hover:after{transform-origin:0 100%;transform:scaleX(1)}.popup-footer{justify-content:center;margin-top:10px;display:flex}.forecast-button{color:#fff;cursor:pointer;background-color:#06c;border:none;border-radius:4px;justify-content:center;align-items:center;gap:5px;padding:6px 12px;font-size:14px;transition:background-color .2s;display:flex}.forecast-button:hover{background-color:#0056b3}.forecast-button:active{transform:translateY(1px)}