/**
 * AVH Auth — MyListing Account Phone.
 *
 * Styles for changing the verified mobile number
 * from the user's Account Details page.
 *
 * Structural Account Phone layout styles are maintained
 * in registration.css to preserve the existing MyListing
 * integration and responsive behaviour.
 *
 * @package AVH\Auth
 */


/* ==========================================================
   Account Phone OTP Timer
   ========================================================== */

.avh-account-otp-timer,
.avh-account-resend-wrapper {
    margin-top: 12px;

    font-size: 13px;
    line-height: 1.5;
}


/* ==========================================================
   Account Phone OTP Countdown
   ========================================================== */

.avh-account-otp-timer {
    color: var(--avh-text-secondary);
}

#avh-account-countdown {
    color: var(--avh-brand-primary);

    font-weight: 600;
}


/* ==========================================================
   Account Phone Resend OTP
   ========================================================== */

.avh-account-resend-wrapper {
    color: var(--avh-text-secondary);
}

#avh-account-resend-otp {
    color: var(--avh-brand-primary);

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        opacity
        var(--avh-transition-fast);
}

#avh-account-resend-otp:hover,
#avh-account-resend-otp:focus {
    color: var(--avh-brand-primary);

    opacity: .8;

    text-decoration: underline;
}


/* ==========================================================
   Verify & Update — Ready State
   ========================================================== */

#avh-account-verify-phone.avh-account-verify-ready {
    animation:
        avhAccountVerifyPulse
        1.2s
        ease-in-out
        2;

    transform-origin: center;
}


/* ==========================================================
   Verify Button Attention Animation
   ========================================================== */

@keyframes avhAccountVerifyPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }

}


/* ==========================================================
   Reduced Motion Accessibility
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    #avh-account-verify-phone.avh-account-verify-ready {
        animation: none;
    }

}