/* Slot Machine Loading Animation */
/* Inline 3-reel slot loader for submit buttons */

.slot-loader {
    display: inline-flex;
    gap: 4px;
    padding: 6px 8px;
    border: 2px solid #333;
    border-radius: 6px;
    background: radial-gradient(circle at top, #222, #000);
    box-shadow: inset 0 0 6px #000, 0 0 10px rgba(0, 0, 0, 0.5);
    vertical-align: middle;
    margin-left: 8px;
}

.slot-loader .reel {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
    box-shadow: inset 0 0 4px #000;
    position: relative;
}

.slot-loader .symbols {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: spin-reel 2.4s cubic-bezier(0.12, 0.85, 0.25, 1) infinite;
}

.slot-loader .symbol {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    user-select: none;
}

/* Stagger the animation for each reel */
.slot-loader .reel:nth-child(1) .symbols {
    animation-delay: 0s;
}

.slot-loader .reel:nth-child(2) .symbols {
    animation-delay: 0.2s;
}

.slot-loader .reel:nth-child(3) .symbols {
    animation-delay: 0.4s;
}

@keyframes spin-reel {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-168px);
        /* 6 symbols * 28px */
    }
}

/* Button loading state */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.btn-loading-text {
    display: inline-flex;
    align-items: center;
}