/* Space below mobile controls, including the iPhone home indicator area. */
:root {
    --sendaflor-bottom-space: max(6px, calc(env(safe-area-inset-bottom, 0px) - 12px));
}

@media screen and (max-width: 991px) {
    .bottom-navigation-wrap {
        padding-bottom: var(--sendaflor-bottom-space);
    }

    .footer {
        padding-bottom: calc(62px + var(--sendaflor-bottom-space));
    }
}

@media screen and (max-width: 767px) {
    .flower-configurator-footer {
        flex-shrink: 0;
        padding-bottom: calc(14px + var(--sendaflor-bottom-space));
    }
}

/* Let the message scroll instead of pushing the actions off a short screen. */
@media screen and (max-width: 991px) and (max-height: 500px) {
    .flower-configurator-body {
        min-height: 0;
    }

    .flower-configurator-header,
    .flower-configurator-steps,
    .flower-configurator-footer {
        flex-shrink: 0;
    }
}

@media screen and (max-width: 600px) {
    .scroll-to-top {
        bottom: calc(50px + var(--sendaflor-bottom-space));
    }

    .scroll-to-top.active {
        bottom: calc(75px + var(--sendaflor-bottom-space));
    }
}

@media screen and (max-width: 575px) {
    .sendaflor-footer-legal {
        padding-bottom: calc(92px + var(--sendaflor-bottom-space)) !important;
    }
}

/* Keep the actions close to the active form while entering gift details. */
@media screen and (max-width: 767px) {
    .flower-configurator:has(input:focus, textarea:focus, select:focus) .flower-configurator-footer {
        padding-bottom: 14px;
    }
}