.stall-box {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    font-weight: bold;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
    user-select: none;
}

.stall-box:not(.booked) {
    flex-direction: column;
    gap: 2px;
    background: oklch(91% 0.15 98);
    box-shadow: inset 0 0 0 2px oklch(72% 0.16 85);
    color: oklch(28% 0.05 80);
    line-height: 1;
}

.stall-box .stall-size {
    font-size: 15px;
    font-weight: 600;
}

.stall-box.booked {
    background-color: #B5215A;
    background-image: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0.22) 3px,
            rgba(0, 0, 0, 0.12) 3px, rgba(0, 0, 0, 0.12) 7px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    cursor: not-allowed;
}

.stall-box.held {
    background: #FBE1EA;
    box-shadow: inset 0 0 0 2px #DE7FA3;
    color: #7C1440;
    cursor: not-allowed;
}

.stall-box.progress {
    background: #F2B8CD;
    box-shadow: inset 0 0 0 2px #C94F7C;
    color: #5E1030;
    cursor: not-allowed;
}

.stall-box.is-hover:not(.booked):not(.held):not(.progress) {
    background: oklch(88% 0.06 255);
    box-shadow: inset 0 0 0 3px #4285F4;
    color: oklch(30% 0.1 260);
}

.stall-box.selected {
    background: oklch(60% 0.17 258) !important;
    box-shadow: inset 0 0 0 4px oklch(45% 0.17 260);
    color: #fff;
}