.mobile-floating-control-bar {
    display: none;
}

@media (max-width: 767px) {
    .mobile-floating-control-bar {
        --mfb-elev:
            0 0 0 1px var(--border-color),
            0 3px 8px color-mix(in srgb, var(--shadow-strong) 85%, transparent),
            0 10px 26px color-mix(in srgb, var(--shadow-dark) 42%, transparent),
            0 22px 48px color-mix(in srgb, var(--shadow-dark) 26%, transparent);
        --mfb-elev-morphing:
            0 0 0 1px var(--border-color),
            0 3px 8px color-mix(in srgb, var(--shadow-strong) 85%, transparent),
            0 10px 26px color-mix(in srgb, var(--shadow-dark) 46%, transparent);
        --mfb-back-btn-bg: color-mix(in srgb, var(--gray-200) 92%, var(--field-bg));
        --mfb-back-btn-bg-active: color-mix(in srgb, var(--gray-300) 88%, var(--field-bg));
        --mfb-footer-cutout-size: 18px;
        --mfb-footer-cutout-round: var(--mfb-footer-cutout-size);
        --mfb-depth-shadow: linear-gradient(
            to top,
            color-mix(in srgb, var(--shadow-dark) 24%, transparent) 0%,
            color-mix(in srgb, var(--shadow-dark) 14%, transparent) 26%,
            color-mix(in srgb, var(--shadow-dark) 6%, transparent) 52%,
            transparent 100%
        );
        --mfb-depth-surface: linear-gradient(
            to top,
            color-mix(in srgb, var(--field-bg) 74%, transparent) 0%,
            color-mix(in srgb, var(--field-bg) 40%, transparent) 28%,
            color-mix(in srgb, var(--field-bg) 18%, transparent) 52%,
            color-mix(in srgb, var(--field-bg) 6%, transparent) 74%,
            transparent 100%
        );
        --mfb-hit: clamp(40px, 10vw, 48px);
        --mfb-title-fs: clamp(13px, 3.5vw, 16px);
        --mfb-sm: clamp(12px, 3vw, 16px);
        --mfb-back-icon-fs: clamp(16px, 4vw, 20px);

        display: grid;
        grid-template-areas: 'stack';
        position: fixed;
        bottom: calc(16px + var(--mfb-keyboard-inset, 0px));
        left: 16px;
        right: 16px;
        z-index: 1000;
        max-width: calc(100vw - 32px);
        transform-origin: center bottom;

        &.mobile-floating-bar-has-modal {
            --mobile-bar-modal-max-height: calc(
                100dvh - 32px - env(safe-area-inset-bottom, 0px) - var(--mfb-keyboard-inset, 0px)
            );
            width: 100%;
            max-height: var(--mobile-bar-modal-max-height);
            min-height: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            align-content: stretch;
            border-radius: 24px;
            z-index: 1050;
            overflow: hidden;
            background: var(--field-bg);
            box-shadow: var(--mfb-elev);
            transform-origin: center bottom;
            .mobile-control-bar-main,
            .mobile-control-bar-view {
                display: none !important;
                visibility: hidden;
                pointer-events: none;
            }

            &.mobile-floating-bar-modal-morphing {
                box-shadow: var(--mfb-elev-morphing);
            }

            &.mobile-floating-bar-modal-morphing > .modal {
                justify-content: flex-end;

                .modal-dialog {
                    flex: 0 0 auto;
                }
            }

            > .modal {
                flex: 1 1 auto;
                position: relative !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                transform: none !important;
                display: flex !important;
                flex-direction: column !important;
                width: 100%;
                max-width: 100%;
                max-height: none;
                height: auto !important;
                min-height: 0;
                padding: 0;
                background: transparent;
                border: none;
                margin: 0 !important;
                overflow: hidden;

                .modal-dialog {
                    margin: 0 !important;
                    max-width: none !important;
                    width: 100%;
                    max-height: var(--mobile-bar-modal-max-height);
                    flex: 1 1 auto;
                    display: flex;
                    flex-direction: column;
                    min-height: 0;
                    min-width: 0;
                    transition: none !important;
                    transform: none !important;
                }

                .modal-dialog > form {
                    display: flex;
                    flex-direction: column;
                    flex: 1 1 auto;
                    min-height: 0;
                    min-width: 0;
                    width: 100%;
                    overflow: hidden;
                }

                .modal-content {
                    position: relative;
                    border-radius: 24px;
                    display: flex;
                    flex-direction: column;
                    flex: 1 1 0%;
                    min-height: 0;
                    min-width: 0;
                    overflow: hidden;
                    border: none;
                    box-shadow: none;
                    background: var(--field-bg);
                }

                .modal-header {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    width: 100%;
                    gap: 12px;
                    padding: clamp(8px, 2vw, 12px) var(--mfb-sm);
                    border-bottom: 1px solid var(--light);
                    flex-shrink: 0;
                    position: relative;
                    z-index: 3;

                    .close,
                    .btn-close {
                        display: none !important;
                    }

                    .mobile-floating-bar-back-btn {
                        order: -1;
                        margin: 0;
                    }

                    .modal-title {
                        flex: 1;
                        min-width: 0;
                        margin: 0;
                        text-align: left;
                    }
                }

                .modal-body {
                    overflow-x: hidden;
                    overflow-y: auto;
                    -webkit-overflow-scrolling: touch;
                    overscroll-behavior-y: contain;
                    padding: var(--mfb-sm);
                    flex: 1 1 auto;
                    min-height: 0;
                    min-width: 0;
                    position: relative;
                    z-index: 1;

                    .row {
                        margin-left: 0;
                        margin-right: 0;
                    }

                    .col,
                    [class*="col-"] {
                        padding-left: 0;
                        padding-right: 0;
                    }
                }

                .modal-footer {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    gap: clamp(6px, 1.5vw, 10px);
                    padding: clamp(8px, 2vw, 10px) var(--mfb-sm);
                    padding-bottom: calc(clamp(8px, 2vw, 10px) + env(safe-area-inset-bottom, 0px));
                    margin-top: 0;
                    border-top: 1px solid var(--light);
                    flex-shrink: 0;
                    position: relative;
                    z-index: 2;
                    background: var(--field-bg);

                    .row {
                        flex-wrap: nowrap;
                        width: 100%;
                    }

                    .col, [class*="col-"] {
                        width: auto;
                        flex: 0 0 auto;
                        max-width: none;
                        padding-left: 0;
                    }

                    button, .btn {
                        flex-shrink: 0;
                        white-space: nowrap;
                    }
                }

                .modal-header,
                .modal-footer {
                    &::before {
                        content: '';
                        position: absolute;
                        left: 0;
                        right: 0;
                        height: 76px;
                        pointer-events: none;
                        z-index: 2;
                        opacity: 0;
                        background-image: var(--mfb-depth-shadow), var(--mfb-depth-surface);
                        transition: opacity var(--transition-fast);
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        left: 0;
                        right: 0;
                        height: var(--mfb-footer-cutout-size);
                        pointer-events: none;
                        z-index: 2;
                        opacity: 0;
                        background:
                            radial-gradient(
                                circle at right top,
                                transparent calc(var(--mfb-footer-cutout-round) - 0.5px),
                                var(--field-bg) calc(var(--mfb-footer-cutout-round) + 0.5px)
                            ) left top / var(--mfb-footer-cutout-size) 100% no-repeat,
                            radial-gradient(
                                circle at left top,
                                transparent calc(var(--mfb-footer-cutout-round) - 0.5px),
                                var(--field-bg) calc(var(--mfb-footer-cutout-round) + 0.5px)
                            ) right top / var(--mfb-footer-cutout-size) 100% no-repeat;
                        transition: opacity var(--transition-fast);
                    }
                }

                .modal-header {
                    &::before {
                        top: 100%;
                        transform: scaleY(-1);
                    }

                    &::after {
                        bottom: calc(-1 * var(--mfb-footer-cutout-size));
                        transform: scaleY(-1);
                    }
                }

                .modal-footer {
                    &::before {
                        bottom: 100%;
                    }

                    &::after {
                        top: calc(-1 * var(--mfb-footer-cutout-size));
                    }
                }

                .modal-footer > * {
                    margin: 0;
                }
            }
        }

        &.mobile-floating-bar-show-bottom-shadow > .modal .modal-footer,
        &.mobile-floating-bar-show-top-shadow > .modal .modal-header {
            &::before,
            &::after {
                opacity: 1;
            }
        }

        .mobile-control-bar-main,
        .mobile-control-bar-view {
            position: relative;
            grid-area: stack;
            align-self: end;
            width: 100%;
            display: flex;
            align-items: center;
            gap: clamp(8px, 2vw, 12px);
            min-height: var(--mfb-hit);
            opacity: 1;
            padding: clamp(8px, 2vw, 12px) var(--mfb-sm);
            border-radius: 500px;
            max-width: 100%;
            overflow: visible;
            min-width: 0;
            isolation: isolate;
            background: transparent;
            box-shadow: var(--mfb-elev);
        }

        &.mobile-floating-bar-surface-morphing {
            .mobile-control-bar-main,
            .mobile-control-bar-view {
                overflow: hidden;
                transform-origin: center bottom;
                box-shadow: var(--mfb-elev-morphing);
            }

            .mobile-control-bar-panel {
                justify-content: flex-end;

                > * {
                    flex-shrink: 0;
                }
            }
        }

        .mobile-floating-bar-surface-bg {
            position: absolute;
            inset: 0;
            border-radius: inherit;
            overflow: hidden;
            background: var(--field-bg);
            box-shadow: none;
            transform-origin: center bottom;
            z-index: 0;
            pointer-events: none;
        }

        .mobile-control-bar-main > *:not(.mobile-floating-bar-surface-bg),
        .mobile-control-bar-view > *:not(.mobile-floating-bar-surface-bg) {
            position: relative;
            z-index: 1;
        }

        .mobile-control-bar-panel {
            flex-direction: column;
            align-items: stretch;
            gap: 16px;
            border-radius: 24px;
        }

        .mobile-control-bar-header {
            display: flex;
            align-items: center;
            width: 100%;
            gap: 12px;
        }

        .mobile-control-bar-title,
        &.mobile-floating-bar-has-modal .modal .modal-header .modal-title {
            font-weight: 700;
            font-size: var(--mfb-title-fs);
            color: var(--text-color);
            font-family: var(--font-sans);
        }

        .mobile-control-btn-back,
        .mobile-floating-bar-back-btn {
            width: var(--mfb-hit);
            height: var(--mfb-hit);
            min-width: var(--mfb-hit);
            border-radius: 50%;
            border: none;
            background: var(--mfb-back-btn-bg);
            color: var(--text-color);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            cursor: pointer;
            transition: background-color var(--transition-fast);
            flex-shrink: 0;

            &:active {
                background: var(--mfb-back-btn-bg-active);
            }

            i {
                font-size: var(--mfb-back-icon-fs);
            }
        }

        .mobile-control-bar-title {
            flex: 1;
            margin: 0;
            display: flex;
            align-items: center;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mobile-filter-wrapper {
            display: flex;
            flex-direction: column;
            gap: 16px;
            width: 100%;
            margin-top: 8px;
        }

        .mobile-control-bar-pledge-options {
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            -ms-overflow-style: none;

            &::-webkit-scrollbar {
                display: none;
            }
        }

        .mobile-control-btn,
        .mobile-control-btn-dots {
            flex: 1 1 0;
            min-width: var(--mfb-hit);
            max-width: clamp(80px, 20vw, 120px);
            height: var(--mfb-hit);
            border-radius: 500px;
            border: none;
            background: var(--accent);
            color: var(--text-on-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
            box-shadow: 0 2px 8px var(--accent-shadow-strong);
            position: relative;

            i {
                font-size: clamp(14px, 3.5vw, 18px);
            }

            &:active {
                box-shadow: 0 2px 6px var(--accent-shadow-strong);
            }
        }

        .mobile-control-bar-main > .disabled-tooltip-wrap {
            flex: 1 1 0;
            min-width: var(--mfb-hit);
            max-width: clamp(80px, 20vw, 120px);
            display: flex;
            cursor: not-allowed;

            .mobile-control-btn {
                width: 100%;
                max-width: none;
            }
        }

        .mobile-control-btn--2x {
            flex: 2 2 0;
            min-width: calc(var(--mfb-hit) * 2 + clamp(8px, 2vw, 12px));
            max-width: none;

            & i {
                font-size: clamp(16px, 4vw, 20px);
            }
        }

        .mobile-control-btn--has-active::after,
        .mobile-control-btn-filters--has-active::after,
        .mobile-control-btn-search--has-active::after {
            content: '';
            position: absolute;
            top: -3px;
            right: -3px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 0 2px var(--field-bg);
            pointer-events: none;
        }

        .mobile-control-btn-pill,
        .mobile-pledge-option-btn {
            height: var(--mfb-hit);
            border-radius: 500px;
            border: none;
            background: var(--accent);
            color: var(--text-on-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(4px, 1.5vw, 8px);
            cursor: pointer;
            transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
            box-shadow: 0 2px 8px var(--accent-shadow-strong);
            font-weight: 600;
            white-space: nowrap;
            min-width: 0;
            overflow: hidden;

            span,
            .btn-text {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                min-width: 0;
                flex: 1 1 auto;
                display: block;
            }

            &:active {
                box-shadow: 0 2px 6px var(--accent-shadow-strong);
            }
        }

        .mobile-control-btn-pill {
            width: clamp(80px, 20vw, 120px);
            min-width: clamp(80px, 20vw, 120px);
            flex: 0 0 auto;
            font-size: clamp(11px, 2.8vw, 14px);
            padding: 0 clamp(12px, 3vw, 20px);
            max-width: 100%;

            i {
                flex-shrink: 0;
                display: none;
                font-size: var(--mfb-sm);
            }
        }

        .mobile-pledge-option-btn {
            width: clamp(80px, 20vw, 120px);
            min-width: clamp(80px, 20vw, 120px);
            font-size: clamp(10px, 2.5vw, 13px);
            padding: 0 clamp(10px, 2.5vw, 16px);
            flex-shrink: 0;
            max-width: 100%;

            i {
                flex-shrink: 0;
                font-size: var(--mfb-sm);
            }
        }

        .mobile-search-input-wrapper {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
        }

        .mobile-search-icon {
            position: absolute;
            left: var(--mfb-sm);
            color: var(--text-color);
            font-size: var(--mfb-title-fs);
            pointer-events: none;
            z-index: 1;
        }

        .mobile-search-input {
            width: 100%;
            height: var(--mfb-hit);
            border-radius: 500px;
            border: 2px solid var(--border-color);
            padding: 0 var(--mfb-sm) 0 clamp(36px, 9vw, 44px);
            font-size: var(--mfb-title-fs);
            transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
            background: var(--field-bg);

            &:focus {
                outline: none;
                border-color: var(--accent);
                box-shadow: 0 0 0 3px var(--accent-shadow-light);
            }
        }

        .mobile-control-bar-filters {
            .sliding-filter-group {
                margin-bottom: 0;
            }

            .sliding-filter-label {
                font-size: clamp(12px, 3vw, 14px);
                font-weight: 600;
                color: var(--text-color);
                margin-bottom: clamp(6px, 1.5vw, 8px);
            }

            .sliding-filter-btn:not(.active) {
                color: var(--text-color);
            }
        }

        .mobile-bulk-actions-wrapper {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            margin-top: 8px;

            > .disabled-tooltip-wrap {
                display: block;
                width: 100%;
                max-width: none;
                min-width: 0;
                flex: none;
                align-self: stretch;
                cursor: not-allowed;

                .stack-btn,
                .stack-btn:disabled,
                .stack-btn.disabled {
                    width: 100%;
                    max-width: none;
                }
            }
        }
    }

    body.mobile-floating-bar-has-modal .modal-backdrop {
        display: none !important;
    }

    .d-md-none .main_start_no_bottom {
        padding-bottom: 100px;
    }

    @media (max-width: 400px) {
        .mobile-floating-control-bar .mobile-control-btn-pill i {
            display: flex;
        }
    }

    @media (max-width: 360px) {
        .mobile-floating-control-bar .mobile-control-bar-main {
            gap: 6px;
            padding: 8px 10px;
        }

        .mobile-floating-control-bar .mobile-control-btn-pill {
            font-size: 11px;
            padding: 0 10px;

            i {
                font-size: 12px;
            }
        }

        .mobile-floating-control-bar .mobile-pledge-option-btn {
            font-size: 10px;
            padding: 0 8px;
        }
    }
}