/* Shared button and call-to-action motion for the public site and portal. */
:where(
    button:not(.menu-button):not(.portal-menu-toggle),
    input[type="submit"],
    input[type="button"],
    .button,
    .nav-cta,
    .nav-login,
    .mobile-nav-cta,
    .mobile-nav-login,
    .footer-cta,
    .about-cta-button,
    .services-cta-button,
    .work-cta-button,
    .work-start-link,
    .process-cta-button,
    .contact-submit,
    .login-submit,
    .activation-button,
    .booking-submit,
    .portal-review-submit,
    .plan-cta,
    .services-text-link,
    .pricing-text-link,
    .pricing-cta-button
) {
    transition:
        transform 200ms ease,
        box-shadow 200ms ease,
        background-color 200ms ease,
        border-color 200ms ease,
        color 200ms ease;
}

/* Give every native button a restrained response, including utility controls. */
:where(button:not(:disabled), input[type="submit"]:not(:disabled), input[type="button"]:not(:disabled)):hover {
    transform: translateY(-2px);
}

/* Filled actions lift slightly and gain a soft shadow. */
:where(
    .button-light,
    .nav-cta,
    .mobile-nav-cta,
    .footer-cta,
    .about-cta-button,
    .services-cta-button,
    .work-cta-button,
    .process-cta-button,
    .contact-submit,
    .login-submit,
    .activation-button,
    .booking-submit,
    .portal-review-submit,
    .pricing-cta-button
):not(:disabled):hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(17, 19, 16, 0.16);
}

:where(
    .button-light,
    .nav-cta,
    .mobile-nav-cta,
    .footer-cta,
    .about-cta-button,
    .services-cta-button,
    .work-cta-button,
    .process-cta-button,
    .contact-submit,
    .login-submit,
    .activation-button,
    .booking-submit,
    .portal-review-submit,
    .pricing-cta-button
):not(:disabled):active {
    transform: translateY(0) scale(0.985);
    box-shadow: 0 4px 10px rgba(17, 19, 16, 0.12);
}

/* Outlined and text actions use a small directional nudge. */
:where(
    .button-ghost,
    .nav-login,
    .mobile-nav-login,
    .plan-cta,
    .work-start-link,
    .services-text-link,
    .pricing-text-link
):hover {
    transform: translateX(3px);
}

:where(.plan-cta, .services-text-link, .pricing-text-link):hover span,
:where(.about-cta-button, .services-cta-button, .work-cta-button, .process-cta-button, .footer-cta, .pricing-cta-button):hover svg,
:where(.about-cta-button, .services-cta-button, .work-cta-button, .process-cta-button, .footer-cta, .pricing-cta-button):hover > span:last-child {
    transform: translateX(4px);
}

/* Icon-only menu controls respond without changing their layout. */
:where(.menu-button, .portal-menu-toggle) {
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

:where(.menu-button, .portal-menu-toggle):hover {
    transform: scale(1.04);
    box-shadow: 0 6px 16px rgba(17, 19, 16, 0.12);
}

:where(.menu-button, .portal-menu-toggle):active {
    transform: scale(0.96);
}

:where(button, input[type="submit"], input[type="button"], .button, .nav-cta, .nav-login, .mobile-nav-cta, .mobile-nav-login, .footer-cta, .about-cta-button, .services-cta-button, .work-cta-button, .work-start-link, .process-cta-button, .contact-submit, .login-submit, .activation-button, .booking-submit, .portal-review-submit, .plan-cta, .services-text-link, .pricing-text-link, .pricing-cta-button):focus-visible {
    outline: 2px solid #87934f;
    outline-offset: 4px;
}

:where(button:disabled, input[type="submit"]:disabled, input[type="button"]:disabled) {
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    :where(
        button,
        input[type="submit"],
        input[type="button"],
        .button,
        .nav-cta,
        .mobile-nav-cta,
        .footer-cta,
        .about-cta-button,
        .services-cta-button,
        .work-cta-button,
        .work-start-link,
        .process-cta-button,
        .contact-submit,
        .login-submit,
        .activation-button,
        .booking-submit,
        .portal-review-submit,
        .plan-cta,
        .pricing-cta-button
    ) {
        transition-duration: 0.01ms;
    }
}
:root {
    --whatsapp-green: #25d366;
}

.whatsapp-float {
    position: fixed !important;
    z-index: 1001;
    top: auto !important;
    right: 18px !important;
    bottom: 24px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    color: #fff;
    background: var(--whatsapp-green);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(17, 72, 40, 0.28);
    text-decoration: none;
    transform: none;
    transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.whatsapp-float svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
}

.whatsapp-float:hover {
    color: #fff;
    background: #20bd5a;
    box-shadow: 0 11px 28px rgba(17, 72, 40, 0.34);
    transform: translateY(-3px) scale(1.04);
}

.whatsapp-float span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.whatsapp-float:focus-visible {
    outline: 3px solid #171914;
    outline-offset: 4px;
}

@media (max-width: 600px) {
    .whatsapp-float {
        right: 12px !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        width: 48px;
        height: 48px;
        min-height: 48px;
        padding: 0;
    }

    .whatsapp-float svg {
        width: 23px;
        height: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
        transition: none;
    }
}