/* =========================================================
   SDR PREMIUM OPENLAYERS ROTATE (COMPASS) CONTROL
   Glass / Minimal / SaaS
   ========================================================= */

.ol-rotate {
    position: absolute !important;
    top: 130px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 1100 !important;

    padding: 0 !important;
    background: transparent !important;
    border: none !important;

    user-select: none;
    -webkit-user-select: none;
    isolation: isolate;

    animation: sdr-rotate-enter 0.5s cubic-bezier(.16, 1, .3, 1) both;
}

/* =========================================================
   ROTATE BUTTON (CIRCULAR GLASS DOCK)
   ========================================================= */

.ol-rotate button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    outline: none !important;

    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.94),
        rgba(232, 250, 242, 0.88)
    ) !important;

    color: #078e80 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    cursor: pointer !important;
    overflow: hidden !important;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        0 3px 7px rgba(7, 145, 130, 0.08),
        0 9px 20px rgba(15, 23, 42, 0.10) !important;

    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);

    transition:
        transform 0.3s cubic-bezier(.16, 1, .3, 1),
        background 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease !important;
}

/* Compass Inner Subtle Ring */
.ol-rotate button::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1px solid rgba(7, 145, 130, 0.08);
    pointer-events: none;
}

/* Light Sweep Effect */
.ol-rotate button::before {
    content: "";
    position: absolute;
    top: -80%;
    left: -50%;
    width: 50%;
    height: 260%;
    transform: rotate(25deg) translateX(-180%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );
    transition: transform 0.7s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
    z-index: 1;
}

.ol-rotate button:hover::before {
    transform: rotate(25deg) translateX(420%);
}

/* =========================================================
   ROTATE HOVER & ACTIVE
   ========================================================= */

.ol-rotate button:hover {
    transform: translateY(-2px) scale(1.05) !important;

    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #d9f7e9 100%
    ) !important;

    color: #067d70 !important;
    border-color: rgba(7, 145, 130, 0.35) !important;

    box-shadow:
        inset 0 1px 1px #ffffff,
        0 5px 10px rgba(7, 145, 130, 0.10),
        0 14px 28px rgba(7, 145, 130, 0.18),
        0 0 0 4px rgba(7, 145, 130, 0.05) !important;
}

.ol-rotate button:active {
    transform: translateY(0) scale(0.96) !important;
    transition-duration: 0.1s !important;
}

.ol-rotate button:focus-visible {
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.95),
        0 0 0 6px rgba(7, 145, 130, 0.30),
        0 12px 28px rgba(7, 145, 130, 0.18) !important;
}

/* =========================================================
   RESPONSIVE (MOBILE & SMALL SCREENS)
   ========================================================= */

@media (max-width: 768px) {
    .ol-rotate {
        top: 135px !important;
        right: 10px !important;
    }

    .ol-rotate button {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 380px) {
    .ol-rotate {
        top: 120px !important;
        right: 8px !important;
    }

    .ol-rotate button {
        width: 34px !important;
        height: 34px !important;
    }
}

/* =========================================================
   ANIMATION & ACCESSIBILITY
   ========================================================= */

@keyframes sdr-rotate-enter {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ol-rotate {
        animation: none !important;
    }
    .ol-rotate button,
    .ol-rotate button::before {
        transition: none !important;
    }
}