/* MenuFlow — Scheduled Order Slot Picker UI/UX v4 */
.checkout-slot-panel {
    position: relative;
    gap: 10px !important;
    overflow: hidden;
}
.checkout-scheduled-native {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}
.checkout-slot-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.checkout-slot-heading > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.checkout-slot-heading b {
    color: #22302b;
    font-size: 11.5px;
    font-weight: 950;
}
.checkout-slot-heading small {
    color: #798681;
    font-size: 9.5px;
    line-height: 1.5;
}
.checkout-slot-badge {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, #dce7e2);
    border-radius: 999px;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 5%, #fff);
    font-size: 9px;
    font-weight: 900;
}
.checkout-slot-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}
.checkout-slot-control {
    display: grid;
    gap: 5px;
}
.checkout-slot-control > span {
    color: #43504b;
    font-size: 9.5px;
    font-weight: 900;
}
.checkout-slot-control .input,
.checkout-slot-control .select {
    min-height: 42px;
    width: 100%;
    border-color: #dce6e2;
    background: #fff;
    font-weight: 800;
}
.checkout-slot-control .select:disabled {
    color: #8e9894;
    background: #f3f6f5;
    cursor: not-allowed;
}
.checkout-slot-status {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--brand) 12%, #e0e9e5);
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand) 3%, #fff);
}
.checkout-slot-status > span {
    color: #385148;
    font-size: 9.8px;
    font-weight: 900;
}
.checkout-slot-status > small {
    color: #7a8782;
    font-size: 8.9px;
    line-height: 1.55;
}
.checkout-slot-feedback {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
    color: #68756f;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.5;
}
.checkout-slot-feedback[hidden],
.checkout-slot-feedback:empty {
    display: none !important;
}
.checkout-slot-feedback[data-kind="error"] {
    padding: 7px 9px;
    border: 1px solid #f1c9bd;
    border-radius: 9px;
    color: #a9442e;
    background: #fff5f1;
}
.checkout-slot-feedback[data-kind="success"] {
    color: var(--brand);
}

.theme-dark .checkout-slot-heading b,
.menu-display-dark_visual_grid .checkout-slot-heading b,
.theme-dark .checkout-slot-control > span,
.menu-display-dark_visual_grid .checkout-slot-control > span {
    color: #edf4f1;
}
.theme-dark .checkout-slot-heading small,
.menu-display-dark_visual_grid .checkout-slot-heading small,
.theme-dark .checkout-slot-status > small,
.menu-display-dark_visual_grid .checkout-slot-status > small {
    color: #9da9a4;
}
.theme-dark .checkout-slot-control .input,
.theme-dark .checkout-slot-control .select,
.menu-display-dark_visual_grid .checkout-slot-control .input,
.menu-display-dark_visual_grid .checkout-slot-control .select {
    color: #edf4f1;
    border-color: #35443e;
    background: #19241f;
}
.theme-dark .checkout-slot-status,
.menu-display-dark_visual_grid .checkout-slot-status {
    border-color: #35443e;
    background: #17221e;
}
.theme-dark .checkout-slot-status > span,
.menu-display-dark_visual_grid .checkout-slot-status > span {
    color: #dce9e4;
}

@media (max-width: 520px) {
    .checkout-slot-heading {
        align-items: flex-start;
    }
    .checkout-slot-controls {
        grid-template-columns: 1fr;
    }
    .checkout-slot-badge {
        margin-top: 1px;
    }
}