/* ===================================================================
   GEOLOCATION STYLES
   =================================================================== */

.geo-btn {
    position: absolute;
    bottom: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: white;
    color: #0A84FF;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 15;
    outline: none;
}

.geo-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(10, 132, 255, 0.25), 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #0064D2;
}

.geo-btn:active { transform: scale(0.95); }

.geo-btn.loading {
    pointer-events: none;
    color: #34C759;
    animation: geoSpin 1s linear infinite;
}

.geo-btn.success {
    color: #34C759;
    animation: geoSuccess 0.6s ease-out;
}

.geo-btn.active {
    background: linear-gradient(135deg, #0A84FF, #0064D2);
    color: white;
    box-shadow: 0 6px 20px rgba(10, 132, 255, 0.35);
}

.geo-icon { width: 26px; height: 26px; }

@keyframes geoSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes geoSuccess { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }

@media (max-width: 600px) {
    .geo-btn { bottom: 100px; right: 16px; width: 50px; height: 50px; }
}