/* Weather Floating Button Styles - Using Working Flip Implementation */
.floating-btn.weather-floating-btn-8473 {
    perspective: 1000px !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}

.weather-btn-content-wrapper-8473 {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    transition: transform 0.8s !important;
    transform-style: preserve-3d !important;
}

.weather-front,
.weather-back {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    border-radius: 10px !important;
    background: linear-gradient(45deg, var(--weather-button-color, #4facfe), var(--weather-button-hover-color, #00f2fe)) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    flex-direction: column !important;
}

.weather-back {
    background: linear-gradient(45deg, var(--weather-button-hover-color, #00f2fe), var(--weather-button-color, #4facfe)) !important;
    transform: rotateY(180deg) !important;
}

.floating-btn.weather-floating-btn-8473.flipped .weather-btn-content-wrapper-8473 {
    transform: rotateY(180deg) !important;
}

.weather-icon-display-8473 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: block !important;
    font-size: var(--weather-front-icon-size, 16px) !important;
}

.weather-temp-display-8473 {
    font-weight: bold !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: block !important;
    font-size: var(--weather-front-text-size, 10px) !important;
}