/* =========================================
   ORANGE HAND CAR WASH
   PRIORITY RESERVATION BUTTON
   3D BLACK SHADOW - DESKTOP + MOBILE
========================================= */

/* DESKTOP BUTTON */
.priority-reservation-btn {
    position: fixed !important;
    top: 198px !important;
    right: 15px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 9999 !important;

    display: block !important;
    width: auto;
    box-sizing: border-box;

    /* GLOSSY ORANGE */
    background: linear-gradient(
        180deg,
        #FFB347 0%,
        #FF8500 25%,
        #FF6600 60%,
        #D94B00 100%
    ) !important;

    color: #FFFFFF !important;

    /* SMALLER DESKTOP BUTTON */
    padding: 9px 13px !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;

    font-family: Arial, sans-serif;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px;
    text-align: center;
    text-decoration: none !important;

    text-shadow:
        1px 2px 2px rgba(0,0,0,0.7);

    /* BLACK 3D SHADOW */
    box-shadow:
        0 4px 0 #000000,
        0 8px 14px rgba(0,0,0,0.55);

    transform: none !important;

    animation:
        reservationPulse 2.5s
        ease-in-out infinite;

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

/* DESKTOP PULSE */
@keyframes reservationPulse {
    0%, 100% {
        box-shadow:
            0 4px 0 #000000,
            0 8px 14px rgba(0,0,0,0.55),
            0 0 8px rgba(255,102,0,0.2);
    }

    50% {
        box-shadow:
            0 4px 0 #000000,
            0 10px 18px rgba(0,0,0,0.7),
            0 0 18px rgba(255,102,0,0.65);
    }
}

/* DESKTOP HOVER */
.priority-reservation-btn:hover {
    background: linear-gradient(
        180deg,
        #FFC266 0%,
        #FF9000 35%,
        #FF5500 100%
    ) !important;

    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    animation: none !important;

    box-shadow:
        0 6px 0 #000000,
        0 10px 18px rgba(0,0,0,0.65);
}

/* DESKTOP PRESSED EFFECT */
.priority-reservation-btn:active {
    transform: translateY(3px) !important;
    animation: none !important;

    box-shadow:
        0 2px 0 #000000,
        0 4px 8px rgba(0,0,0,0.5);
}

/* =========================================
   MOBILE - FLOATING BOTTOM CENTER
========================================= */

@media screen and (max-width: 767px) {

    .priority-reservation-btn {
        position: fixed !important;

        top: auto !important;
        bottom: 25px !important;

        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;

        width: 310px !important;
        max-width: calc(100vw - 30px) !important;

        padding: 17px 14px !important;

        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1.4 !important;

        border: 3px solid #000000 !important;
        border-radius: 14px !important;

        text-align: center !important;
        white-space: normal !important;
        box-sizing: border-box !important;

        z-index: 9999 !important;

        animation:
            mobileReservationPulse 2.5s
            ease-in-out infinite !important;
    }

    /* MOBILE BLACK SHADOW PULSE */
    @keyframes mobileReservationPulse {
        0%, 100% {
            box-shadow:
                0 9px 0 #000000,
                0 15px 26px rgba(0,0,0,0.8),
                0 0 14px rgba(255,102,0,0.35);
        }

        50% {
            box-shadow:
                0 9px 0 #000000,
                0 18px 34px rgba(0,0,0,0.9),
                0 0 30px rgba(255,102,0,0.85);
        }
    }

    /* MOBILE TAP EFFECT */
    .priority-reservation-btn:active {
        transform:
            translateX(-50%)
            translateY(4px) !important;

        animation: none !important;

        box-shadow:
            0 2px 0 #000000,
            0 5px 12px rgba(0,0,0,0.6);
    }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .priority-reservation-btn {
        animation: none !important;
        transition: none !important;
    }
}