/* =====================================================
   Floating Maintenance Booking Button — Premium Edition
   Unique identity, wrench-themed motion, drawer-aware
   ===================================================== */

/* ─── Base Button ─── */
.maint-float-btn {
    position: fixed;
    bottom: 190px; right: 20px;
    z-index: 1200;
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.7rem 1.3rem;
    background: linear-gradient(135deg, #0E7C4A, #19A974);
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700; font-size: 0.85rem;
    box-shadow: 0 4px 18px rgba(14,124,74,0.35);
    transition: all 0.35s cubic-bezier(.25,.8,.25,1), z-index 0s;
    overflow: visible;
}

/* ─── STRONG Continuous Idle Animation ─── */
.maint-float-btn {
    animation: mfAttentionCombo 3s ease-in-out infinite;
}
.maint-float-btn i {
    font-size: 1.15rem;
    display: inline-flex;
    animation: mfWrenchContinuous 2.5s ease-in-out infinite;
    transform-origin: 50% 50%;
}
.maint-float-btn .maint-float-text { white-space: nowrap; }

/* ─── Badge "جديد" — ABOVE the button ─── */
.maint-float-badge {
    position: absolute;
    top: -10px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #FF6B00, #F59E0B);
    color: #fff; font-size: 0.62rem; font-weight: 800;
    padding: 2px 10px; border-radius: 10px;
    white-space: nowrap; pointer-events: none;
    z-index: 2;
    animation: mfBadgePulse 2s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(255,107,0,0.3);
}

/* ─── Tooltip (on hover, RTL) ─── */
.maint-float-btn .maint-tooltip {
    position: absolute;
    left: auto; right: calc(100% + 14px); top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: #1E293B; color: #fff;
    padding: 7px 14px; border-radius: 8px;
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 3px 12px rgba(0,0,0,0.2);
    z-index: 3;
}
.maint-float-btn .maint-tooltip::after {
    content: ''; position: absolute;
    left: 100%; top: 50%; transform: translateY(-50%);
    border: 5px solid transparent; border-left-color: #1E293B;
}
.maint-float-btn:hover .maint-tooltip {
    opacity: 1; transform: translateY(-50%) translateX(0);
}

/* ─── Hover: Strong Premium Effect ─── */
.maint-float-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 8px 30px rgba(14,124,74,0.5), 0 0 20px rgba(25,169,116,0.3);
    background: linear-gradient(135deg, #0A6B3F, #14946A);
    z-index: 10001;
}
.maint-float-btn:hover i {
    animation: mfWrenchHover 0.6s ease forwards;
}

/* Active/Click */
.maint-float-btn:active {
    transform: scale(0.92) !important;
    transition: transform 0.1s !important;
}

/* ─── Z-INDEX on hover: float above brand rail ─── */
.maint-float-btn:hover {
    z-index: 10001 !important;
}

/* ─── KEYFRAMES ─── */

/* Combined attention: bounce + glow */
@keyframes mfAttentionCombo {
    0%   { transform: translateY(0);   box-shadow: 0 4px 18px rgba(14,124,74,0.35); }
    15%  { transform: translateY(-8px); box-shadow: 0 8px 25px rgba(14,124,74,0.5), 0 0 15px rgba(25,169,116,0.2); }
    30%  { transform: translateY(-2px); box-shadow: 0 4px 18px rgba(14,124,74,0.4); }
    45%  { transform: translateY(-5px); box-shadow: 0 6px 22px rgba(14,124,74,0.45), 0 0 10px rgba(25,169,116,0.15); }
    60%  { transform: translateY(0);   box-shadow: 0 4px 18px rgba(14,124,74,0.35); }
    100% { transform: translateY(0);   box-shadow: 0 4px 18px rgba(14,124,74,0.35); }
}

/* Continuous wrench rotation — tightening tool */
@keyframes mfWrenchContinuous {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(18deg); }
    20%  { transform: rotate(-12deg); }
    30%  { transform: rotate(10deg); }
    40%  { transform: rotate(-6deg); }
    50%  { transform: rotate(3deg); }
    60%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* Hover wrench: strong twist */
@keyframes mfWrenchHover {
    0%   { transform: rotate(0deg) scale(1); }
    20%  { transform: rotate(-30deg) scale(1.2); }
    40%  { transform: rotate(20deg) scale(1.15); }
    60%  { transform: rotate(-12deg) scale(1.1); }
    80%  { transform: rotate(6deg) scale(1.05); }
    100% { transform: rotate(0deg) scale(1); }
}

/* Badge pulse */
@keyframes mfBadgePulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
    50%      { transform: translateX(-50%) scale(1.1); opacity: 0.85; }
}

/* ─── DRAWER-AWARE HIDING ─── */
body.drawer-open .maint-float-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(80px) !important;
    transition: all 0.35s cubic-bezier(.25,.8,.25,1) !important;
}

/* ─── MOBILE ─── */
@media (max-width: 768px) {
    .maint-float-btn {
        top: 10px; left: 90px; right: auto; bottom: auto;
        padding: 0; border-radius: 50%;
        width: 52px; height: 52px;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(14,124,74,0.35);
        overflow: visible;
    }
    .maint-float-text { display: none; }
    .maint-float-btn i { font-size: 1.25rem; }
    .maint-float-btn .maint-tooltip { display: none; }
    .maint-float-badge {
        top: -9px; left: 50%; right: auto;
        font-size: 0.55rem; padding: 1px 7px;
    }
    .maint-float-btn:active {
        transform: scale(0.88) !important;
        box-shadow: 0 2px 8px rgba(14,124,74,0.3) !important;
    }
}

@media (max-width: 420px) {
    .maint-float-btn {
        top: 10px; left: 82px; right: auto; bottom: auto;
        width: 48px; height: 48px;
    }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    .maint-float-btn,
    .maint-float-btn i,
    .maint-float-badge {
        animation: none !important;
        transition: none !important;
    }
}

/* Hide on booking page itself */
body.page-maintenance-booking .maint-float-btn { display: none; }